Additional image visibility check for browsers that support Intersect…

…ionObserver.
ivopetkov · Apr 18, 2017 · 5057452 · 5057452
1 parent 7a687fc
commit 5057452
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 64 deletions.
diff --git 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