Preview mobile param

scripts/init.js

@@ -1,15 +1,28 @@
 import ComponentLoader from './component-loader.js';
-import { config, debounce, eagerImage, getBreakPoint } from './libs.js';
+import { config, debounce, getBreakPoint } from './libs.js';
 
-export function getInfos(blocks) {
+export let loaded = false;
+
+export const eagerImage = (block, length = 1) => {
+  const imgs = Array.from(block.querySelectorAll('img')).slice(0, length);
+  console.log('eager', imgs, length);
+  imgs.forEach((img) => {
+    const width = img.getAttribute('width');
+    const height = img.getAttribute('height');
+    const ratio = Math.floor((width / height) * 100) / 100;
+    img.style.aspectRatio = ratio;
+    img.setAttribute('loading', 'eager');
+  });
+};
+
+export function retriveDataFrom(blocks) {
   return blocks.map((block) => {
     let el = block;
     const tagName = el.tagName.toLowerCase();
     let name = tagName;
     if (!config.elementBlocks.includes(tagName)) {
       [name] = Array.from(el.classList);
     } else {
-      // allow original way of defining blocks
       el = document.createElement('div');
       block.append(el);
     }
@@ -23,7 +36,7 @@ export function getInfos(blocks) {
 function lcpPriority() {
   const eagerImages = document.querySelector('meta[name="eager"]');
   if (eagerImages) {
-    const length = parseInt(eagerImages.content, 10);
+    const length = parseInt(eagerImages.getAttribute('content'), 10);
     eagerImage(document.body, length);
   }
 
@@ -32,7 +45,11 @@ function lcpPriority() {
     return window.raqnLCP || [];
   }
   window.raqnLCP =
-    window.raqnLCP || lcp.content.split(',').map((name) => ({ name }));
+    window.raqnLCP ||
+    lcp
+      .getAttribute('content')
+      .split(',')
+      .map((name) => ({ name }));
   return window.raqnLCP;
 }
 
@@ -45,7 +62,7 @@ export async function init(node = document) {
     blocks = [header, ...blocks, footer];
   }
 
-  const data = getInfos(blocks);
+  const data = retriveDataFrom(blocks);
   const lcp = window.raqnLCP;
   const priority = data.filter(({ name }) => lcp.includes(name));
   const rest = data.filter(({ name }) => !lcp.includes(name));
@@ -54,21 +71,28 @@ export async function init(node = document) {
     return loader.decorate();
   };
 
-  // start with lcp and priority
-  await Promise.all([
+  window.addEventListener('load', () => {
+    if (!loaded) {
+      loaded = true;
+      rest.map(({ name, el }) => setTimeout(() => start({ name, el })));
+    }
+  });
+
+  Promise.all([
     ...lcp.map(({ name, el }) => start({ name, el })),
     ...priority.map(({ name, el }) => start({ name, el })),
   ]);
 
-  // timeout for the rest to proper prioritize in case of stalled loading
-  rest.map(({ name, el }) => setTimeout(() => start({ name, el })), 100);
+  if (loaded) {
+    rest.map(({ name, el }) => setTimeout(() => start({ name, el })));
+  }
 
-  // reload on breakpoint change to reset params and variables
+  // reload on breakpoint change
   window.raqnBreakpoint = getBreakPoint();
   window.addEventListener(
     'resize',
     debounce(() => {
-      // only on width / breakpoint changes
+      // only on width changes
       if (window.raqnBreakpoint !== getBreakPoint()) {
         window.location.reload();
       }