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.0 to 11.0.1

4

CHANGELOG.md

@@ -5,2 +5,6 @@ # CHANGELOG

#### 11.0.1
Squashed a nasty bug that occurred on IE 11 and Safari when the `IntersectionObserver` polyfill wasn't loaded before LazyLoad.
#### 11.0.0

@@ -7,0 +11,0 @@

5

dist/lazyload.amd.js

@@ -310,6 +310,7 @@ 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 revealAndUnobserve = function revealAndUnobserve(element, instance) {
var observer = instance._observer;
revealElement(element, instance);
if (instance._settings.auto_unobserve) {
instance._observer.unobserve(element);
if (observer && instance._settings.auto_unobserve) {
observer.unobserve(element);
}

@@ -316,0 +317,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},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){z(t,e),e._settings.auto_unobserve&&e._observer.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});
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

5

dist/lazyload.esm.js

@@ -299,5 +299,6 @@ const runningOnBrowser = typeof window !== "undefined";

const revealAndUnobserve = (element, instance) => {
var observer = instance._observer;
revealElement(element, instance);
if (instance._settings.auto_unobserve) {
instance._observer.unobserve(element);
if (observer && instance._settings.auto_unobserve) {
observer.unobserve(element);
}

@@ -304,0 +305,0 @@ };

5

dist/lazyload.iife.js

@@ -310,6 +310,7 @@ 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 revealAndUnobserve = function revealAndUnobserve(element, instance) {
var observer = instance._observer;
revealElement(element, instance);
if (instance._settings.auto_unobserve) {
instance._observer.unobserve(element);
if (observer && instance._settings.auto_unobserve) {
observer.unobserve(element);
}

@@ -316,0 +317,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},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){O(t,e),e._settings.auto_unobserve&&e._observer.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}();
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

5

dist/lazyload.js

@@ -314,6 +314,7 @@ 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 revealAndUnobserve = function revealAndUnobserve(element, instance) {
var observer = instance._observer;
revealElement(element, instance);
if (instance._settings.auto_unobserve) {
instance._observer.unobserve(element);
if (observer && instance._settings.auto_unobserve) {
observer.unobserve(element);
}

@@ -320,0 +321,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)},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){z(t,e),e._settings.auto_unobserve&&e._observer.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});
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

2

package.json
{
"name": "vanilla-lazyload",
"version": "11.0.0",
"version": "11.0.1",
"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",

@@ -5,0 +5,0 @@ "main": "dist/lazyload.cjs.min.js",

512

README.md

@@ -1,35 +0,175 @@

LazyLoad is a fast, lightweight and flexible script that _speeds up your web application_ by **loading images, video or iframes as they enter the viewport**. It's written in plain "vanilla" JavaScript, uses [Intersection Observers](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API), and 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).
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).
➡️ Jump to: [👨‍💻 Include the script](#-include-the-script) - [🥧 Recipes](#-recipes) - [📺 Demos](#-demos) - [😋 Tips & tricks](#-tips--tricks) - [🔌 API](#-api) - [😯 Notable features](#-notable-features)
➡️ Jump to: [👨‍💻 Getting started](#-getting-started) - [🥧 Recipes](#-recipes) - [📺 Demos](#-demos) - [😋 Tips & tricks](#-tips--tricks) - [🔌 API](#-api) - [😯 Notable features](#-notable-features)
---
## 👨‍💻 Include the script
## 👨‍💻 Getting started
The latest, recommended version of LazyLoad is `11.0.0`.
### HTML markup
- On browsers supporting the `IntersectionObserver` API, it will load your images as they enter the viewport.
- On [browsers not supporting it](https://caniuse.com/#feat=intersectionobserver) it will load all your lazy content immediately, **unless** you load an `IntersectionObserver` polyfill [like this](https://github.com/w3c/IntersectionObserver/) in your page (before LazyLoad). [Polyfill.io](https://polyfill.io/) is a way to do that.
In order to make your content be loaded by LazyLoad, you must use some `data-` attributes instead of the actual attributes. Examples below.
Legacy browsers support is from IE 9 up.
#### Lazy image:
### What about version 8.x?
```html
<img alt="A lazy image" data-src="sloth.jpg">
```
Version 8.x still exists and works on npm, cdnjs and jsdelivr but it's now deprecated. The reason is that [`IntersectionObserver` support](https://caniuse.com/intersectionobserver) is very wide now. IE 11 will soon disappear from our radars, in the meantime you can use the polyfill there. [Or not](https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/).
#### Lazy responsive image with `srcset` and `sizes`:
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/).
```html
<img alt="A lazy image" class="lazy"
data-src="sloth.jpg"
data-srcset="sloth_400.jpg 400w, sloth_800.jpg 800w"
data-sizes="100w">
```
### Include as script from jsdelivr
#### Lazy responsive image with hi-dpi support using the `picture` tag:
```html
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@11.0.0/dist/lazyload.min.js"></script>
<picture>
<source
media="(min-width: 1200px)"
data-srcset="sloth_1200.jpg 1x, sloth_2400.jpg 2x">
<source
media="(min-width: 800px)"
data-srcset="sloth_800.jpg 1x, sloth_1600.jpg 2x">
<img alt="A lazy image" class="lazy"
data-src="sloth.jpg">
</picture>
```
The file `lazyload.min.js` is provided as UMD (<small>Universal Module Definition</small>).
<br>See [bundles](#bundles) for more module types like AMD, IIFE and ES6 module.
#### Lazy responsive image with automatic _WebP_ format selection, using the `picture` tag:
#### Async script + immediate init
```html
<picture>
<source type="image/webp"
data-srcset="sloth_400.jpg 400w, sloth_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-sizes="100w">
</picture>
```
It's possible to include it as an `async` script and make it work as soon as it's loaded. See the [recipes](#-recipes) section for more information.
#### Lazy single background image
```html
<div class="lazy" data-bg="url(sloth.jpg)"></div>
```
Note that to load images you to use `url()` in the value of your `data-bg` attribute.
#### Lazy multiple background image
```html
<div class="lazy"
data-bg="url(sloth-head.jpg), url(sloth-body.jpg), linear-gradient(#fff, #ccc)">
...
</div>
```
#### Lazy video
```html
<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">
</video>
```
#### Lazy iframe
```html
<iframe class="lazy" data-src="slothFrame.html" poster="sloth.jpg"></iframe>
```
### Include LazyLoad in your project
The latest version of LazyLoad is **11.0.1**.<br>
&rarr; [Read the note about versions and behaviour](#note-about-versions-and-behaviour)
#### The simplest way
The easiest way to use LazyLoad is to include the script from a CDN:
```html
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@11.0.1/dist/lazyload.min.js"></script>
```
Then, in your javascript code:
```js
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy"
// ... more custom settings?
});
```
**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.
#### 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.
**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?
};
// 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.1/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.
```js
if (lazyLoadInstance) {
lazyLoadInstance.update();
}
```
**Note about 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
(function () {
if (typeof window.CustomEvent === "function") {
return false;
}
function CustomEvent(event, params) {
params = params || {bubbles: false, cancelable: false, detail: undefined};
var evt = document.createEvent("CustomEvent");
evt.initCustomEvent (event, params.bubbles, params.cancelable, params.detail);
return evt;
}
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
})();
```
### Include via RequireJS

@@ -40,3 +180,3 @@

```js
define("vanilla-lazyLoad", ["https://cdn.jsdelivr.net/npm/vanilla-lazyload@11.0.0/dist/lazyload.amd.min.js"], function (LazyLoad) {
define("vanilla-lazyLoad", ["https://cdn.jsdelivr.net/npm/vanilla-lazyload@11.0.1/dist/lazyload.amd.min.js"], function (LazyLoad) {
return LazyLoad;

@@ -54,5 +194,5 @@ });

If you prefer to install LazyLoad locally in your project, you can either:
If you prefer to install LazyLoad locally in your project, you can!
#### Install with npm
#### Using npm

@@ -63,13 +203,12 @@ ```

#### Install with bower
#### Using bower
Install with bower is also possible using `bower install vanilla-lazyload`
```
bower install vanilla-lazyload
```
#### Manual download
Download one the latest [releases](https://github.com/verlok/lazyload/releases/). The files you need are inside the `dist` folder.
Download one the latest [releases](https://github.com/verlok/lazyload/releases/). The files you need are inside the `dist` folder. If you don't know which one to pick, use `lazyload.min.js`, or read [about bundles](#bundles).
The file `lazyload.min.js` is provided as UMD (<small>Universal Module Definition</small>).
<br>See [bundles](#bundles) for more module types like AMD, IIFE and ES6 module.
### Local usage

@@ -95,3 +234,3 @@

Inside `dist` folder you find different bundles.
Inside the `dist` folder you will find different bundles.

@@ -105,30 +244,27 @@ | Filename | Module Type | Advantages |

---
#### Note about versions and behaviour
## 🥧 Recipes
The latest, recommended version of LazyLoad is `11.0.1`.
This is the section where you can find _copy & paste_ code for your convenience.
- 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.
### Simple
Legacy browsers support is from IE 9 up.
> 💡 **Use case**: your lazy images are (normally) located in the body of a scrolling page.
##### What about LazyLoad 8.x?
HTML
Version 8.x of LazyLoad still works and exists on npm, cdnjs and jsdelivr, and you still can load it conditionally (if you do that, like [in this demo](demos/conditional_loading.html), you may use versions `8.17.0`/`10.20.1` which have similar API), but doing so is being **deprecated**. The reason of is:
```html
<img class="lazy" alt="..."
data-src="../img/44721746JJ_15_a.jpg"
width="220" height="280">
```
- `IntersectionObserver` [support is very wide](https://caniuse.com/intersectionobserver) now, coming to Safari in the very next few days;
- Internet Explorer will soon disappear from our radars, in the meantime you can load the polyfill on it. Or not, since [even Microsoft is telling users not to use it anymore](https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/);
- Version 8.x listens on the container's `scroll` event, while version 10.x uses `IntersectionObserver`, so they behave differently (e.g. with sliders, or with different scrolling containers).
Javascript
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/).
```js
var myLazyLoad = new LazyLoad({
elements_selector: ".lazy"
});
```
---
[DEMO](http://verlok.github.io/lazyload/demos/simple.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/simple.html) - [API](#-api)
## 🥧 Recipes
This is the section where you can find _copy & paste_ code for your convenience.
### Scrolling panel

@@ -141,19 +277,7 @@

```html
<div class="scrollingPanel">
<img alt="Image description"
data-src="../img/44721746JJ_15_a.jpg"
width="220" height="280">
<!-- More images -->
<div class="scrollingPanel">
<!-- Set of images -->
</div>
```
CSS
```css
.scrollingPanel {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
```
Javascript

@@ -167,3 +291,3 @@

[DEMO](http://verlok.github.io/lazyload/demos/container_single.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/container_single.html) - [API](#-api)
[DEMO](https://verlok.github.io/lazyload/demos/container_single.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/container_single.html) - [API](#-api)

@@ -178,24 +302,9 @@ ### Multiple scrolling panels

<div id="scrollingPanel1" class="scrollingPanel">
<img alt="Image description"
data-src="../img/44721746JJ_15_a.jpg"
width="220" height="280">
<!-- More images -->
<!-- Set of images -->
</div>
<div id="scrollingPanel2" class="scrollingPanel">
<img alt="Image description"
data-src="../img/44721746JJ_15_a.jpg"
width="220" height="280">
<!-- More images -->
<!-- Set of images -->
</div>
```
CSS
```css
.scrollingPanel {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
```
Javascript

@@ -212,53 +321,4 @@

[DEMO](http://verlok.github.io/lazyload/demos/container_multiple.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/container_multiple.html) - [API](#-api)
[DEMO](https://verlok.github.io/lazyload/demos/container_multiple.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/container_multiple.html) - [API](#-api)
### Responsive images - img tag with srcset / sizes
> 💡 **Use case**: you want to lazily load responsive images using the `srcset` and the `sizes` attribute.
HTML
```html
<img class="lazy" data-src="/your/image1.jpg"
data-srcset="/your/image1.jpg 200w, /your/image1@2x.jpg 400w"
data-sizes="(min-width: 20em) 35vw, 100vw">
```
Javascript
```js
var myLazyLoad = new LazyLoad({
elements_selector: ".lazy"
});
```
[DEMO](http://verlok.github.io/lazyload/demos/with_srcset_lazy_sizes.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/with_srcset_lazy_sizes.html) - [API](#-api)
### Responsive images - picture tag
> 💡 **Use case**: you want to lazily load responsive images using the `picture` tag.
HTML
```html
<picture>
<source media="(min-width: 1024px)" data-srcset="/your/image1a.jpg" />
<source media="(min-width: 500px)" data-srcset="/your/image1b.jpg" />
<img class="lazy" alt="Stivaletti" data-src="/your/image1.jpg">
</picture>
```
Please note that you just need to put the `lazy` class on the `<img>` tag but **not in the `<source>` tags**.
Javascript
```js
var myLazyLoad = new LazyLoad({
elements_selector: ".lazy"
});
```
[DEMO](http://verlok.github.io/lazyload/demos/with_picture.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/with_picture.html) - [API](#-api)
### Delay load

@@ -271,4 +331,4 @@

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

@@ -286,139 +346,5 @@ ```

[DEMO](http://verlok.github.io/lazyload/demos/delay.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/delay.html) | [API](#-api)
[DEMO](https://verlok.github.io/lazyload/demos/delay.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/delay.html) | [API](#-api)
### Videos
> 💡 **Use case**: you want to lazily load videos using the `video` tag.
HTML
```html
<video class="lazy" controls width="620"
data-src="/your/video.mp4" poster="/your/poster.jpg">
<source type="video/mp4" data-src="/your/video.mp4">
<source type="video/ogg" data-src="/your/video.ogg">
<source type="video/avi" data-src="/your/video.avi">
</video>
```
Javascript
```js
var myLazyLoad = new LazyLoad({
elements_selector: ".lazy"
});
```
[DEMO](http://verlok.github.io/lazyload/demos/video.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/video.html) - [API](#-api)
### Iframes
> 💡 **Use case**: you want to lazily load `iframe`s.
HTML
```html
<iframe class="lazy" data-src="https://some.page.com" frameborder="0"></iframe>
```
Javascript
```js
var myLazyLoad = new LazyLoad({
elements_selector: ".lazy"
});
```
[DEMO](http://verlok.github.io/lazyload/demos/iframes.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/iframes.html) - [API](#-api)
### Async script + auto initialization
> 💡 **Use case**: you want to use a non-blocking script (which is faster), and you don't need to have control on the exact moment when LazyLoad is created.
Include the following scripts **at the end of** your HTML page, right before closing the `body` tag.
HTML + Javascript
```html
<script>
window.lazyLoadOptions = {
/* your lazyload options */
};
</script>
<!-- Download the script and execute it after lazyLoadOptions is defined -->
<script async src="https://.../lazyload.min.js"></script>
```
**If you need multiple async instances**, just pass `window.lazyLoadOptions` an array of settings.
```html
<script>
window.lazyLoadOptions = [{
/* your instance 1 options */
}, {
/* your instance 2 options */
}];
</script>
<!-- Download the script and execute it after lazyLoadOptions is defined -->
<script async src="https://.../lazyload.min.js"></script>
```
Please note that if you put the script at the beginning of your HTML page, LazyLoad will sometimes be executed before the browser has loaded all the DOM.
In that case, you need to store the instance in a variable and use the `update` method on it. This will make it check the DOM again. See [API](#-api).
[DEMO](http://verlok.github.io/lazyload/demos/async.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/async.html) - [API](#-api)
#### Auto init + store the instance in a variable
> 💡 **Use case**: you want to use a non-blocking script (which is faster), you don't need to have control on the exact moment when LazyLoad is created, but you need to assign the an auto-initialized instance to a variable, e.g. to use the [API](#-api) on it.
HTML + Javascript
```html
<script>
// Listen to the Initialized event
window.addEventListener('LazyLoad::Initialized', function (e) {
// Get the instance and puts it in the lazyLoadInstance variable
lazyLoadInstance = e.detail.instance;
}, false);
// Set the lazyload options for async usage
lazyLoadOptions = {
/* your lazyload options */
};
</script>
<!-- Download the script and execute it after lazyLoadOptions is defined -->
<script async src="https://.../lazyload.min.js"></script>
```
You will then have the auto-generated instance in the `lazyLoadInstance` variable.
[DEMO](http://verlok.github.io/lazyload/demos/async.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/async.html) - [API](#-api)
**Note about Internet Explorer**
LazyLoad uses `CustomEvent` ([learn more](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent) to trigger the `LazyLoad::Initialized`, but this event type is not natively supported by Internet Explorer. If you want to use asynchronous loading and need to store the instance you can use the following polyfill to enable support for Internet Explorer.
```js
(function () {
if (typeof window.CustomEvent === "function") {
return false;
}
function CustomEvent(event, params) {
params = params || {bubbles: false, cancelable: false, detail: undefined};
var evt = document.createEvent("CustomEvent");
evt.initCustomEvent (event, params.bubbles, params.cancelable, params.detail);
return evt;
}
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
})();
```
### Dynamic content

@@ -440,51 +366,4 @@

[DEMO](http://verlok.github.io/lazyload/demos/dynamic_content.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/dynamic_content.html) - [API](#-api)
[DEMO](https://verlok.github.io/lazyload/demos/dynamic_content.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/dynamic_content.html) - [API](#-api)
### Lazy iframes
> 💡 **Use case**: you want to lazily load `iframe`s in your web page, maybe because you have many or just because you want to load only what your users actually want to see.
HTML
```html
<iframe data-src="iframes/i01.html" frameborder="0"></iframe>
```
Javascript
```js
var myLazyLoad = new LazyLoad({
elements_selector: "iframe"
});
```
[DEMO](http://verlok.github.io/lazyload/demos/iframes.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/iframes.html) - [API](#-api)
### Lazy background images
> 💡 **Use case**: your images are set as CSS background images instead of real `img`, but you still want to lazily load them.
HTML
```html
<div class="lazy" data-bg="url(../img/44721746JJ_15_a.jpg)"></div>
```
Javascript
```js
var myLazyLoad = new LazyLoad({
elements_selector: ".lazy"
});
```
That's it. LazyLoad copies the value of the `data-bg` attribute in the `background-image` inline style of the element, given that the element is not an `img`, `iframe` or `video`.
Please note that:
- you need to use `url()` in the value of your `data-bg` attribute
- you can specify multiple images as background, i.e. using `url(file1.jpg), url(file2.jpg)`
- using `data-src` for background images is deprecated, and works only for single background images when `data-bg` is left blank
[DEMO](http://verlok.github.io/lazyload/demos/background_images.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/background_images.html) - [API](#-api)
### Lazy LazyLoad

@@ -532,3 +411,3 @@

[DEMO](http://verlok.github.io/lazyload/demos/lazily_load_lazyLoad.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/lazily_load_lazyLoad.html) - [API](#-api)
[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)

@@ -549,3 +428,3 @@ ---

You need to be sure that the images that are going to be lazy loaded **occupy some vertical space (*)**, ideally the same space of the loaded images. Otherwise, all the images will be loaded at once.
You need to be sure that the containers of the images that are going to be lazy loaded **occupy some vertical space**. This because if the images have an initial height of `0`, all of them will probably be inside the viewport before time, so they will be loaded all at once.

@@ -618,3 +497,2 @@ In an elastic layout where images width change, you want to keep vertical space maintaining the images height, using a width/height ratio calculation.

<!--

@@ -735,1 +613,7 @@ MOAR points to add to the README:

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.
[![BrowserStack Logo](/img/browserstack-logo-600x315.png)](http://browserstack.com/)
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