Fix issue with native lazyloading not recognized (#1316)

Co-authored-by: Maciej Brencz <[email protected]>

modules/lazyLoadableImages/scope.js

@@ -12,6 +12,7 @@
       len = images.length,
       offset,
       path,
+      native,
       processedImages = {},
       src,
       viewportHeight = window.innerHeight;
@@ -30,6 +31,9 @@
       // @see https://stackoverflow.com/questions/35586728/detect-used-srcset-or-picture-tag-source-with-javascript
       src = images[i].currentSrc;
 
+      // Chrome headless loads images with native lazyloading, therefore we need to filter by ourself.
+      native = images[i].loading === "lazy";
+
       // ignore base64-encoded images
       if (src === null || src === "" || /^data:/.test(src)) {
         continue;
@@ -42,6 +46,7 @@
         processedImages[src] = {
           offset: offset,
           path: path,
+          native: native,
         };
       }
 
@@ -50,6 +55,7 @@
         processedImages[src] = {
           offset: offset,
           path: path,
+          native: native,
         };
       }
     }
@@ -62,7 +68,7 @@
     Object.keys(processedImages).forEach((src) => {
       var img = processedImages[src];
 
-      if (img.offset > viewportHeight) {
+      if (img.offset > viewportHeight && !img.native) {
         phantomas.log(
           "lazyLoadableImages: <%s> image (%s) is below the fold (at %dpx)",
           src,

test/webroot/lazy-loadable-images.html

@@ -25,6 +25,7 @@
 	<article>
 		<h1>Issue #494</h1>
 		<img src="/static/mdn.png" width=250>
+		<img src="/static/mdn.png?nocache=1" width=25 loading="lazy">
 		Foo bar
 	</article>
 
@@ -44,5 +45,7 @@ <h1>Issue #494</h1>
 
 		<!-- pick the right source if a srcset is specified -->		
 		<img src="/static/75x50.jpg" srcset="/static/75x50.jpg 75w, /static/150x100.jpg 150w" sizes="150px" width="150" height="100"/>
+
+		<img src="/static/mdn.png?nocache=2" width=25 loading="lazy"><!-- native lazyloading - ignore -->
 	</footer>
 </body>