Merge pull request #317 from parameter1/revert-316-browser-lazyloading

Revert "Use native browser lazyloading"
parameter1 · Jun 1, 2022 · 4fd145c · 4fd145c
2 parents 41865da + be87651
commit 4fd145c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/packages/marko-web-theme-default/components/site-navbar/logo.marko b/packages/marko-web-theme-default/components/site-navbar/logo.marko
@@ -2,12 +2,11 @@ $ const blockName = input.blockName || "site-navbar";
 $ const elementName = input.name || "logo";
 $ const classNames = [`${blockName}__${elementName}`, input.class];
 $ const lazyload = input.lazyload != null ? input.lazyload : false;
-$ const loading = (lazyload) ? "lazy" : null;
+$ if (lazyload) classNames.push("lazyload");
 
 <img
   class=classNames
   alt=input.alt
   src=input.src
   srcset=input.srcset
-  loading=loading
 >
diff --git a/packages/marko-web/components/element/components/image.marko b/packages/marko-web/components/element/components/image.marko
@@ -6,13 +6,25 @@ $ const lazyload = config.lazyloadImages() && input.lazyload !== false
 $ const srcset = getAsArray(input.srcset).join(",") || null;
 
 $ const classNames = [input.class];
-$ const loading = (lazyload) ? "lazy" : null;
+$ if (lazyload) classNames.push("lazyload");
 
-<img
-  ...input.attrs
-  src=src
-  srcset=srcset
-  class=classNames
-  alt=alt
-  loading=loading
-/>
+<if(lazyload)>
+  <img
+    ...input.attrs
+    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+    srcset=null
+    data-src=src
+    data-srcset=srcset
+    class=classNames
+    alt=alt
+  />
+</if>
+<else>
+  <img
+    ...input.attrs
+    src=src
+    srcset=srcset
+    class=classNames
+    alt=alt
+  />
+</else>
diff --git a/packages/marko-web/utils/embedded-media/image.js b/packages/marko-web/utils/embedded-media/image.js
@@ -18,10 +18,11 @@ module.exports = (tag, { config } = {}, { lazyloadImages } = {}) => {
   };
 
   const imgAttrs = {
-    src,
+    class: lazyload ? 'lazyload' : null,
+    src: lazyload ? 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' : src,
+    'data-src': lazyload ? src : null,
     'data-image-id': tag.id,
     alt,
-    loading: lazyload ? 'lazy' : null,
   };
   const captionElement = caption ? `<span class="caption">${caption}</span>` : '';
   const creditElement = credit ? `<span class="credit">${credit}</span>` : '';