diff --git a/modules/lazyLoadableImages/scope.js b/modules/lazyLoadableImages/scope.js index 5ff914cd8..c87e15517 100644 --- a/modules/lazyLoadableImages/scope.js +++ b/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, diff --git a/test/webroot/lazy-loadable-images.html b/test/webroot/lazy-loadable-images.html index 073381c2c..e8acea639 100644 --- a/test/webroot/lazy-loadable-images.html +++ b/test/webroot/lazy-loadable-images.html @@ -25,6 +25,7 @@

Issue #494

+ Foo bar
@@ -44,5 +45,7 @@

Issue #494

+ +