#414986 > improvements and lcp by metadata

hlxsites · Dec 29, 2023 · 1d6c8de · 1d6c8de
1 parent 893c745
commit 1d6c8de
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/blocks/card/card.js b/blocks/card/card.js
@@ -1,12 +1,17 @@
 import ComponentBase from '../../scripts/component-base.js';
+import { eagerImage } from '../../scripts/libs.js';
 
 export default class Card extends ComponentBase {
   static get observedAttributes() {
-    return ['columns', 'ratio'];
+    return ['columns', 'ratio', 'eager'];
   }
 
   connected() {
+    this.eager = parseInt(this.getAttribute('eager') || 0, 10);
     this.setupColumns(this.getAttribute('columns'));
+    if (this.eager) {
+      eagerImage(this, this.eager);
+    }
   }
 
   setupColumns(columns) {

diff --git a/scripts/libs.js b/scripts/libs.js
@@ -40,3 +40,10 @@ export const debounce = (func, wait, immediate) => {
     }
   };
 };
+
+export const eagerImage = (block, length = 1) => {
+  const imgs = Array.from(block.querySelectorAll('img')).slice(0, length);
+  imgs.forEach((img) => {
+    img.setAttribute('loading', 'eager');
+  });
+};