Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vanilla-lazyload

Package Overview
Dependencies
Maintainers
1
Versions
148
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vanilla-lazyload - npm Package Compare versions

Comparing version 11.0.2 to 11.0.3

dist/.DS_Store

6

CHANGELOG.md

@@ -5,5 +5,9 @@ # CHANGELOG

#### 11.0.3
Rollback of the patch applied in 11.0.2 since it gave strange results in some cases. See #293. Thanks to @davejamesmiller for the analysis and the report.
#### 11.0.2
Applied a patch to resolve #293 a [Chromium bug](https://bugs.chromium.org/p/chromium/issues/detail?id=910741#c13) already fixed in Chrome 72. Thanks to @dverbovyi for reporting, analyzing and solving it.
Applied a patch to resolve #293 a [Chromium bug](https://bugs.chromium.org/p/chromium/issues/detail?id=910741#c13) already fixed in Chrome 72. Thanks to @dverbovyi for the analysis and the report.

@@ -10,0 +14,0 @@ #### 11.0.1

2

dist/lazyload.amd.js

@@ -373,3 +373,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var isIntersecting = function isIntersecting(entry) {
return entry.intersectionRatio > 0;
return entry.isIntersecting || entry.intersectionRatio > 0;
};

@@ -376,0 +376,0 @@

2

dist/lazyload.amd.min.js

@@ -1,2 +0,2 @@

function _extends(){return(_extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(t[a]=n[a])}return t}).apply(this,arguments)}define(function(){"use strict";var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),n=t&&"IntersectionObserver"in window,a=t&&"classList"in document.createElement("p"),r={elements_selector:"img",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_reveal:null,callback_loaded:null,callback_error:null,callback_finish:null},o=function(t,e){return t.getAttribute("data-"+e)},s=function(t,e,n){var a="data-"+e;null!==n?t.setAttribute(a,n):t.removeAttribute(a)},i=function(t){return"true"===o(t,"was-processed")},c=function(t,e){return s(t,"ll-timeout",e)},l=function(t){return o(t,"ll-timeout")},u=function(t,e){var n,a=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:a}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:a})}window.dispatchEvent(n)};var d=function(t,e){t&&t(e)},f=function(t,e){t._loadingCount+=e,0===t._elements.length&&0===t._loadingCount&&d(t._settings.callback_finish)},_=function(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n},v=function(t,e,n){n&&t.setAttribute(e,n)},g=function(t,e){v(t,"sizes",o(t,e.data_sizes)),v(t,"srcset",o(t,e.data_srcset)),v(t,"src",o(t,e.data_src))},h={IMG:function(t,e){var n=t.parentNode;n&&"PICTURE"===n.tagName&&_(n).forEach(function(t){g(t,e)});g(t,e)},IFRAME:function(t,e){v(t,"src",o(t,e.data_src))},VIDEO:function(t,e){_(t).forEach(function(t){v(t,"src",o(t,e.data_src))}),v(t,"src",o(t,e.data_src)),t.load()}},b=function(t,e){var n,a,r=e._settings,s=t.tagName,i=h[s];if(i)return i(t,r),f(e,1),void(e._elements=(n=e._elements,a=t,n.filter(function(t){return t!==a})));!function(t,e){var n=o(t,e.data_src),a=o(t,e.data_bg);n&&(t.style.backgroundImage='url("'.concat(n,'")')),a&&(t.style.backgroundImage=a)}(t,r)},m=function(t,e){a?t.classList.add(e):t.className+=(t.className?" ":"")+e},p=function(t,e,n){t.addEventListener(e,n)},E=function(t,e,n){t.removeEventListener(e,n)},y=function(t,e,n){E(t,"load",e),E(t,"loadeddata",e),E(t,"error",n)},w=function(t,e,n){var r=n._settings,o=e?r.class_loaded:r.class_error,s=e?r.callback_loaded:r.callback_error,i=t.target;!function(t,e){a?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}(i,r.class_loading),m(i,o),d(s,i),f(n,-1)},k=function(t,e){var n=function n(r){w(r,!0,e),y(t,n,a)},a=function a(r){w(r,!1,e),y(t,n,a)};!function(t,e,n){p(t,"load",e),p(t,"loadeddata",e),p(t,"error",n)}(t,n,a)},I=["IMG","IFRAME","VIDEO"],A=function(t,e){var n=e._observer;z(t,e),n&&e._settings.auto_unobserve&&n.unobserve(t)},L=function(t){var e=l(t);e&&(clearTimeout(e),c(t,null))},O=function(t,e){var n=e._settings.load_delay,a=l(t);a||(a=setTimeout(function(){A(t,e),L(t)},n),c(t,a))},z=function(t,e,n){var a=e._settings;!n&&i(t)||(I.indexOf(t.tagName)>-1&&(k(t,e),m(t,a.class_loading)),b(t,e),function(t){s(t,"was-processed","true")}(t),d(a.callback_reveal,t))},N=function(t){return!!n&&(t._observer=new IntersectionObserver(function(e){e.forEach(function(e){return function(t){return t.intersectionRatio>0}(e)?function(t,e){var n=e._settings;d(n.callback_enter,t),n.load_delay?O(t,e):A(t,e)}(e.target,t):function(t,e){var n=e._settings;d(n.callback_exit,t),n.load_delay&&L(t)}(e.target,t)})},{root:(e=t._settings).container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}),!0);var e},x=function(t,e){this._settings=function(t){return _extends({},r,t)}(t),this._loadingCount=0,N(this),this.update(e)};return x.prototype={update:function(t){var n=this,a=this._settings,r=t||a.container.querySelectorAll(a.elements_selector);this._elements=function(t){return t.filter(function(t){return!i(t)})}(Array.prototype.slice.call(r)),!e&&this._observer?this._elements.forEach(function(t){n._observer.observe(t)}):this.loadAll()},destroy:function(){var t=this;this._observer&&(this._elements.forEach(function(e){t._observer.unobserve(e)}),this._observer=null),this._elements=null,this._settings=null},load:function(t,e){z(t,this,e)},loadAll:function(){var t=this;this._elements.forEach(function(e){A(e,t)})}},t&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)u(t,n);else u(t,e)}(x,window.lazyLoadOptions),x});
function _extends(){return(_extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(t[a]=n[a])}return t}).apply(this,arguments)}define(function(){"use strict";var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),n=t&&"IntersectionObserver"in window,a=t&&"classList"in document.createElement("p"),r={elements_selector:"img",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_reveal:null,callback_loaded:null,callback_error:null,callback_finish:null},s=function(t,e){return t.getAttribute("data-"+e)},o=function(t,e,n){var a="data-"+e;null!==n?t.setAttribute(a,n):t.removeAttribute(a)},i=function(t){return"true"===s(t,"was-processed")},c=function(t,e){return o(t,"ll-timeout",e)},l=function(t){return s(t,"ll-timeout")},u=function(t,e){var n,a=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:a}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:a})}window.dispatchEvent(n)};var d=function(t,e){t&&t(e)},f=function(t,e){t._loadingCount+=e,0===t._elements.length&&0===t._loadingCount&&d(t._settings.callback_finish)},_=function(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n},v=function(t,e,n){n&&t.setAttribute(e,n)},g=function(t,e){v(t,"sizes",s(t,e.data_sizes)),v(t,"srcset",s(t,e.data_srcset)),v(t,"src",s(t,e.data_src))},h={IMG:function(t,e){var n=t.parentNode;n&&"PICTURE"===n.tagName&&_(n).forEach(function(t){g(t,e)});g(t,e)},IFRAME:function(t,e){v(t,"src",s(t,e.data_src))},VIDEO:function(t,e){_(t).forEach(function(t){v(t,"src",s(t,e.data_src))}),v(t,"src",s(t,e.data_src)),t.load()}},b=function(t,e){var n,a,r=e._settings,o=t.tagName,i=h[o];if(i)return i(t,r),f(e,1),void(e._elements=(n=e._elements,a=t,n.filter(function(t){return t!==a})));!function(t,e){var n=s(t,e.data_src),a=s(t,e.data_bg);n&&(t.style.backgroundImage='url("'.concat(n,'")')),a&&(t.style.backgroundImage=a)}(t,r)},m=function(t,e){a?t.classList.add(e):t.className+=(t.className?" ":"")+e},p=function(t,e,n){t.addEventListener(e,n)},E=function(t,e,n){t.removeEventListener(e,n)},y=function(t,e,n){E(t,"load",e),E(t,"loadeddata",e),E(t,"error",n)},w=function(t,e,n){var r=n._settings,s=e?r.class_loaded:r.class_error,o=e?r.callback_loaded:r.callback_error,i=t.target;!function(t,e){a?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}(i,r.class_loading),m(i,s),d(o,i),f(n,-1)},k=function(t,e){var n=function n(r){w(r,!0,e),y(t,n,a)},a=function a(r){w(r,!1,e),y(t,n,a)};!function(t,e,n){p(t,"load",e),p(t,"loadeddata",e),p(t,"error",n)}(t,n,a)},I=["IMG","IFRAME","VIDEO"],A=function(t,e){var n=e._observer;z(t,e),n&&e._settings.auto_unobserve&&n.unobserve(t)},L=function(t){var e=l(t);e&&(clearTimeout(e),c(t,null))},O=function(t,e){var n=e._settings.load_delay,a=l(t);a||(a=setTimeout(function(){A(t,e),L(t)},n),c(t,a))},z=function(t,e,n){var a=e._settings;!n&&i(t)||(I.indexOf(t.tagName)>-1&&(k(t,e),m(t,a.class_loading)),b(t,e),function(t){o(t,"was-processed","true")}(t),d(a.callback_reveal,t))},N=function(t){return!!n&&(t._observer=new IntersectionObserver(function(e){e.forEach(function(e){return function(t){return t.isIntersecting||t.intersectionRatio>0}(e)?function(t,e){var n=e._settings;d(n.callback_enter,t),n.load_delay?O(t,e):A(t,e)}(e.target,t):function(t,e){var n=e._settings;d(n.callback_exit,t),n.load_delay&&L(t)}(e.target,t)})},{root:(e=t._settings).container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}),!0);var e},x=function(t,e){this._settings=function(t){return _extends({},r,t)}(t),this._loadingCount=0,N(this),this.update(e)};return x.prototype={update:function(t){var n=this,a=this._settings,r=t||a.container.querySelectorAll(a.elements_selector);this._elements=function(t){return t.filter(function(t){return!i(t)})}(Array.prototype.slice.call(r)),!e&&this._observer?this._elements.forEach(function(t){n._observer.observe(t)}):this.loadAll()},destroy:function(){var t=this;this._observer&&(this._elements.forEach(function(e){t._observer.unobserve(e)}),this._observer=null),this._elements=null,this._settings=null},load:function(t,e){z(t,this,e)},loadAll:function(){var t=this;this._elements.forEach(function(e){A(e,t)})}},t&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)u(t,n);else u(t,e)}(x,window.lazyLoadOptions),x});
//# sourceMappingURL=lazyload.amd.min.js.map

3

dist/lazyload.esm.js

@@ -351,3 +351,4 @@ const runningOnBrowser = typeof window !== "undefined";

const isIntersecting = entry => entry.intersectionRatio > 0;
const isIntersecting = entry =>
entry.isIntersecting || entry.intersectionRatio > 0;

@@ -354,0 +355,0 @@ const getObserverSettings = settings => ({

2

dist/lazyload.iife.js

@@ -373,3 +373,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var isIntersecting = function isIntersecting(entry) {
return entry.intersectionRatio > 0;
return entry.isIntersecting || entry.intersectionRatio > 0;
};

@@ -376,0 +376,0 @@

2

dist/lazyload.iife.min.js

@@ -1,2 +0,2 @@

function _extends(){return(_extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(t[a]=n[a])}return t}).apply(this,arguments)}var LazyLoad=function(){"use strict";var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),n=t&&"IntersectionObserver"in window,a=t&&"classList"in document.createElement("p"),r={elements_selector:"img",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_reveal:null,callback_loaded:null,callback_error:null,callback_finish:null},o=function(t,e){return t.getAttribute("data-"+e)},s=function(t,e,n){var a="data-"+e;null!==n?t.setAttribute(a,n):t.removeAttribute(a)},i=function(t){return"true"===o(t,"was-processed")},c=function(t,e){return s(t,"ll-timeout",e)},l=function(t){return o(t,"ll-timeout")},u=function(t,e){var n,a=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:a}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:a})}window.dispatchEvent(n)};var d=function(t,e){t&&t(e)},f=function(t,e){t._loadingCount+=e,0===t._elements.length&&0===t._loadingCount&&d(t._settings.callback_finish)},_=function(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n},v=function(t,e,n){n&&t.setAttribute(e,n)},g=function(t,e){v(t,"sizes",o(t,e.data_sizes)),v(t,"srcset",o(t,e.data_srcset)),v(t,"src",o(t,e.data_src))},h={IMG:function(t,e){var n=t.parentNode;n&&"PICTURE"===n.tagName&&_(n).forEach(function(t){g(t,e)});g(t,e)},IFRAME:function(t,e){v(t,"src",o(t,e.data_src))},VIDEO:function(t,e){_(t).forEach(function(t){v(t,"src",o(t,e.data_src))}),v(t,"src",o(t,e.data_src)),t.load()}},b=function(t,e){var n,a,r=e._settings,s=t.tagName,i=h[s];if(i)return i(t,r),f(e,1),void(e._elements=(n=e._elements,a=t,n.filter(function(t){return t!==a})));!function(t,e){var n=o(t,e.data_src),a=o(t,e.data_bg);n&&(t.style.backgroundImage='url("'.concat(n,'")')),a&&(t.style.backgroundImage=a)}(t,r)},m=function(t,e){a?t.classList.add(e):t.className+=(t.className?" ":"")+e},p=function(t,e,n){t.addEventListener(e,n)},y=function(t,e,n){t.removeEventListener(e,n)},E=function(t,e,n){y(t,"load",e),y(t,"loadeddata",e),y(t,"error",n)},w=function(t,e,n){var r=n._settings,o=e?r.class_loaded:r.class_error,s=e?r.callback_loaded:r.callback_error,i=t.target;!function(t,e){a?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}(i,r.class_loading),m(i,o),d(s,i),f(n,-1)},k=function(t,e){var n=function n(r){w(r,!0,e),E(t,n,a)},a=function a(r){w(r,!1,e),E(t,n,a)};!function(t,e,n){p(t,"load",e),p(t,"loadeddata",e),p(t,"error",n)}(t,n,a)},I=["IMG","IFRAME","VIDEO"],L=function(t,e){var n=e._observer;O(t,e),n&&e._settings.auto_unobserve&&n.unobserve(t)},A=function(t){var e=l(t);e&&(clearTimeout(e),c(t,null))},z=function(t,e){var n=e._settings.load_delay,a=l(t);a||(a=setTimeout(function(){L(t,e),A(t)},n),c(t,a))},O=function(t,e,n){var a=e._settings;!n&&i(t)||(I.indexOf(t.tagName)>-1&&(k(t,e),m(t,a.class_loading)),b(t,e),function(t){s(t,"was-processed","true")}(t),d(a.callback_reveal,t))},N=function(t){return!!n&&(t._observer=new IntersectionObserver(function(e){e.forEach(function(e){return function(t){return t.intersectionRatio>0}(e)?function(t,e){var n=e._settings;d(n.callback_enter,t),n.load_delay?z(t,e):L(t,e)}(e.target,t):function(t,e){var n=e._settings;d(n.callback_exit,t),n.load_delay&&A(t)}(e.target,t)})},{root:(e=t._settings).container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}),!0);var e},x=function(t,e){this._settings=function(t){return _extends({},r,t)}(t),this._loadingCount=0,N(this),this.update(e)};return x.prototype={update:function(t){var n=this,a=this._settings,r=t||a.container.querySelectorAll(a.elements_selector);this._elements=function(t){return t.filter(function(t){return!i(t)})}(Array.prototype.slice.call(r)),!e&&this._observer?this._elements.forEach(function(t){n._observer.observe(t)}):this.loadAll()},destroy:function(){var t=this;this._observer&&(this._elements.forEach(function(e){t._observer.unobserve(e)}),this._observer=null),this._elements=null,this._settings=null},load:function(t,e){O(t,this,e)},loadAll:function(){var t=this;this._elements.forEach(function(e){L(e,t)})}},t&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)u(t,n);else u(t,e)}(x,window.lazyLoadOptions),x}();
function _extends(){return(_extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(t[a]=n[a])}return t}).apply(this,arguments)}var LazyLoad=function(){"use strict";var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),n=t&&"IntersectionObserver"in window,a=t&&"classList"in document.createElement("p"),r={elements_selector:"img",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_reveal:null,callback_loaded:null,callback_error:null,callback_finish:null},s=function(t,e){return t.getAttribute("data-"+e)},o=function(t,e,n){var a="data-"+e;null!==n?t.setAttribute(a,n):t.removeAttribute(a)},i=function(t){return"true"===s(t,"was-processed")},c=function(t,e){return o(t,"ll-timeout",e)},l=function(t){return s(t,"ll-timeout")},u=function(t,e){var n,a=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:a}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:a})}window.dispatchEvent(n)};var d=function(t,e){t&&t(e)},f=function(t,e){t._loadingCount+=e,0===t._elements.length&&0===t._loadingCount&&d(t._settings.callback_finish)},_=function(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n},v=function(t,e,n){n&&t.setAttribute(e,n)},g=function(t,e){v(t,"sizes",s(t,e.data_sizes)),v(t,"srcset",s(t,e.data_srcset)),v(t,"src",s(t,e.data_src))},h={IMG:function(t,e){var n=t.parentNode;n&&"PICTURE"===n.tagName&&_(n).forEach(function(t){g(t,e)});g(t,e)},IFRAME:function(t,e){v(t,"src",s(t,e.data_src))},VIDEO:function(t,e){_(t).forEach(function(t){v(t,"src",s(t,e.data_src))}),v(t,"src",s(t,e.data_src)),t.load()}},b=function(t,e){var n,a,r=e._settings,o=t.tagName,i=h[o];if(i)return i(t,r),f(e,1),void(e._elements=(n=e._elements,a=t,n.filter(function(t){return t!==a})));!function(t,e){var n=s(t,e.data_src),a=s(t,e.data_bg);n&&(t.style.backgroundImage='url("'.concat(n,'")')),a&&(t.style.backgroundImage=a)}(t,r)},m=function(t,e){a?t.classList.add(e):t.className+=(t.className?" ":"")+e},p=function(t,e,n){t.addEventListener(e,n)},y=function(t,e,n){t.removeEventListener(e,n)},E=function(t,e,n){y(t,"load",e),y(t,"loadeddata",e),y(t,"error",n)},w=function(t,e,n){var r=n._settings,s=e?r.class_loaded:r.class_error,o=e?r.callback_loaded:r.callback_error,i=t.target;!function(t,e){a?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}(i,r.class_loading),m(i,s),d(o,i),f(n,-1)},k=function(t,e){var n=function n(r){w(r,!0,e),E(t,n,a)},a=function a(r){w(r,!1,e),E(t,n,a)};!function(t,e,n){p(t,"load",e),p(t,"loadeddata",e),p(t,"error",n)}(t,n,a)},I=["IMG","IFRAME","VIDEO"],L=function(t,e){var n=e._observer;O(t,e),n&&e._settings.auto_unobserve&&n.unobserve(t)},A=function(t){var e=l(t);e&&(clearTimeout(e),c(t,null))},z=function(t,e){var n=e._settings.load_delay,a=l(t);a||(a=setTimeout(function(){L(t,e),A(t)},n),c(t,a))},O=function(t,e,n){var a=e._settings;!n&&i(t)||(I.indexOf(t.tagName)>-1&&(k(t,e),m(t,a.class_loading)),b(t,e),function(t){o(t,"was-processed","true")}(t),d(a.callback_reveal,t))},N=function(t){return!!n&&(t._observer=new IntersectionObserver(function(e){e.forEach(function(e){return function(t){return t.isIntersecting||t.intersectionRatio>0}(e)?function(t,e){var n=e._settings;d(n.callback_enter,t),n.load_delay?z(t,e):L(t,e)}(e.target,t):function(t,e){var n=e._settings;d(n.callback_exit,t),n.load_delay&&A(t)}(e.target,t)})},{root:(e=t._settings).container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}),!0);var e},x=function(t,e){this._settings=function(t){return _extends({},r,t)}(t),this._loadingCount=0,N(this),this.update(e)};return x.prototype={update:function(t){var n=this,a=this._settings,r=t||a.container.querySelectorAll(a.elements_selector);this._elements=function(t){return t.filter(function(t){return!i(t)})}(Array.prototype.slice.call(r)),!e&&this._observer?this._elements.forEach(function(t){n._observer.observe(t)}):this.loadAll()},destroy:function(){var t=this;this._observer&&(this._elements.forEach(function(e){t._observer.unobserve(e)}),this._observer=null),this._elements=null,this._settings=null},load:function(t,e){O(t,this,e)},loadAll:function(){var t=this;this._elements.forEach(function(e){L(e,t)})}},t&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)u(t,n);else u(t,e)}(x,window.lazyLoadOptions),x}();
//# sourceMappingURL=lazyload.iife.min.js.map

2

dist/lazyload.js

@@ -377,3 +377,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var isIntersecting = function isIntersecting(entry) {
return entry.intersectionRatio > 0;
return entry.isIntersecting || entry.intersectionRatio > 0;
};

@@ -380,0 +380,0 @@

2

dist/lazyload.min.js

@@ -1,2 +0,2 @@

function _extends(){return(_extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t}).apply(this,arguments)}function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}!function(t,e){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.LazyLoad=e()}(this,function(){"use strict";var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),n=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),r={elements_selector:"img",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_reveal:null,callback_loaded:null,callback_error:null,callback_finish:null},a=function(t,e){return t.getAttribute("data-"+e)},s=function(t,e,n){var o="data-"+e;null!==n?t.setAttribute(o,n):t.removeAttribute(o)},i=function(t){return"true"===a(t,"was-processed")},c=function(t,e){return s(t,"ll-timeout",e)},l=function(t){return a(t,"ll-timeout")},u=function(t,e){var n,o=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:o}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:o})}window.dispatchEvent(n)};var d=function(t,e){t&&t(e)},f=function(t,e){t._loadingCount+=e,0===t._elements.length&&0===t._loadingCount&&d(t._settings.callback_finish)},_=function(t){for(var e,n=[],o=0;e=t.children[o];o+=1)"SOURCE"===e.tagName&&n.push(e);return n},v=function(t,e,n){n&&t.setAttribute(e,n)},b=function(t,e){v(t,"sizes",a(t,e.data_sizes)),v(t,"srcset",a(t,e.data_srcset)),v(t,"src",a(t,e.data_src))},g={IMG:function(t,e){var n=t.parentNode;n&&"PICTURE"===n.tagName&&_(n).forEach(function(t){b(t,e)});b(t,e)},IFRAME:function(t,e){v(t,"src",a(t,e.data_src))},VIDEO:function(t,e){_(t).forEach(function(t){v(t,"src",a(t,e.data_src))}),v(t,"src",a(t,e.data_src)),t.load()}},m=function(t,e){var n,o,r=e._settings,s=t.tagName,i=g[s];if(i)return i(t,r),f(e,1),void(e._elements=(n=e._elements,o=t,n.filter(function(t){return t!==o})));!function(t,e){var n=a(t,e.data_src),o=a(t,e.data_bg);n&&(t.style.backgroundImage='url("'.concat(n,'")')),o&&(t.style.backgroundImage=o)}(t,r)},h=function(t,e){o?t.classList.add(e):t.className+=(t.className?" ":"")+e},p=function(t,e,n){t.addEventListener(e,n)},y=function(t,e,n){t.removeEventListener(e,n)},E=function(t,e,n){y(t,"load",e),y(t,"loadeddata",e),y(t,"error",n)},w=function(t,e,n){var r=n._settings,a=e?r.class_loaded:r.class_error,s=e?r.callback_loaded:r.callback_error,i=t.target;!function(t,e){o?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}(i,r.class_loading),h(i,a),d(s,i),f(n,-1)},k=function(t,e){var n=function n(r){w(r,!0,e),E(t,n,o)},o=function o(r){w(r,!1,e),E(t,n,o)};!function(t,e,n){p(t,"load",e),p(t,"loadeddata",e),p(t,"error",n)}(t,n,o)},I=["IMG","IFRAME","VIDEO"],L=function(t,e){var n=e._observer;z(t,e),n&&e._settings.auto_unobserve&&n.unobserve(t)},x=function(t){var e=l(t);e&&(clearTimeout(e),c(t,null))},A=function(t,e){var n=e._settings.load_delay,o=l(t);o||(o=setTimeout(function(){L(t,e),x(t)},n),c(t,o))},z=function(t,e,n){var o=e._settings;!n&&i(t)||(I.indexOf(t.tagName)>-1&&(k(t,e),h(t,o.class_loading)),m(t,e),function(t){s(t,"was-processed","true")}(t),d(o.callback_reveal,t))},O=function(t){return!!n&&(t._observer=new IntersectionObserver(function(e){e.forEach(function(e){return function(t){return t.intersectionRatio>0}(e)?function(t,e){var n=e._settings;d(n.callback_enter,t),n.load_delay?A(t,e):L(t,e)}(e.target,t):function(t,e){var n=e._settings;d(n.callback_exit,t),n.load_delay&&x(t)}(e.target,t)})},{root:(e=t._settings).container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}),!0);var e},N=function(t,e){this._settings=function(t){return _extends({},r,t)}(t),this._loadingCount=0,O(this),this.update(e)};return N.prototype={update:function(t){var n=this,o=this._settings,r=t||o.container.querySelectorAll(o.elements_selector);this._elements=function(t){return t.filter(function(t){return!i(t)})}(Array.prototype.slice.call(r)),!e&&this._observer?this._elements.forEach(function(t){n._observer.observe(t)}):this.loadAll()},destroy:function(){var t=this;this._observer&&(this._elements.forEach(function(e){t._observer.unobserve(e)}),this._observer=null),this._elements=null,this._settings=null},load:function(t,e){z(t,this,e)},loadAll:function(){var t=this;this._elements.forEach(function(e){L(e,t)})}},t&&function(t,e){if(e)if(e.length)for(var n,o=0;n=e[o];o+=1)u(t,n);else u(t,e)}(N,window.lazyLoadOptions),N});
function _extends(){return(_extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t}).apply(this,arguments)}function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}!function(t,e){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.LazyLoad=e()}(this,function(){"use strict";var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),n=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),r={elements_selector:"img",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_reveal:null,callback_loaded:null,callback_error:null,callback_finish:null},a=function(t,e){return t.getAttribute("data-"+e)},s=function(t,e,n){var o="data-"+e;null!==n?t.setAttribute(o,n):t.removeAttribute(o)},i=function(t){return"true"===a(t,"was-processed")},c=function(t,e){return s(t,"ll-timeout",e)},l=function(t){return a(t,"ll-timeout")},u=function(t,e){var n,o=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:o}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:o})}window.dispatchEvent(n)};var d=function(t,e){t&&t(e)},f=function(t,e){t._loadingCount+=e,0===t._elements.length&&0===t._loadingCount&&d(t._settings.callback_finish)},_=function(t){for(var e,n=[],o=0;e=t.children[o];o+=1)"SOURCE"===e.tagName&&n.push(e);return n},v=function(t,e,n){n&&t.setAttribute(e,n)},g=function(t,e){v(t,"sizes",a(t,e.data_sizes)),v(t,"srcset",a(t,e.data_srcset)),v(t,"src",a(t,e.data_src))},b={IMG:function(t,e){var n=t.parentNode;n&&"PICTURE"===n.tagName&&_(n).forEach(function(t){g(t,e)});g(t,e)},IFRAME:function(t,e){v(t,"src",a(t,e.data_src))},VIDEO:function(t,e){_(t).forEach(function(t){v(t,"src",a(t,e.data_src))}),v(t,"src",a(t,e.data_src)),t.load()}},m=function(t,e){var n,o,r=e._settings,s=t.tagName,i=b[s];if(i)return i(t,r),f(e,1),void(e._elements=(n=e._elements,o=t,n.filter(function(t){return t!==o})));!function(t,e){var n=a(t,e.data_src),o=a(t,e.data_bg);n&&(t.style.backgroundImage='url("'.concat(n,'")')),o&&(t.style.backgroundImage=o)}(t,r)},h=function(t,e){o?t.classList.add(e):t.className+=(t.className?" ":"")+e},p=function(t,e,n){t.addEventListener(e,n)},y=function(t,e,n){t.removeEventListener(e,n)},E=function(t,e,n){y(t,"load",e),y(t,"loadeddata",e),y(t,"error",n)},w=function(t,e,n){var r=n._settings,a=e?r.class_loaded:r.class_error,s=e?r.callback_loaded:r.callback_error,i=t.target;!function(t,e){o?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}(i,r.class_loading),h(i,a),d(s,i),f(n,-1)},k=function(t,e){var n=function n(r){w(r,!0,e),E(t,n,o)},o=function o(r){w(r,!1,e),E(t,n,o)};!function(t,e,n){p(t,"load",e),p(t,"loadeddata",e),p(t,"error",n)}(t,n,o)},I=["IMG","IFRAME","VIDEO"],L=function(t,e){var n=e._observer;z(t,e),n&&e._settings.auto_unobserve&&n.unobserve(t)},x=function(t){var e=l(t);e&&(clearTimeout(e),c(t,null))},A=function(t,e){var n=e._settings.load_delay,o=l(t);o||(o=setTimeout(function(){L(t,e),x(t)},n),c(t,o))},z=function(t,e,n){var o=e._settings;!n&&i(t)||(I.indexOf(t.tagName)>-1&&(k(t,e),h(t,o.class_loading)),m(t,e),function(t){s(t,"was-processed","true")}(t),d(o.callback_reveal,t))},O=function(t){return!!n&&(t._observer=new IntersectionObserver(function(e){e.forEach(function(e){return function(t){return t.isIntersecting||t.intersectionRatio>0}(e)?function(t,e){var n=e._settings;d(n.callback_enter,t),n.load_delay?A(t,e):L(t,e)}(e.target,t):function(t,e){var n=e._settings;d(n.callback_exit,t),n.load_delay&&x(t)}(e.target,t)})},{root:(e=t._settings).container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}),!0);var e},N=function(t,e){this._settings=function(t){return _extends({},r,t)}(t),this._loadingCount=0,O(this),this.update(e)};return N.prototype={update:function(t){var n=this,o=this._settings,r=t||o.container.querySelectorAll(o.elements_selector);this._elements=function(t){return t.filter(function(t){return!i(t)})}(Array.prototype.slice.call(r)),!e&&this._observer?this._elements.forEach(function(t){n._observer.observe(t)}):this.loadAll()},destroy:function(){var t=this;this._observer&&(this._elements.forEach(function(e){t._observer.unobserve(e)}),this._observer=null),this._elements=null,this._settings=null},load:function(t,e){z(t,this,e)},loadAll:function(){var t=this;this._elements.forEach(function(e){L(e,t)})}},t&&function(t,e){if(e)if(e.length)for(var n,o=0;n=e[o];o+=1)u(t,n);else u(t,e)}(N,window.lazyLoadOptions),N});
//# sourceMappingURL=lazyload.min.js.map

8

package.json
{
"name": "vanilla-lazyload",
"version": "11.0.2",
"version": "11.0.3",
"description": "A fast, lightweight script to load images as they enter the viewport. SEO friendly, it supports responsive images (both srcset + sizes and picture) and progressive JPEG",

@@ -52,3 +52,7 @@ "main": "dist/lazyload.cjs.min.js",

],
"author": "Andrea \"verlok\" Verlicchi",
"author": {
"name": "Andrea \"verlok\" Verlicchi",
"email": "andrea.verlicchi@gmail.com",
"url": "http://andreaverlicchi.eu"
},
"license": "MIT",

@@ -55,0 +59,0 @@ "bugs": {

258

README.md

@@ -16,5 +16,11 @@ LazyLoad is a fast, lightweight and flexible script that _speeds up your web application_ by **loading your content images, video, iframes as they enter the viewport**. It's written in plain "vanilla" JavaScript, it uses the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API, and it supports [responsive images](https://alistapart.com/article/responsive-images-in-practice). It's also SEO-friendly and it has some other [notable features](#-notable-features).

```html
<img alt="A lazy image" data-src="sloth.jpg">
<img alt="A lazy image" data-src="lazy.jpg">
```
#### Lazy image with low quality placeholder:
```html
<img alt="A lazy image" src="lazy-lowQuality.jpg" data-src="lazy.jpg">
```
#### Lazy responsive image with `srcset` and `sizes`:

@@ -24,7 +30,9 @@

<img alt="A lazy image" class="lazy"
data-src="sloth.jpg"
data-srcset="sloth_400.jpg 400w, sloth_800.jpg 800w"
data-src="lazy.jpg"
data-srcset="lazy_400.jpg 400w, lazy_800.jpg 800w"
data-sizes="100w">
```
To have a low quality placeholder, add the `src` attribute pointing to a very small version of the image. E.g. `src="lazy_10.jpg"`.
#### Lazy responsive image with hi-dpi support using the `picture` tag:

@@ -36,11 +44,13 @@

media="(min-width: 1200px)"
data-srcset="sloth_1200.jpg 1x, sloth_2400.jpg 2x">
data-srcset="lazy_1200.jpg 1x, lazy_2400.jpg 2x">
<source
media="(min-width: 800px)"
data-srcset="sloth_800.jpg 1x, sloth_1600.jpg 2x">
data-srcset="lazy_800.jpg 1x, lazy_1600.jpg 2x">
<img alt="A lazy image" class="lazy"
data-src="sloth.jpg">
data-src="lazy.jpg">
</picture>
```
To have a low quality placeholder, add the `src` attribute pointing to a very small version of the image to the `img` tag. E.g. `src="lazy_10.jpg"`.
#### Lazy responsive image with automatic _WebP_ format selection, using the `picture` tag:

@@ -51,7 +61,7 @@

<source type="image/webp"
data-srcset="sloth_400.jpg 400w, sloth_800.jpg 800w"
data-srcset="lazy_400.jpg 400w, lazy_800.jpg 800w"
data-sizes="100w">
<img alt="A lazy image" class="lazy"
data-src="sloth.jpg"
data-srcset="sloth_400.jpg 400w, sloth_800.jpg 800w"
data-src="lazy.jpg"
data-srcset="lazy_400.jpg 400w, lazy_800.jpg 800w"
data-sizes="100w">

@@ -61,15 +71,17 @@ </picture>

#### Lazy single background image
To have a low quality placeholder, add the `src` attribute pointing to a very small version of the image to the `img` tag. E.g. `src="lazy_10.jpg"`.
#### Lazy background image
Single background
```html
<div class="lazy" data-bg="url(sloth.jpg)"></div>
<div class="lazy" data-bg="url(lazy.jpg)"></div>
```
Note that to load images you to use `url()` in the value of your `data-bg` attribute.
Multiple backgrounds
#### Lazy multiple background image
```html
<div class="lazy"
data-bg="url(sloth-head.jpg), url(sloth-body.jpg), linear-gradient(#fff, #ccc)">
data-bg="url(lazy-head.jpg), url(lazy-body.jpg), linear-gradient(#fff, #ccc)">
...

@@ -79,2 +91,7 @@ </div>

Notes:
- you need to use `url()` in the value of your `data-bg` attribute, also for single background
- you shouldn't use background images to load content images, they're bad for SEO and for accessibility
- on background images, `callback_loaded` won't be called and the `class_loaded` class won't be added
#### Lazy video

@@ -84,6 +101,6 @@

<video class="lazy" controls width="620"
data-src="sloth.mp4" poster="sloth.jpg">
<source type="video/mp4" data-src="sloth.mp4">
<source type="video/ogg" data-src="sloth.ogg">
<source type="video/avi" data-src="sloth.avi">
data-src="lazy.mp4" poster="lazy.jpg">
<source type="video/mp4" data-src="lazy.mp4">
<source type="video/ogg" data-src="lazy.ogg">
<source type="video/avi" data-src="lazy.avi">
</video>

@@ -95,3 +112,3 @@ ```

```html
<iframe class="lazy" data-src="slothFrame.html" poster="sloth.jpg"></iframe>
<iframe class="lazy" data-src="lazyFrame.html" poster="lazy.jpg"></iframe>
```

@@ -101,5 +118,12 @@

The latest version of LazyLoad is **11.0.2**.<br>
&rarr; [Read the note about versions and behaviour](#note-about-versions-and-behaviour)
The latest, recommended version of LazyLoad is **11.0.3**, which leverages the power and speed of the browser's **IntersectionObserver** API.
#### IntersectionObserver: to polyfill or not to polyfill?
On browser NOT supporting IntersectionObserver such as Internet explorer and older versions of Safari **you can choose whether or not to add a javascript polyfill** for it.
If you **don't use a polyfill**, LazyLoad will **load all the images** as soon as it's downloaded and executed. The number of impacted users would be [relatively small](https://caniuse.com/intersectionobserver), so this is a completely acceptable choice.
If you prefer to load a polyfill, the regular LazyLoad behaviour is granted.
#### The simplest way

@@ -110,5 +134,12 @@

```html
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@11.0.2/dist/lazyload.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@11.0.3/dist/lazyload.min.js"></script>
```
Or, with the IntersectionObserver polyfill:
```html
<script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.5.1/intersection-observer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@11.0.3/dist/lazyload.min.js"></script>
```
Then, in your javascript code:

@@ -123,24 +154,65 @@

**Be sure that DOM for your lazy content is ready when you instantiate LazyLoad**. If you can't be sure, or other content may arrive in a later time via AJAX, you'll need to call `lazyLoadInstance.update();` to make LazyLoad check the DOM again.
To be sure that DOM for your lazy content is ready when you instantiate LazyLoad, **place the script tag right before the closing `</body>` tag**. If more DOM arrives later, e.g. via an AJAX call, you'll need to call `lazyLoadInstance.update();` to make LazyLoad check the DOM again.
#### Using an `async` script
```js
if (lazyLoadInstance) {
lazyLoadInstance.update();
}
```
If you prefer, it's possible to include LazyLoad's script using `async` script and initialize it as soon as it's loaded.
### Include via RequireJS
**Define the options before including the script**. You can pass:
You can use [RequireJS](https://requirejs.org) to dynamically and asynchronously load modules in your website.
You can also find the original W3C'S [IntersectionObserver Polyfill packed in AMD](https://github.com/verlok/IntersectionObserverAMD) so you can `require` it conditionally, along with LazyLoad.
Include RequireJS:
```html
<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/bin/r.min.js"></script>
```
Then `require` the AMD version of LazyLoad, like this:
```js
var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@11.0.3/dist/lazyload.amd.min.js";
var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/intersection-observer-amd@1.0.0/intersection-observer-amd.js";
/// Dynamically define the dependencies
var dependencies = [
"IntersectionObserver" in window
? null // <- Doesn't require the polyfill
: polyfillAmdUrl,
lazyLoadAmdUrl
];
// Initialize LazyLoad inside the callback
require(dependencies, function(_, LazyLoad) {
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy"
// ... more custom settings?
});
}
```
[DEMO](https://verlok.github.io/lazyload/demos/amd_polyfill.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/amd_polyfill.html)
### Using an `async` script
If you prefer, it's possible to include LazyLoad's script using `async` script and initialize it as soon as it's loaded.
To do so, **you must define the options before including the script**. You can pass:
- `{}` an object to get a single instance of LazyLoad
- `[{}, {}]` an array of objects to get multiple instances of LazyLoad, each one with different options.
```html
<script>
// Set the options to make LazyLoad self-initialize
window.lazyLoadOptions = {
elements_selector: ".lazy",
// ... more custom settings?
```html
<script>
// Set the options to make LazyLoad self-initialize
window.lazyLoadOptions = {
elements_selector: ".lazy",
// ... more custom settings?
};
// Listen to the initialization event and get the instance of LazyLoad
window.addEventListener('LazyLoad::Initialized', function (event) {
window.lazyLoadInstance = event.detail.instance;
}, false);
</script>
</script>
```

@@ -150,8 +222,34 @@

```html
<script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@11.0.2/dist/lazyload.min.js"></script>
```html
<script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@11.0.3/dist/lazyload.min.js"></script>
```
**Possibly place the script tag right before the closing `</body>` tag**. If you can't do that, LazyLoad could be executed before the browser has loaded all the DOM, and you'll need to call `lazyLoadInstance.update();` to make LazyLoad check the DOM again.
**Possibly place the script tag right before the closing `</body>` tag**. If you can't do that, LazyLoad could be executed before the browser has loaded all the DOM, and you'll need to call its `update()` method to make it check the DOM again.
### Using an `async` script + getting the instance reference
Same as above, but you must put the `addEventListener` code shown below before including the `async` script.
```html
<script>
// Set the options to make LazyLoad self-initialize
window.lazyLoadOptions = {
elements_selector: ".lazy",
// ... more custom settings?
};
// Listen to the initialization event and get the instance of LazyLoad
window.addEventListener('LazyLoad::Initialized', function (event) {
window.lazyLoadInstance = event.detail.instance;
}, false);
</script>
```
Then include the script.
```html
<script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@11.0.3/dist/lazyload.min.js"></script>
```
Now you'll be able to call its methods, like:
```js

@@ -163,9 +261,7 @@ if (lazyLoadInstance) {

**Note about Internet Explorer**
Note about Internet Explorer: because this technique uses a `CustomEvent` ([learn more](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)) to trigger the `LazyLoad::Initialized` event, you might want to add this micro polyfill to make it work on Internet Explorer.
If you want to use asynchronous loading and need to store the instance in a variable, you need to include the following "polyfill" code to enable support for Internet Explorer.
This is because LazyLoad uses `CustomEvent` ([learn more](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)) to trigger the `LazyLoad::Initialized` event, but this is not natively supported by Internet Explorer.
```js
```html
<script>
// CustomEvent micro-polyfill for Internet Explorer
(function () {

@@ -186,20 +282,5 @@ if (typeof window.CustomEvent === "function") {

})();
</script>
```
### Include via RequireJS
If you use [RequireJS](https://requirejs.org) to dynamically load modules in your website, you can take advantage of it.
```js
define("vanilla-lazyLoad", ["https://cdn.jsdelivr.net/npm/vanilla-lazyload@11.0.2/dist/lazyload.amd.min.js"], function (LazyLoad) {
return LazyLoad;
});
```
<!--
TODO: Add here info on
- how to load the polyfill as a dependency...
- ...only if browser doesn't support IObserver
-->
### Local install

@@ -254,11 +335,3 @@

#### Note about versions and behaviour
The latest, recommended version of LazyLoad is `11.0.2`.
- On [browsers supporting the `IntersectionObserver` API]((https://caniuse.com/#feat=intersectionobserver)), it will load your images as they enter the viewport.
- On browsers _not_ supporting `IntersectionObserver`, it will load all your lazy content immediately, **unless** you load an `IntersectionObserver` polyfill like [this one](https://github.com/w3c/IntersectionObserver/) in your page (before LazyLoad). Using [Polyfill.io](https://polyfill.io/) is a way to do that.
Legacy browsers support is from IE 9 up.
<!--
##### What about LazyLoad 8.x?

@@ -273,5 +346,4 @@

The [official w3c polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) could be loaded _conditionally_ on less recent versions of Safari and Internet Explorer, using [Polyfill.io](https://cdn.polyfill.io/v3/).
-->
---
## 🥧 Recipes

@@ -288,3 +360,3 @@

```html
<div class="scrollingPanel">
<div class="scrollingPanel" id="scrollingPanel">
<!-- Set of images -->

@@ -340,3 +412,3 @@ </div>

<img class="lazy" alt="A lazy image"
data-src="sloth.jpg"
data-src="lazy.jpg"
width="220" height="280">

@@ -403,3 +475,3 @@ ```

// When the .horzContainer div enters the viewport...
callback_set: function(el) {
callback_enter: function(el) {
// ...instantiate a new LazyLoad on it

@@ -416,3 +488,3 @@ var oneLL = new LazyLoad({

That's it. Whenever a `.horzContainer` element enters the viewport, LazyLoad calls the `callback_set` function, which creates a new instance of LazyLoad on the `.horzContainer` element.
That's it. Whenever a `.horzContainer` element enters the viewport, LazyLoad calls the `callback_enter` function, which creates a new instance of LazyLoad on the `.horzContainer` element.

@@ -498,3 +570,3 @@ [DEMO](https://verlok.github.io/lazyload/demos/lazily_load_lazyLoad.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/lazily_load_lazyLoad.html) - [API](#-api)

* For **best perceived preformance, leave the `src` and `srcset` attributes blank**. Doing so, the image will be shown as soon as LazyLoad starts loading the image. See [this video](https://youtu.be/2E3ociaFJS0) or [this pen](https://codepen.io/verlok/pen/bKYggE?editors=0110) to test the difference (remember to disable the cache and to set a slower connection speed if you have a very fast one).
* For **best perceived performance, leave the `src` and `srcset` attributes blank**. Doing so, the image will be shown as soon as LazyLoad starts loading the image. See [this video](https://youtu.be/2E3ociaFJS0) or [this pen](https://codepen.io/verlok/pen/bKYggE?editors=0110) to test the difference (remember to disable the cache and to set a slower connection speed if you have a very fast one).
* If you put anything in the src (like a transparent GIF), then LazyLoad starts loading the image but it won't be shown by browsers until the new image is loaded, leading to a **worse perceived performance**.

@@ -514,3 +586,3 @@

By setting the following, edge is able to see the images and they get loaded.
By setting the following, Edge is able to see the images and they get loaded.

@@ -546,3 +618,3 @@ ```css

In the rare cases where you can't or don't want to select the elements using `elements_selector` and you have a reference variable to your elements set (can be a NodeSet or an array of elements), you can pass the elements set as second parameter.
In the rare cases where you can't or don't want to select the elements using `elements_selector` and you have a reference variable to your elements set (can be a NodeSet or an array of elements), you can pass the elements set as the second parameter.

@@ -587,8 +659,8 @@ ```js

| Method name | Effect |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `update()` | Make LazyLoad to check for new lazy images in the container, using the `elements_selector` option. |
| `loadAll()` | Loads all the lazy images right away, no matter if they are inside or outside the viewport. |
| `load(element, force)` | Immediately loads any lazy `element`, even if it isn't selectable by the `elements_selector` option. Note that this method works only once on a specific `element`, unless you force it passing `true` as second parameter. |
| `destroy()` | Destroys the instance, unsetting instance variables and removing listeners. |
| Method name | Effect |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `update()` | Make LazyLoad to check for new lazy images in the container, using the `elements_selector` option. |
| `loadAll()` | Loads all the lazy images right away, no matter if they are inside or outside the viewport. |
| `load(element, force)` | Immediately loads any lazy `element`, even if it isn't selectable by the `elements_selector` option. Note that this method works only once on a specific `element`, unless you force it passing `true` as the second parameter. |
| `destroy()` | Destroys the instance, unsetting instance variables and removing listeners. |

@@ -611,6 +683,2 @@ ---

### Progressive JPEG support --> improve perceived performance
[Progressive JPEG](http://blog.patrickmeenan.com/2013/06/progressive-jpegs-ftw.html) is an image format which is very good for perceived performance because it's rendered sooner, and refined in progressive passes. `LazyLoad` shows your images while they load, letting *progressive JPEG* do its magic.
### Intersection Observer API for optimized CPU usage

@@ -620,10 +688,6 @@

### Much faster than jQuery\_lazyload
This script is comparable to the notorious jQuery\_lazyload, but **_LazyLoad_ is 10x faster**, because LazyLoad uses only optimized, **native javascript** functions and methods, instead of jQuery.
### Tested on real browsers
This script is tested before every release using [BrowserStack](http://browserstack.com/) live, thanks to the BrowserStack Open Source initiative.
Legacy browsers support is from IE 9 up. This script is tested in every browser before every release using [BrowserStack](http://browserstack.com/) live, thanks to the BrowserStack Open Source initiative.
[![BrowserStack Logo](/img/browserstack-logo-600x315.png)](http://browserstack.com/)
<a href="http://browserstack.com/"><img alt="BrowserStack Logo" src="./img/browserstack-logo-600x315.png" width="300" height="158"/></a>
dist/lazyload.amd.min.js.map

Sorry, the diff of this file is not supported yet

dist/lazyload.iife.min.js.map

Sorry, the diff of this file is not supported yet

dist/lazyload.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc