From 5057452b016834d7ce253cf7f59727d06a38e574 Mon Sep 17 00:00:00 2001
From: Ivo Petkov <ivo@ivopetkov.com>
Date: Tue, 18 Apr 2017 22:05:37 +0300
Subject: [PATCH] Additional image visibility check for browsers that support
 IntersectionObserver.

---
 responsivelyLazy.js     | 104 +++++++++++++++++++---------------------
 responsivelyLazy.min.js |  15 +++---
 2 files changed, 55 insertions(+), 64 deletions(-)

diff --git a/responsivelyLazy.js b/responsivelyLazy.js
index ea8f0a9..52b1b41 100644
--- a/responsivelyLazy.js
+++ b/responsivelyLazy.js
@@ -151,6 +151,22 @@ var responsivelyLazy = (function () {
         image.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEADMDOJaQAA3AA/uuuAAA=';
         image.onload = image.onerror = function () {
             hasWebPSupport = image.width === 2;
+
+            var requestAnimationFrameFunction = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
+                window.setTimeout(callback, 1000 / 60);
+            };
+
+            var hasChange = true;
+            var runIfHasChange = function () {
+                if (hasChange) {
+                    hasChange = false;
+                    run();
+                }
+                requestAnimationFrameFunction.call(null, runIfHasChange);
+            };
+
+            runIfHasChange();
+
             if (hasIntersectionObserverSupport) {
 
                 var updateIntersectionObservers = function () {
@@ -182,86 +198,62 @@ var responsivelyLazy = (function () {
                     }
                 });
 
-                run();
-
-            } else {
-
-                var requestAnimationFrameFunction = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
-                    window.setTimeout(callback, 1000 / 60);
-                };
+                var changeTimeout = null;
 
-                var hasChange = true;
-                var runIfHasChange = function () {
-                    if (hasChange) {
-                        hasChange = false;
-                        run();
-                    }
-                    requestAnimationFrameFunction.call(null, runIfHasChange);
-                };
+            }
 
-                var setChanged = function () {
+            var setChanged = function () {
+                if (hasIntersectionObserverSupport) {
+                    window.clearTimeout(changeTimeout);
+                    changeTimeout = window.setTimeout(function () {
+                        hasChange = true;
+                    }, 300);
+                } else {
                     hasChange = true;
-                };
+                }
+            };
 
-                var updateParentNodesScrollListeners = function () {
-                    var elements = document.querySelectorAll('.responsively-lazy');
-                    var elementsCount = elements.length;
-                    for (var i = 0; i < elementsCount; i++) {
-                        var parentNode = elements[i].parentNode;
-                        while (parentNode && parentNode.tagName.toLowerCase() !== 'html') {
-                            if (typeof parentNode.responsivelyLazyScrollAttached === 'undefined') {
-                                parentNode.responsivelyLazyScrollAttached = true;
-                                parentNode.addEventListener('scroll', setChanged);
-                            }
-                            parentNode = parentNode.parentNode;
+            var updateParentNodesScrollListeners = function () {
+                var elements = document.querySelectorAll('.responsively-lazy');
+                var elementsCount = elements.length;
+                for (var i = 0; i < elementsCount; i++) {
+                    var parentNode = elements[i].parentNode;
+                    while (parentNode && parentNode.tagName.toLowerCase() !== 'html') {
+                        if (typeof parentNode.responsivelyLazyScrollAttached === 'undefined') {
+                            parentNode.responsivelyLazyScrollAttached = true;
+                            parentNode.addEventListener('scroll', setChanged);
                         }
+                        parentNode = parentNode.parentNode;
                     }
-                };
-
-                runIfHasChange();
-
-            }
-
-            var attachEvents = function () {
-                if (hasIntersectionObserverSupport) {
-                    var resizeTimeout = null;
                 }
+            };
+
+            var initialize = function () {
                 window.addEventListener('resize', function () {
                     updateWindowSize();
-                    if (hasIntersectionObserverSupport) {
-                        window.clearTimeout(resizeTimeout);
-                        resizeTimeout = window.setTimeout(function () {
-                            run();
-                        }, 300);
-                    } else {
-                        setChanged();
-                    }
+                    setChanged();
                 });
+                window.addEventListener('scroll', setChanged);
+                window.addEventListener('load', setChanged);
                 if (hasIntersectionObserverSupport) {
-                    window.addEventListener('load', run);
                     updateIntersectionObservers();
-                } else {
-                    window.addEventListener('scroll', setChanged);
-                    window.addEventListener('load', setChanged);
-                    updateParentNodesScrollListeners();
                 }
+                updateParentNodesScrollListeners();
                 if (typeof MutationObserver !== 'undefined') {
                     var observer = new MutationObserver(function () {
                         if (hasIntersectionObserverSupport) {
                             updateIntersectionObservers();
-                            run();
-                        } else {
-                            updateParentNodesScrollListeners();
-                            setChanged();
                         }
+                        updateParentNodesScrollListeners();
+                        setChanged();
                     });
                     observer.observe(document.querySelector('body'), {childList: true, subtree: true});
                 }
             };
             if (document.readyState === 'loading') {
-                document.addEventListener('DOMContentLoaded', attachEvents);
+                document.addEventListener('DOMContentLoaded', initialize);
             } else {
-                attachEvents();
+                initialize();
             }
         };
     }
diff --git a/responsivelyLazy.min.js b/responsivelyLazy.min.js
index a176454..845d5ef 100644
--- a/responsivelyLazy.min.js
+++ b/responsivelyLazy.min.js
@@ -4,11 +4,10 @@
  * Copyright 2015-2017, Ivo Petkov
  * Free to use under the MIT license.
 */
-var responsivelyLazy=function(){var t=!1,n=null,q=null,m="undefined"!==typeof IntersectionObserver,u=function(a){if(null===n)return!1;var d=a.getBoundingClientRect();a=d.top;var b=d.left,g=d.width,d=d.height;return a<q&&0<a+d&&b<n&&0<b+g},r=function(a,d){var b=d.getAttribute("data-srcset");if(null!==b)if(b=b.trim(),0<b.length){for(var b=b.split(","),g=[],k=b.length,f=0;f<k;f++){var c=b[f].trim();if(0!==c.length){var h=c.lastIndexOf(" ");if(-1===h)var e=c,c=999998;else e=c.substr(0,h),c=parseInt(c.substr(h+
-1,c.length-h-2),10);h=!1;-1!==e.indexOf(".webp",e.length-5)?t&&(h=!0):h=!0;h&&g.push([e,c])}}g.sort(function(e,b){if(e[1]<b[1])return-1;if(e[1]>b[1])return 1;if(e[1]===b[1]){if(-1!==b[0].indexOf(".webp",b[0].length-5))return 1;if(-1!==e[0].indexOf(".webp",e[0].length-5))return-1}return 0});b=g}else b=[];else b=[];g=a.offsetWidth*window.devicePixelRatio;e=null;k=b.length;for(f=0;f<k;f++)if(c=b[f],c[1]>=g){e=c;break}null===e&&(e=[d.getAttribute("src"),999999]);"undefined"===typeof a.responsivelyLazyLastSetOption&&
-(a.responsivelyLazyLastSetOption=["",0]);a.responsivelyLazyLastSetOption[1]<e[1]&&(a.responsivelyLazyLastSetOption=e,b=e[0],"undefined"===typeof a.responsivelyLazyEventsAttached&&(a.responsivelyLazyEventsAttached=!0,d.addEventListener("load",function(){var e=a.getAttribute("data-onlazyload");null!==e&&(new Function(e)).bind(a)()},!1),d.addEventListener("error",function(){a.responsivelyLazyLastSetOption=["",0]},!1)),b===d.getAttribute("src")?d.removeAttribute("srcset"):d.setAttribute("srcset",b))},
-l=function(){var a=function(a,b){for(var d=a.length,k=0;k<d;k++){var f=a[k],c=b?f:f.parentNode;u(c)&&r(c,f)}};a(document.querySelectorAll(".responsively-lazy > img"),!1);a(document.querySelectorAll("img.responsively-lazy"),!0)};if("srcset"in document.createElement("img")&&"undefined"!==typeof window.devicePixelRatio&&"undefined"!==typeof window.addEventListener&&"undefined"!==typeof document.querySelectorAll){var n=window.innerWidth,q=window.innerHeight,p=new Image;p.src="data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEADMDOJaQAA3AA/uuuAAA=";
-p.onload=p.onerror=function(){t=2===p.width;if(m){var a=function(){for(var e=document.querySelectorAll(".responsively-lazy"),b=e.length,a=0;a<b;a++){var c=e[a];"undefined"===typeof c.responsivelyLazyObserverAttached&&(c.responsivelyLazyObserverAttached=!0,d.observe(c))}},d=new IntersectionObserver(function(e){for(var b in e){var a=e[b];if(0<a.intersectionRatio)if(a=a.target,"img"!==a.tagName.toLowerCase()){var c=a.querySelector("img");null!==c&&r(a,c)}else r(a,a)}});l()}else{var b=window.requestAnimationFrame||
-window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)},g=!0,k=function(){g&&(g=!1,l());b.call(null,k)},f=function(){g=!0},c=function(){for(var a=document.querySelectorAll(".responsively-lazy"),b=a.length,c=0;c<b;c++)for(var d=a[c].parentNode;d&&"html"!==d.tagName.toLowerCase();)"undefined"===typeof d.responsivelyLazyScrollAttached&&(d.responsivelyLazyScrollAttached=!0,d.addEventListener("scroll",f)),d=d.parentNode};k()}var h=function(){if(m)var b=
-null;window.addEventListener("resize",function(){n=window.innerWidth;q=window.innerHeight;m?(window.clearTimeout(b),b=window.setTimeout(function(){l()},300)):g=!0});m?(window.addEventListener("load",l),a()):(window.addEventListener("scroll",f),window.addEventListener("load",f),c());"undefined"!==typeof MutationObserver&&(new MutationObserver(function(){m?(a(),l()):(c(),g=!0)})).observe(document.querySelector("body"),{childList:!0,subtree:!0})};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",
-h):h()}}return{run:l,isVisible:u}}();
\ No newline at end of file
+var responsivelyLazy=function(){var r=!1,l=null,p=null,m="undefined"!==typeof IntersectionObserver,t=function(b){if(null===l)return!1;var c=b.getBoundingClientRect();b=c.top;var a=c.left,h=c.width,c=c.height;return b<p&&0<b+c&&a<l&&0<a+h},q=function(b,c){var a=c.getAttribute("data-srcset");if(null!==a)if(a=a.trim(),0<a.length){for(var a=a.split(","),h=[],k=a.length,e=0;e<k;e++){var d=a[e].trim();if(0!==d.length){var g=d.lastIndexOf(" ");if(-1===g)var f=d,d=999998;else f=d.substr(0,g),d=parseInt(d.substr(g+
+1,d.length-g-2),10);g=!1;-1!==f.indexOf(".webp",f.length-5)?r&&(g=!0):g=!0;g&&h.push([f,d])}}h.sort(function(a,c){if(a[1]<c[1])return-1;if(a[1]>c[1])return 1;if(a[1]===c[1]){if(-1!==c[0].indexOf(".webp",c[0].length-5))return 1;if(-1!==a[0].indexOf(".webp",a[0].length-5))return-1}return 0});a=h}else a=[];else a=[];h=b.offsetWidth*window.devicePixelRatio;f=null;k=a.length;for(e=0;e<k;e++)if(d=a[e],d[1]>=h){f=d;break}null===f&&(f=[c.getAttribute("src"),999999]);"undefined"===typeof b.responsivelyLazyLastSetOption&&
+(b.responsivelyLazyLastSetOption=["",0]);b.responsivelyLazyLastSetOption[1]<f[1]&&(b.responsivelyLazyLastSetOption=f,a=f[0],"undefined"===typeof b.responsivelyLazyEventsAttached&&(b.responsivelyLazyEventsAttached=!0,c.addEventListener("load",function(){var a=b.getAttribute("data-onlazyload");null!==a&&(new Function(a)).bind(b)()},!1),c.addEventListener("error",function(){b.responsivelyLazyLastSetOption=["",0]},!1)),a===c.getAttribute("src")?c.removeAttribute("srcset"):c.setAttribute("srcset",a))},
+u=function(){var b=function(c,a){for(var b=c.length,k=0;k<b;k++){var e=c[k],d=a?e:e.parentNode;t(d)&&q(d,e)}};b(document.querySelectorAll(".responsively-lazy > img"),!1);b(document.querySelectorAll("img.responsively-lazy"),!0)};if("srcset"in document.createElement("img")&&"undefined"!==typeof window.devicePixelRatio&&"undefined"!==typeof window.addEventListener&&"undefined"!==typeof document.querySelectorAll){var l=window.innerWidth,p=window.innerHeight,n=new Image;n.src="data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEADMDOJaQAA3AA/uuuAAA=";
+n.onload=n.onerror=function(){r=2===n.width;var b=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)},c=!0,a=function(){c&&(c=!1,u());b.call(null,a)};a();if(m)var h=function(){for(var a=document.querySelectorAll(".responsively-lazy"),c=a.length,b=0;b<c;b++){var d=a[b];"undefined"===typeof d.responsivelyLazyObserverAttached&&(d.responsivelyLazyObserverAttached=!0,k.observe(d))}},k=new IntersectionObserver(function(a){for(var c in a){var b=
+a[c];if(0<b.intersectionRatio)if(b=b.target,"img"!==b.tagName.toLowerCase()){var d=b.querySelector("img");null!==d&&q(b,d)}else q(b,b)}}),e=null;var d=function(){m?(window.clearTimeout(e),e=window.setTimeout(function(){c=!0},300)):c=!0},g=function(){for(var a=document.querySelectorAll(".responsively-lazy"),b=a.length,c=0;c<b;c++)for(var e=a[c].parentNode;e&&"html"!==e.tagName.toLowerCase();)"undefined"===typeof e.responsivelyLazyScrollAttached&&(e.responsivelyLazyScrollAttached=!0,e.addEventListener("scroll",
+d)),e=e.parentNode},f=function(){window.addEventListener("resize",function(){l=window.innerWidth;p=window.innerHeight;d()});window.addEventListener("scroll",d);window.addEventListener("load",d);m&&h();g();"undefined"!==typeof MutationObserver&&(new MutationObserver(function(){m&&h();g();d()})).observe(document.querySelector("body"),{childList:!0,subtree:!0})};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",f):f()}}return{run:u,isVisible:t}}();
\ No newline at end of file