vanilla-lazyload - npm Package Compare versions

Comparing version 3.0.0 to 4.0.0

dist/lazyload.min.js

@@ -1,2 +0,2 @@
-!function(a,b){"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.LazyLoad=b()}(this,function(){function a(){r||(n={elements_selector:"img",container:window,threshold:300,throttle:50,data_src:"original",data_srcset:"original-set",class_loading:"loading",class_loaded:"loaded",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_processed:null},o=!!window.addEventListener,p=!!window.attachEvent,q=!!document.body.classList,r=!0)}function b(a,b,c){return o?void a.addEventListener(b,c):void(p&&(a.attachEvent("on"+b,function(a){return function(){c.call(a,window.event)}}(a)),a=null))}function c(a,b,c){return o?void a.removeEventListener(b,c):void(p&&a.detachEvent("on"+b,c))}function d(a,b,c){function d(){return window.innerWidth||l.documentElement.clientWidth||document.body.clientWidth}function e(){return window.innerHeight||l.documentElement.clientHeight||document.body.clientHeight}function f(a){return a.getBoundingClientRect().top+m-l.documentElement.clientTop}function g(a){return a.getBoundingClientRect().left+n-l.documentElement.clientLeft}function h(){var d;return d=b===window?e()+m:f(b)+b.offsetHeight,d<=f(a)-c}function i(){var e;return e=b===window?d()+window.pageXOffset:g(b)+d(),e<=g(a)-c}function j(){var d;return d=b===window?m:f(b),d>=f(a)+c+a.offsetHeight}function k(){var d;return d=b===window?n:g(b),d>=g(a)+c+a.offsetWidth}var l,m,n;return l=a.ownerDocument,m=window.pageYOffset||l.body.scrollTop,n=window.pageXOffset||l.body.scrollLeft,!(h()||j()||i()||k())}function e(){var a=new Date;return a.getTime()}function f(a,b){var c,d={};for(c in a)a.hasOwnProperty(c)&&(d[c]=a[c]);for(c in b)b.hasOwnProperty(c)&&(d[c]=b[c]);return d}function g(a){try{return Array.prototype.slice.call(a)}catch(b){var c,d=[],e=a.length;for(c=0;e>c;c++)d.push(a[c]);return d}}function h(a,b){return q?void a.classList.add(b):void(a.className+=(a.className?" ":"")+b)}function i(a,b){return q?void a.classList.remove(b):void(a.className=a.className.replace(new RegExp("(^|\\s+)"+b+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,""))}function j(a,b){var c=a.parentElement;if("PICTURE"===c.tagName)for(var d=0;d<c.children.length;d++){var e=c.children[d];if("SOURCE"===e.tagName){var f=e.getAttribute("data-"+b);f&&e.setAttribute("srcset",f)}}}function k(a,b,c){var d=a.tagName,e=a.getAttribute("data-"+c);if("IMG"===d){j(a,b);var f=a.getAttribute("data-"+b);return f&&a.setAttribute("srcset",f),void(e&&a.setAttribute("src",e))}return"IFRAME"===d?void(e&&a.setAttribute("src",e)):void(a.style.backgroundImage="url("+e+")")}function l(a,b){return function(){return a.apply(b,arguments)}}function m(c){a(),this._settings=f(n,c),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._handleScrollFn=l(this.handleScroll,this),b(window,"resize",this._handleScrollFn),this.update()}var n,o,p,q,r=!1;return m.prototype._showOnAppear=function(a){function d(){null!==e&&(e.callback_load&&e.callback_load(a),i(a,e.class_loading),h(a,e.class_loaded),c(a,"load",d))}var e=this._settings;("IMG"===a.tagName||"IFRAME"===a.tagName)&&(b(a,"load",d),b(a,"error",function(){c(a,"load",d),i(a,e.class_loading),e.callback_error&&e.callback_error(a)}),h(a,e.class_loading)),k(a,e.data_srcset,e.data_src),e.callback_set&&e.callback_set(a)},m.prototype._loopThroughElements=function(){var a,b,c=this._settings,e=this._elements,f=e?e.length:0,g=[];for(a=0;f>a;a++)b=e[a],c.skip_invisible&&null===b.offsetParent||d(b,c.container,c.threshold)&&(this._showOnAppear(b),g.push(a),b.wasProcessed=!0);for(;g.length>0;)e.splice(g.pop(),1),c.callback_processed&&c.callback_processed(e.length);0===f&&this._stopScrollHandler()},m.prototype._purgeElements=function(){var a,b,c=this._elements,d=c.length,e=[];for(a=0;d>a;a++)b=c[a],b.wasProcessed&&e.push(a);for(;e.length>0;)c.splice(e.pop(),1)},m.prototype._startScrollHandler=function(){this._isHandlingScroll||(this._isHandlingScroll=!0,b(this._settings.container,"scroll",this._handleScrollFn))},m.prototype._stopScrollHandler=function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,c(this._settings.container,"scroll",this._handleScrollFn))},m.prototype.handleScroll=function(){var a,b,c;this._settings&&(b=e(),c=this._settings.throttle,0!==c?(a=c-(b-this._previousLoopTime),0>=a||a>c?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=b,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(l(function(){this._previousLoopTime=e(),this._loopTimeout=null,this._loopThroughElements()},this),a))):this._loopThroughElements())},m.prototype.update=function(){this._elements=g(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},m.prototype.destroy=function(){c(window,"resize",this._handleScrollFn),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},m});
+!function(a,b){"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.LazyLoad=b()}(this,function(){function a(){k||(j={elements_selector:"img",container:window,threshold:300,throttle:50,data_src:"original",data_srcset:"original-set",class_loading:"loading",class_loaded:"loaded",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_processed:null},k=!0)}function b(a,b,c){function d(){return window.innerWidth||l.documentElement.clientWidth||document.body.clientWidth}function e(){return window.innerHeight||l.documentElement.clientHeight||document.body.clientHeight}function f(a){return a.getBoundingClientRect().top+m-l.documentElement.clientTop}function g(a){return a.getBoundingClientRect().left+n-l.documentElement.clientLeft}function h(){var d;return d=b===window?e()+m:f(b)+b.offsetHeight,d<=f(a)-c}function i(){var e;return e=b===window?d()+window.pageXOffset:g(b)+d(),e<=g(a)-c}function j(){var d;return d=b===window?m:f(b),d>=f(a)+c+a.offsetHeight}function k(){var d;return d=b===window?n:g(b),d>=g(a)+c+a.offsetWidth}var l,m,n;return l=a.ownerDocument,m=window.pageYOffset||l.body.scrollTop,n=window.pageXOffset||l.body.scrollLeft,!(h()||j()||i()||k())}function c(){var a=new Date;return a.getTime()}function d(a,b){var c,d={};for(c in a)a.hasOwnProperty(c)&&(d[c]=a[c]);for(c in b)b.hasOwnProperty(c)&&(d[c]=b[c]);return d}function e(a){try{return Array.prototype.slice.call(a)}catch(e){var b,c=[],d=a.length;for(b=0;b<d;b++)c.push(a[b]);return c}}function f(a,b){var c=a.parentElement;if("PICTURE"===c.tagName)for(var d=0;d<c.children.length;d++){var e=c.children[d];if("SOURCE"===e.tagName){var f=e.getAttribute("data-"+b);f&&e.setAttribute("srcset",f)}}}function g(a,b,c){var d=a.tagName,e=a.getAttribute("data-"+c);if("IMG"===d){f(a,b);var g=a.getAttribute("data-"+b);return g&&a.setAttribute("srcset",g),void(e&&a.setAttribute("src",e))}return"IFRAME"===d?void(e&&a.setAttribute("src",e)):void(a.style.backgroundImage="url("+e+")")}function h(a,b){return function(){return a.apply(b,arguments)}}function i(b){a(),this._settings=d(j,b),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._handleScrollFn=h(this.handleScroll,this),window.addEventListener("resize",this._handleScrollFn),this.update()}var j,k=!1;return i.prototype._showOnAppear=function(a){function b(){a.removeEventListener("load",c),a.classList.remove(d.class_loading),d.callback_error&&d.callback_error(a)}function c(){null!==d&&(d.callback_load&&d.callback_load(a),a.classList.remove(d.class_loading),a.classList.add(d.class_loaded),a.removeEventListener("load",c),a.removeEventListener("error",b))}var d=this._settings;"IMG"!==a.tagName&&"IFRAME"!==a.tagName||(a.addEventListener("load",c),a.addEventListener("error",b),a.classList.add(d.class_loading)),g(a,d.data_srcset,d.data_src),d.callback_set&&d.callback_set(a)},i.prototype._loopThroughElements=function(){var a,c,d=this._settings,e=this._elements,f=e?e.length:0,g=[];for(a=0;a<f;a++)c=e[a],d.skip_invisible&&null===c.offsetParent||b(c,d.container,d.threshold)&&(this._showOnAppear(c),g.push(a),c.wasProcessed=!0);for(;g.length>0;)e.splice(g.pop(),1),d.callback_processed&&d.callback_processed(e.length);0===f&&this._stopScrollHandler()},i.prototype._purgeElements=function(){var a,b,c=this._elements,d=c.length,e=[];for(a=0;a<d;a++)b=c[a],b.wasProcessed&&e.push(a);for(;e.length>0;)c.splice(e.pop(),1)},i.prototype._startScrollHandler=function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._handleScrollFn))},i.prototype._stopScrollHandler=function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._handleScrollFn))},i.prototype.handleScroll=function(){var a,b,d;this._settings&&(b=c(),d=this._settings.throttle,0!==d?(a=d-(b-this._previousLoopTime),a<=0||a>d?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=b,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(h(function(){this._previousLoopTime=c(),this._loopTimeout=null,this._loopThroughElements()},this),a))):this._loopThroughElements())},i.prototype.update=function(){this._elements=e(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},i.prototype.destroy=function(){window.removeEventListener("resize",this._handleScrollFn),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},i});
 //# sourceMappingURL=lazyload.min.js.map

package.json

 {
     "name": "vanilla-lazyload",
-    "version": "3.0.0",
+    "version": "4.0.0",
     "description": "A fast, lightweight script to load images as they enter the viewport. Supporting responsive images (both srcset + sizes and picture).",
@@ -5,0 +5,0 @@ "main": "dist/lazyload.min.js",

src/lazyload.js

@@ -12,8 +12,4 @@ (function(root, factory) {
     var _defaultSettings,
-        _supportsAddEventListener,
-        _supportsAttachEvent,
-        _supportsClassList,
         _isInitialized = false;
 
-
     /*
@@ -41,5 +37,2 @@ * PRIVATE FUNCTIONS *NOT RELATED* TO A SPECIFIC INSTANCE OF LAZY LOAD
             };
-            _supportsAddEventListener = !!window.addEventListener;
-            _supportsAttachEvent = !!window.attachEvent;
-            _supportsClassList = !!document.body.classList;
 
@@ -50,32 +43,2 @@ _isInitialized = true;
 
-    function _addEventListener(element, eventName, callback) {
-        // Use addEventListener if available
-        if (_supportsAddEventListener) {
-            element.addEventListener(eventName, callback);
-            return;
-        }
-        // Otherwise use attachEvent, set this and event
-        if (_supportsAttachEvent) {
-            element.attachEvent('on' + eventName, (function(el) {
-                return function() {
-                    callback.call(el, window.event);
-                };
-            }(element)));
-            // Break closure and primary circular reference to element
-            element = null;
-        }
-    }
-
-    function _removeEventListener(element, eventName, callback) {
-        // Use removeEventListener if available
-        if (_supportsAddEventListener) {
-            element.removeEventListener(eventName, callback);
-            return;
-        }
-        // Otherwise use detachEvent
-        if (_supportsAttachEvent) {
-            element.detachEvent('on' + eventName, callback);
-        }
-    }
-
     function _isInsideViewport(element, container, threshold) {
@@ -183,22 +146,2 @@
 
-    function _addClass(element, className) {
-        /* HTML 5 compliant browsers. */
-        if (_supportsClassList) {
-            element.classList.add(className);
-            return;
-        }
-        /* Legacy browsers (IE<10) support. */
-        element.className += (element.className ? ' ' : '') + className;
-    }
-
-    function _removeClass(element, className) {
-        /* HTML 5 compliant browsers. */
-        if (_supportsClassList) {
-            element.classList.remove(className);
-            return;
-        }
-        /* Legacy browsers (IE<10) support. */
-        element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ').replace(/^\s+/, '').replace(/\s+$/, '');
-    }
-
     function _setSourcesForPicture(element, srcsetDataAttribute) {
@@ -260,3 +203,3 @@ var parent = element.parentElement;
 
-        _addEventListener(window, "resize", this._handleScrollFn);
+        window.addEventListener("resize", this._handleScrollFn);
         this.update();
@@ -274,2 +217,9 @@ }
 
+        function errorCallback() {
+            element.removeEventListener("load", loadCallback);
+            element.classList.remove(settings.class_loading);
+            if (settings.callback_error) {
+                settings.callback_error(element);
+            }
+        }
         function loadCallback() {
@@ -284,17 +234,12 @@ /* As this method is asynchronous, it must be protected against external destroy() calls */
             }
-            _removeClass(element, settings.class_loading);
-            _addClass(element, settings.class_loaded);
-            _removeEventListener(element, "load", loadCallback);
+            element.classList.remove(settings.class_loading);
+            element.classList.add(settings.class_loaded);
+            element.removeEventListener("load", loadCallback);
+            element.removeEventListener("error", errorCallback);
         }
 
         if (element.tagName === "IMG" || element.tagName === "IFRAME") {
-            _addEventListener(element, "load", loadCallback);
-            _addEventListener(element, "error", function () {
-                _removeEventListener(element, "load", loadCallback);
-                _removeClass(element, settings.class_loading);
-                if (settings.callback_error) {
-                    settings.callback_error(element);
-                }
-            });
-            _addClass(element, settings.class_loading);
+            element.addEventListener("load", loadCallback);
+            element.addEventListener("error", errorCallback);
+            element.classList.add(settings.class_loading);
         }
@@ -366,3 +311,3 @@
             this._isHandlingScroll = true;
-            _addEventListener(this._settings.container, "scroll", this._handleScrollFn);
+            this._settings.container.addEventListener("scroll", this._handleScrollFn);
         }
@@ -374,3 +319,3 @@ };
             this._isHandlingScroll = false;
-            _removeEventListener(this._settings.container, "scroll", this._handleScrollFn);
+            this._settings.container.removeEventListener("scroll", this._handleScrollFn);
         }
@@ -427,3 +372,3 @@ };
     LazyLoad.prototype.destroy = function() {
-        _removeEventListener(window, "resize", this._handleScrollFn);
+        window.removeEventListener("resize", this._handleScrollFn);
         if (this._loopTimeout) {
@@ -430,0 +375,0 @@ clearTimeout(this._loopTimeout);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

806518

increased by1.81%

Number of package files

111

increased by0.91%

Worsened metrics

Lines of code

441

decreased by-10.37%

No dependency changes