New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
vanilla-lazyload
Advanced tools
vanilla-lazyload - npm Package Compare versions
Comparing version 1.5.7 to 1.5.9
@@ -11,21 +11,7 @@ (function (root, factory) { | ||
| var _defaultSettings = { | ||
| elements_selector: "img", | ||
| container: window, | ||
| threshold: 300, | ||
| throttle: 50, | ||
| data_src: "original", | ||
| data_srcset: "original-set", | ||
| class_loading: "loading", | ||
| class_loaded: "loaded", | ||
| skip_invisible: true, | ||
| show_while_loading: false, | ||
| callback_load: null, | ||
| callback_set: null, | ||
| callback_processed: null, | ||
| placeholder: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" | ||
| }, | ||
| _supportsAddEventListener = !!window.addEventListener, | ||
| _supportsAttachEvent = !!window.attachEvent, | ||
| _supportsClassList = !!document.body.classList; | ||
| var _defaultSettings, | ||
| _supportsAddEventListener, | ||
| _supportsAttachEvent, | ||
| _supportsClassList, | ||
| _isInitialized = false; | ||
@@ -38,2 +24,28 @@ | ||
| function _init() { | ||
| if(!_isInitialized) { | ||
| _defaultSettings = { | ||
| elements_selector: "img", | ||
| container: window, | ||
| threshold: 300, | ||
| throttle: 50, | ||
| data_src: "original", | ||
| data_srcset: "original-set", | ||
| class_loading: "loading", | ||
| class_loaded: "loaded", | ||
| skip_invisible: true, | ||
| show_while_loading: false, | ||
| callback_load: null, | ||
| callback_set: null, | ||
| callback_processed: null, | ||
| placeholder: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" | ||
| }; | ||
| _supportsAddEventListener = !!window.addEventListener; | ||
| _supportsAttachEvent = !!window.attachEvent; | ||
| _supportsClassList = !!document.body.classList; | ||
| _isInitialized = true; | ||
| } | ||
| } | ||
| function _addEventListener(element, eventName, callback) { | ||
@@ -215,2 +227,3 @@ // Use addEventListener if available | ||
| function LazyLoad(instanceSettings) { | ||
| _init(); | ||
@@ -433,2 +446,2 @@ this._settings = _merge_objects(_defaultSettings, instanceSettings); | ||
| })); | ||
| })); |
@@ -1,3 +0,3 @@ | ||
| /*! lazyload 1.5.5 by Andrea "verlok" Verlicchi*/ | ||
| !function(a,b){"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.LazyLoad=b()}(this,function(){function a(a,b,c){return m?void a.addEventListener(b,c):void(n&&(a.attachEvent("on"+b,function(a){return function(){c.call(a,window.event)}}(a)),a=null))}function b(a,b,c){return m?void a.removeEventListener(b,c):void(n&&a.detachEvent("on"+b,c))}function c(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 d(){var a=new Date;return a.getTime()}function e(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 f(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 g(a,b){return o?void a.classList.add(b):void(a.className+=(a.className?" ":"")+b)}function h(a,b){return o?void a.classList.remove(b):void(a.className=a.className.replace(new RegExp("(^|\\s+)"+b+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,""))}function i(a,b,c,d){var e=b.getAttribute("data-"+c),f=b.getAttribute("data-"+d);e&&a.setAttribute("srcset",e),f&&a.setAttribute("src",f)}function j(a,b){return function(){return a.apply(b,arguments)}}function k(b){this._settings=e(l,b),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._handleScrollFn=j(this.handleScroll,this),a(window,"resize",this._handleScrollFn),this.update()}var l={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,show_while_loading:!1,callback_load:null,callback_set:null,callback_processed:null,placeholder:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"},m=!!window.addEventListener,n=!!window.attachEvent,o=!!document.body.classList;return k.prototype._showOnLoad=function(c){function d(){null!==f&&(f.callback_load&&f.callback_load(c),i(c,c,f.data_srcset,f.data_src),f.callback_set&&f.callback_set(c),h(c,f.class_loading),g(c,f.class_loaded),b(e,"load",d))}var e,f=this._settings;c.getAttribute("src")||c.setAttribute("src",f.placeholder),e=document.createElement("img"),a(e,"load",d),g(c,f.class_loading),i(e,c,f.data_srcset,f.data_src)},k.prototype._showOnAppear=function(c){function d(){null!==e&&(e.callback_load&&e.callback_load(c),h(c,e.class_loading),g(c,e.class_loaded),b(c,"load",d))}var e=this._settings;a(c,"load",d),g(c,e.class_loading),i(c,c,e.data_srcset,e.data_src),e.callback_set&&e.callback_set(c)},k.prototype._loopThroughElements=function(){var a,b,d=this._settings,e=this._elements,f=e?e.length:0,g=[];for(a=0;f>a;a++)b=e[a],d.skip_invisible&&null===b.offsetParent||c(b,d.container,d.threshold)&&(d.show_while_loading?this._showOnAppear(b):this._showOnLoad(b),g.push(a),b.wasProcessed=!0);for(;g.length>0;)e.splice(g.pop(),1),d.callback_processed&&d.callback_processed(e.length);0===f&&this._stopScrollHandler()},k.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)},k.prototype._startScrollHandler=function(){this._isHandlingScroll||(this._isHandlingScroll=!0,a(this._settings.container,"scroll",this._handleScrollFn))},k.prototype._stopScrollHandler=function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,b(this._settings.container,"scroll",this._handleScrollFn))},k.prototype.handleScroll=function(){var a,b,c;this._settings&&(b=d(),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(j(function(){this._previousLoopTime=d(),this._loopTimeout=null,this._loopThroughElements()},this),a))):this._loopThroughElements())},k.prototype.update=function(){this._elements=f(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},k.prototype.destroy=function(){b(window,"resize",this._handleScrollFn),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},k}); | ||
| //# sourceMappingURL=lazyload.min.js.map | ||
| /*! lazyload 1.5.9 by Andrea "verlok" Verlicchi*/ | ||
| !function(a,b){"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.LazyLoad=b()}(this,function(){function a(){q||(m={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,show_while_loading:!1,callback_load:null,callback_set:null,callback_processed:null,placeholder:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"},n=!!window.addEventListener,o=!!window.attachEvent,p=!!document.body.classList,q=!0)}function b(a,b,c){return n?void a.addEventListener(b,c):void(o&&(a.attachEvent("on"+b,function(a){return function(){c.call(a,window.event)}}(a)),a=null))}function c(a,b,c){return n?void a.removeEventListener(b,c):void(o&&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 p?void a.classList.add(b):void(a.className+=(a.className?" ":"")+b)}function i(a,b){return p?void a.classList.remove(b):void(a.className=a.className.replace(new RegExp("(^|\\s+)"+b+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,""))}function j(a,b,c,d){var e=b.getAttribute("data-"+c),f=b.getAttribute("data-"+d);e&&a.setAttribute("srcset",e),f&&a.setAttribute("src",f)}function k(a,b){return function(){return a.apply(b,arguments)}}function l(c){a(),this._settings=f(m,c),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._handleScrollFn=k(this.handleScroll,this),b(window,"resize",this._handleScrollFn),this.update()}var m,n,o,p,q=!1;return l.prototype._showOnLoad=function(a){function d(){null!==f&&(f.callback_load&&f.callback_load(a),j(a,a,f.data_srcset,f.data_src),f.callback_set&&f.callback_set(a),i(a,f.class_loading),h(a,f.class_loaded),c(e,"load",d))}var e,f=this._settings;a.getAttribute("src")||a.setAttribute("src",f.placeholder),e=document.createElement("img"),b(e,"load",d),h(a,f.class_loading),j(e,a,f.data_srcset,f.data_src)},l.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;b(a,"load",d),h(a,e.class_loading),j(a,a,e.data_srcset,e.data_src),e.callback_set&&e.callback_set(a)},l.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)&&(c.show_while_loading?this._showOnAppear(b):this._showOnLoad(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()},l.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)},l.prototype._startScrollHandler=function(){this._isHandlingScroll||(this._isHandlingScroll=!0,b(this._settings.container,"scroll",this._handleScrollFn))},l.prototype._stopScrollHandler=function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,c(this._settings.container,"scroll",this._handleScrollFn))},l.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(k(function(){this._previousLoopTime=e(),this._loopTimeout=null,this._loopThroughElements()},this),a))):this._loopThroughElements())},l.prototype.update=function(){this._elements=g(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},l.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},l}); | ||
| //# sourceMappingURL=lazyload.min.js.map |
| { | ||
| "name": "vanilla-lazyload", | ||
| "version": "1.5.7", | ||
| "version": "1.5.9", | ||
| "description": "LazyLoad is a fast, lightweight and flexible script for loading images only when they're about to enter the viewport of a scrollable area, with an excellent support to the progressive JPEG image format.", | ||
| "main": "index.html", | ||
| "main": "dist/lazyload.js", | ||
| "devDependencies": { | ||
| "grunt": "~0.4.5", | ||
| "grunt-contrib-concat": "^1.0.1", | ||
| "grunt-contrib-jshint": "~0.10.0", | ||
@@ -9,0 +10,0 @@ "grunt-contrib-uglify": "~0.6.0", |
@@ -5,3 +5,3 @@ # LazyLoad | ||
| [WEBSITE](http://verlok.github.io/lazyload/) | [DEMOS](#user-content-demos) | [GITHUB](https://github.com/verlok/lazyload) | ||
| [WEBSITE](http://verlok.github.io/lazyload/) | [DEMOS](#user-content-demos) | [GITHUB](https://github.com/verlok/lazyload) | ||
@@ -36,10 +36,10 @@ ## Difference with jQuery\_lazyload | ||
| ```html | ||
| <img data-original="/your/image1.jpg" | ||
| data-original-set="/your/image1.jpg 1x, /your/image1@2x.jpg 2x" | ||
| <img data-original="/your/image1.jpg" | ||
| data-original-set="/your/image1.jpg 1x, /your/image1@2x.jpg 2x" | ||
| width="100" height="172"> | ||
| <img data-original="/your/image2.jpg" | ||
| data-original-set="/your/image2.jpg 1x, /your/image2@2x.jpg 2x" | ||
| <img data-original="/your/image2.jpg" | ||
| data-original-set="/your/image2.jpg 1x, /your/image2@2x.jpg 2x" | ||
| width="100" height="172"> | ||
| <img data-original="/your/image3.jpg" | ||
| data-original-set="/your/image3.jpg 1x, /your/image3@2x.jpg 2x" | ||
| <img data-original="/your/image3.jpg" | ||
| data-original-set="/your/image3.jpg 1x, /your/image3@2x.jpg 2x" | ||
| width="100" height="172"> | ||
@@ -51,10 +51,10 @@ ``` | ||
| ```html | ||
| <img data-original="/your/image1.jpg" | ||
| data-original-set="/your/image1.jpg 200w, /your/image1@2x.jpg 400w" | ||
| <img data-original="/your/image1.jpg" | ||
| data-original-set="/your/image1.jpg 200w, /your/image1@2x.jpg 400w" | ||
| sizes="(min-width: 20em) 35vw, 100vw"> | ||
| <img data-original="/your/image2.jpg" | ||
| data-original-set="/your/image2.jpg 200x, /your/image2@2x.jpg 400w" | ||
| <img data-original="/your/image2.jpg" | ||
| data-original-set="/your/image2.jpg 200x, /your/image2@2x.jpg 400w" | ||
| sizes="(min-width: 20em) 35vw, 100vw"> | ||
| <img data-original="/your/image3.jpg" | ||
| data-original-set="/your/image3.jpg 200w, /your/image3@2x.jpg 400w" | ||
| <img data-original="/your/image3.jpg" | ||
| data-original-set="/your/image3.jpg 200w, /your/image3@2x.jpg 400w" | ||
| sizes="(min-width: 20em) 35vw, 100vw"> | ||
@@ -109,4 +109,4 @@ ``` | ||
| ```css | ||
| /* Sets a min-height to all images | ||
| so that they occupy some space | ||
| /* Sets a min-height to all images | ||
| so that they occupy some space | ||
| before they are loaded */ | ||
@@ -141,3 +141,3 @@ img { | ||
| (*) if you won't do so, a lot of images would enter the viewport as the user scrolls down, so you would lose the advantages that LazyLoad would bring to your website. | ||
| (*) if you won't do so, a lot of images would enter the viewport as the user scrolls down, so you would lose the advantages that LazyLoad would bring to your website. | ||
@@ -150,3 +150,3 @@ ## Options | ||
| | Name | Meaning | Default value | | ||
| | ---- | ----| ---- | | ||
| | ---- | ----| ---- | | ||
| | `container` | The container in which to start searching for elements, and from which to listen to the scroll event | `window` | | ||
@@ -167,3 +167,3 @@ | `elements_selector` | The selector of the image elements inside the container | `"img"` | | ||
| ## Public methods | ||
| ## Public methods | ||
@@ -204,3 +204,3 @@ | Method name | Effect | | ||
| #### Single scrolling container demo | ||
| #### Single scrolling container demo | ||
@@ -244,3 +244,3 @@ The images are in **scrolling container**, a scrolling div inside the page body. | ||
| ##### Install it from bower | ||
| ##### Install using bower | ||
@@ -251,2 +251,10 @@ Run the following command on your terminal or command prompt. | ||
| bower install vanilla-lazyload | ||
| ``` | ||
| ##### Install using npm | ||
| Run the following command on your terminal or command prompt. | ||
| ```bash | ||
| npm install vanilla-lazyload | ||
| ``` |
@@ -11,21 +11,7 @@ (function (root, factory) { | ||
| var _defaultSettings = { | ||
| elements_selector: "img", | ||
| container: window, | ||
| threshold: 300, | ||
| throttle: 50, | ||
| data_src: "original", | ||
| data_srcset: "original-set", | ||
| class_loading: "loading", | ||
| class_loaded: "loaded", | ||
| skip_invisible: true, | ||
| show_while_loading: false, | ||
| callback_load: null, | ||
| callback_set: null, | ||
| callback_processed: null, | ||
| placeholder: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" | ||
| }, | ||
| _supportsAddEventListener = !!window.addEventListener, | ||
| _supportsAttachEvent = !!window.attachEvent, | ||
| _supportsClassList = !!document.body.classList; | ||
| var _defaultSettings, | ||
| _supportsAddEventListener, | ||
| _supportsAttachEvent, | ||
| _supportsClassList, | ||
| _isInitialized = false; | ||
@@ -38,2 +24,28 @@ | ||
| function _init() { | ||
| if(!_isInitialized) { | ||
| _defaultSettings = { | ||
| elements_selector: "img", | ||
| container: window, | ||
| threshold: 300, | ||
| throttle: 50, | ||
| data_src: "original", | ||
| data_srcset: "original-set", | ||
| class_loading: "loading", | ||
| class_loaded: "loaded", | ||
| skip_invisible: true, | ||
| show_while_loading: false, | ||
| callback_load: null, | ||
| callback_set: null, | ||
| callback_processed: null, | ||
| placeholder: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" | ||
| }; | ||
| _supportsAddEventListener = !!window.addEventListener; | ||
| _supportsAttachEvent = !!window.attachEvent; | ||
| _supportsClassList = !!document.body.classList; | ||
| _isInitialized = true; | ||
| } | ||
| } | ||
| function _addEventListener(element, eventName, callback) { | ||
@@ -215,2 +227,3 @@ // Use addEventListener if available | ||
| function LazyLoad(instanceSettings) { | ||
| _init(); | ||
@@ -433,2 +446,2 @@ this._settings = _merge_objects(_defaultSettings, instanceSettings); | ||
| })); | ||
| })); |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
750359
0.41%- Number of package files
109
3.81%- Lines of code
870
2.96%- Number of lines in readme file
250
3.31%Worsened metrics
- Dev dependency count
5
25%No dependency changes