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 14.0.1 to 15.0.0

15

CHANGELOG.md
# CHANGELOG
## Version 15
#### 15.0.0
**Lazy background images gained loaded/error classes and callbacks! 🎉**
**Breaking changes impacting lazy background images!** ⚠ See [UPGRADE.md](UPGRADE.md) to understand **if** you are impacted and **how** to upgrade from previous versions.
- Lazy loading of **one background image** using the `data-bg` attribute, now manages the `load` and `error` events, so they are applied the classes defined in the `class_loading`/`class_loaded`/`class_error`, and the callbacks defined in `callback_loading`/`callback_loaded`/`callback_error`.
- Lazy loading of **multiple background images** is still possible via the `data-bg-multi` attribute. In this case, the `load` and `error` events are not managed. The `class_applied` and `callback_applied` can be used to understand when the multiple background was applied to the element.
- Updated background images demos:
- background-images.html -> single background images
- background-images-multi.html -> multiple background images
- Added [UPGRADE.md](UPGRADE.md), a guide on how to upgrade from previous versions (from version 12 up)
## Version 14

@@ -4,0 +19,0 @@

204

dist/lazyload.amd.js

@@ -35,3 +35,5 @@ define(function () { 'use strict';

data_bg: "bg",
data_bg_multi: "bg-multi",
data_poster: "poster",
class_applied: "applied",
class_loading: "loading",

@@ -44,2 +46,3 @@ class_loaded: "loaded",

callback_exit: null,
callback_applied: null,
callback_loading: null,

@@ -99,2 +102,3 @@ callback_loaded: null,

var statusObserved = "observed";
var statusApplied = "applied";
var statusLoading = "loading";

@@ -143,2 +147,47 @@ var statusLoaded = "loaded";

var safeCallback = function safeCallback(callback, arg1, arg2, arg3) {
if (!callback) {
return;
}
if (arg3 !== undefined) {
callback(arg1, arg2, arg3);
return;
}
if (arg2 !== undefined) {
callback(arg1, arg2);
return;
}
callback(arg1);
};
var addClass = function addClass(element, className) {
if (supportsClassList) {
element.classList.add(className);
return;
}
element.className += (element.className ? " " : "") + className;
};
var removeClass = function removeClass(element, className) {
if (supportsClassList) {
element.classList.remove(className);
return;
}
element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
};
var addTempImage = function addTempImage(element) {
element.llTempImage = document.createElement("img");
};
var deleteTempImage = function deleteTempImage(element) {
delete element.llTempImage;
};
var getTempImage = function getTempImage(element) {
return element.llTempImage;
};
var increaseLoadingCount = function increaseLoadingCount(instance) {

@@ -195,14 +244,2 @@ if (!instance) return;

};
var setSourcesBgImage = function setSourcesBgImage(element, settings) {
var srcDataValue = getData(element, settings.data_src);
var bgDataValue = getData(element, settings.data_bg);
if (srcDataValue) {
element.style.backgroundImage = "url(\"".concat(srcDataValue, "\")");
}
if (bgDataValue) {
element.style.backgroundImage = bgDataValue;
}
};
var setSourcesFunctions = {

@@ -214,46 +251,37 @@ IMG: setSourcesImg,

var setSources = function setSources(element, settings, instance) {
var tagName = element.tagName;
var setSourcesFunction = setSourcesFunctions[tagName];
var setSourcesFunction = setSourcesFunctions[element.tagName];
if (!setSourcesFunction) return;
setSourcesFunction(element, settings); // Annotate and notify loading
if (setSourcesFunction) {
setSourcesFunction(element, settings);
increaseLoadingCount(instance);
} else {
setSourcesBgImage(element, settings);
}
increaseLoadingCount(instance);
addClass(element, settings.class_loading);
setStatus(element, statusLoading);
safeCallback(settings.callback_loading, element, instance);
safeCallback(settings.callback_reveal, element, instance); // <== DEPRECATED
};
var setBackground = function setBackground(element, settings, instance) {
var srcDataValue = getData(element, settings.data_bg); // TODO: GET 2X WHEN DEVICEPIXELRATIO >= 1.5
var addClass = function addClass(element, className) {
if (supportsClassList) {
element.classList.add(className);
return;
}
if (!srcDataValue) return;
element.style.backgroundImage = "url(\"".concat(srcDataValue, "\")");
getTempImage(element).setAttribute("src", srcDataValue); // Annotate and notify loading
element.className += (element.className ? " " : "") + className;
};
var removeClass = function removeClass(element, className) {
if (supportsClassList) {
element.classList.remove(className);
return;
}
increaseLoadingCount(instance);
addClass(element, settings.class_loading);
setStatus(element, statusLoading);
safeCallback(settings.callback_loading, element, instance);
safeCallback(settings.callback_reveal, element, instance); // <== DEPRECATED
}; // NOTE: THE TEMP IMAGE TRICK CANNOT BE DONE WITH data-multi-bg
// BECAUSE INSIDE ITS VALUES MUST BE WRAPPED WITH URL() AND ONE OF THEM
// COULD BE A GRADIENT BACKGROUND IMAGE
element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
};
var setMultiBackground = function setMultiBackground(element, settings, instance) {
var bgDataValue = getData(element, settings.data_bg_multi); // TODO: GET 2X WHEN DEVICEPIXELRATIO >= 1.5
var safeCallback = function safeCallback(callback, arg1, arg2, arg3) {
if (!callback) {
return;
}
if (!bgDataValue) return;
element.style.backgroundImage = bgDataValue; // Annotate and notify applied
if (arg3 !== undefined) {
callback(arg1, arg2, arg3);
return;
}
if (arg2 !== undefined) {
callback(arg1, arg2);
return;
}
callback(arg1);
addClass(element, settings.class_applied);
setStatus(element, statusApplied);
safeCallback(settings.callback_applied, element, instance);
};

@@ -264,9 +292,12 @@

var errorEventName = "error";
var elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"];
var hasLoadEvent = function hasLoadEvent(element) {
return elementsWithLoadEvent.indexOf(element.tagName) > -1;
};
var decreaseLoadingCount = function decreaseLoadingCount(settings, instance) {
if (!instance) return;
instance.loadingCount -= 1;
checkFinish(settings, instance);
};
var checkFinish = function checkFinish(settings, instance) {
if (instance.toLoadCount || instance.loadingCount) return;
if (!instance || instance.toLoadCount || instance.loadingCount) return;
safeCallback(settings.callback_finish, instance);

@@ -290,37 +321,40 @@ };

};
var loadHandler = function loadHandler(event, settings, instance) {
var element = event.target;
setStatus(element, statusLoaded);
var doneHandler = function doneHandler(element, settings, instance) {
deleteTempImage(element);
decreaseLoadingCount(settings, instance);
removeClass(element, settings.class_loading);
};
var loadHandler = function loadHandler(event, element, settings, instance) {
doneHandler(element, settings, instance);
addClass(element, settings.class_loaded);
setStatus(element, statusLoaded);
safeCallback(settings.callback_loaded, element, instance);
decreaseLoadingCount(settings, instance);
checkFinish(settings, instance);
};
var errorHandler = function errorHandler(event, settings, instance) {
var element = event.target;
var errorHandler = function errorHandler(event, element, settings, instance) {
doneHandler(element, settings, instance);
addClass(element, settings.class_error);
setStatus(element, statusError);
removeClass(element, settings.class_loading);
addClass(element, settings.class_error);
safeCallback(settings.callback_error, element, instance);
decreaseLoadingCount(settings, instance);
checkFinish(settings, instance);
};
var addOneShotEventListeners = function addOneShotEventListeners(element, settings, instance) {
var elementToListenTo = getTempImage(element) || element;
var _loadHandler = function _loadHandler(event) {
loadHandler(event, settings, instance);
removeEventListeners(element, _loadHandler, _errorHandler);
loadHandler(event, element, settings, instance);
removeEventListeners(elementToListenTo, _loadHandler, _errorHandler);
};
var _errorHandler = function _errorHandler(event) {
errorHandler(event, settings, instance);
removeEventListeners(element, _loadHandler, _errorHandler);
errorHandler(event, element, settings, instance);
removeEventListeners(elementToListenTo, _loadHandler, _errorHandler);
};
addEventListeners(element, _loadHandler, _errorHandler);
addEventListeners(elementToListenTo, _loadHandler, _errorHandler);
};
var manageableTags = ["IMG", "IFRAME", "VIDEO"];
var decreaseToLoadCount = function decreaseToLoadCount(settings, instance) {
if (!instance) return;
instance.toLoadCount -= 1;
checkFinish(settings, instance);
};

@@ -335,26 +369,32 @@ var unobserve = function unobserve(element, instance) {

};
var isManageableTag = function isManageableTag(element) {
return manageableTags.indexOf(element.tagName) > -1;
var loadBackground = function loadBackground(element, settings, instance) {
addTempImage(element);
addOneShotEventListeners(element, settings, instance);
setBackground(element, settings, instance);
setMultiBackground(element, settings, instance);
};
var enableLoading = function enableLoading(element, settings, instance) {
if (isManageableTag(element)) {
addOneShotEventListeners(element, settings, instance);
addClass(element, settings.class_loading);
}
var loadRegular = function loadRegular(element, settings, instance) {
addOneShotEventListeners(element, settings, instance);
setSources(element, settings, instance);
decreaseToLoadCount(settings, instance);
};
var load = function load(element, settings, instance) {
enableLoading(element, settings, instance);
setStatus(element, statusLoading);
safeCallback(settings.callback_loading, element, instance);
/* DEPRECATED, REMOVE IN V.15 => */
if (hasLoadEvent(element)) {
loadRegular(element, settings, instance);
} else {
loadBackground(element, settings, instance);
}
safeCallback(settings.callback_reveal, element, instance);
decreaseToLoadCount(settings, instance);
unobserve(element, instance);
checkFinish(settings, instance);
};
var loadNative = function loadNative(element, settings, instance) {
enableLoading(element, settings, instance);
addOneShotEventListeners(element, settings, instance);
setSources(element, settings, instance);
decreaseToLoadCount(settings, instance);
setStatus(element, statusNative);
checkFinish(settings, instance);
};

@@ -549,4 +589,4 @@

},
// DEPRECATED
load: function load$1(element) {
/* DEPRECATED, REMOVE IN V.15 */
load(element, this._settings, this);

@@ -553,0 +593,0 @@ }

2

dist/lazyload.amd.min.js

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

define((function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),o=n&&"IntersectionObserver"in window,a=n&&"classList"in document.createElement("p"),r={elements_selector:"img",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_poster:"poster",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,use_native:!1},i=function(n){return t({},r,n)},s=function(t,n){var e,o=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:o}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:o})}window.dispatchEvent(e)},c=function(t,n){return t.getAttribute("data-"+n)},l=function(t,n,e){var o="data-"+n;null!==e?t.setAttribute(o,e):t.removeAttribute(o)},u=function(t,n){return l(t,"ll-status",n)},d=function(t,n){return l(t,"ll-timeout",n)},f=function(t){return c(t,"ll-timeout")},_=function(t){for(var n,e=[],o=0;n=t.children[o];o+=1)"SOURCE"===n.tagName&&e.push(n);return e},v=function(t,n,e){e&&t.setAttribute(n,e)},g=function(t,n){v(t,"sizes",c(t,n.data_sizes)),v(t,"srcset",c(t,n.data_srcset)),v(t,"src",c(t,n.data_src))},h={IMG:function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&_(e).forEach((function(t){g(t,n)}));g(t,n)},IFRAME:function(t,n){v(t,"src",c(t,n.data_src))},VIDEO:function(t,n){_(t).forEach((function(t){v(t,"src",c(t,n.data_src))})),v(t,"poster",c(t,n.data_poster)),v(t,"src",c(t,n.data_src)),t.load()}},b=function(t,n,e){var o=t.tagName,a=h[o];a?(a(t,n),function(t){t&&(t.loadingCount+=1)}(e)):function(t,n){var e=c(t,n.data_src),o=c(t,n.data_bg);e&&(t.style.backgroundImage='url("'.concat(e,'")')),o&&(t.style.backgroundImage=o)}(t,n)},m=function(t,n){a?t.classList.add(n):t.className+=(t.className?" ":"")+n},p=function(t,n){a?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},E=function(t,n,e,o){t&&(void 0===o?void 0===e?t(n):t(n,e):t(n,e,o))},y=function(t,n){n&&(n.loadingCount-=1,w(t,n))},w=function(t,n){n.toLoadCount||n.loadingCount||E(t.callback_finish,n)},I=function(t,n,e){t.addEventListener(n,e)},L=function(t,n,e){t.removeEventListener(n,e)},k=function(t,n,e){L(t,"load",n),L(t,"loadeddata",n),L(t,"error",e)},C=function(t,n,e){var o=function o(r){!function(t,n,e){var o=t.target;u(o,"loaded"),p(o,n.class_loading),m(o,n.class_loaded),E(n.callback_loaded,o,e),y(n,e)}(r,n,e),k(t,o,a)},a=function a(r){!function(t,n,e){var o=t.target;u(o,"error"),p(o,n.class_loading),m(o,n.class_error),E(n.callback_error,o,e),y(n,e)}(r,n,e),k(t,o,a)};!function(t,n,e){I(t,"load",n),I(t,"loadeddata",n),I(t,"error",e)}(t,o,a)},A=["IMG","IFRAME","VIDEO"],O=function(t,n,e){(function(t){return A.indexOf(t.tagName)>-1})(t)&&(C(t,n,e),m(t,n.class_loading)),b(t,n,e),function(t,n){n&&(n.toLoadCount-=1,w(t,n))}(n,e)},z=function(t,n,e){O(t,n,e),u(t,"loading"),E(n.callback_loading,t,e),E(n.callback_reveal,t,e),function(t,n){if(n){var e=n._observer;e&&n._settings.auto_unobserve&&e.unobserve(t)}}(t,e)},N=function(t){var n=f(t);n&&(clearTimeout(n),d(t,null))},M=function(t,n,e){var o=e._settings;E(o.callback_enter,t,n,e),o.load_delay?function(t,n,e){var o=n.load_delay,a=f(t);a||(a=setTimeout((function(){z(t,n,e),N(t)}),o),d(t,a))}(t,o,e):z(t,o,e)},R=["IMG","IFRAME"],x=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},T=function(t,n,e){t.forEach((function(t){-1!==R.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){O(t,n,e),u(t,"native")}(t,n,e))})),e.toLoadCount=0},F=function(t,n){!function(t){t.disconnect()}(t),function(t,n){n.forEach((function(n){t.observe(n),u(n,"observed")}))}(t,n)},G=function(t){var n;o&&!x(t._settings)&&(t._observer=new IntersectionObserver((function(n){n.forEach((function(n){return function(t){return t.isIntersecting||t.intersectionRatio>0}(n)?M(n.target,n,t):function(t,n,e){var o=e._settings;E(o.callback_exit,t,n,e),o.load_delay&&N(t)}(n.target,n,t)}))}),{root:(n=t._settings).container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}))},j=function(t){return Array.prototype.slice.call(t)},D=function(t){return t.container.querySelectorAll(t.elements_selector)},P=function(t){return!function(t){return null!==c(t,"ll-status")}(t)||function(t){return"observed"===c(t,"ll-status")}(t)},S=function(t){return function(t){return"error"===c(t,"ll-status")}(t)},U=function(t,n){return function(t){return j(t).filter(P)}(t||D(n))},V=function(t){var n,e=t._settings;(n=D(e),j(n).filter(S)).forEach((function(t){p(t,e.class_error),function(t){l(t,"ll-status",null)}(t)})),t.update()},$=function(t,e){var o;this._settings=i(t),this.loadingCount=0,G(this),o=this,n&&window.addEventListener("online",(function(t){V(o)})),this.update(e)};return $.prototype={update:function(t){var n=this._settings,a=U(t,n);this.toLoadCount=a.length,!e&&o?x(n)?T(a,n,this):F(this._observer,a):this.loadAll(a)},destroy:function(){this._observer&&this._observer.disconnect(),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;U(t,e).forEach((function(t){z(t,e,n)}))},load:function(t){z(t,this._settings,this)}},$.load=function(t,n){var e=i(n);z(t,e)},n&&function(t,n){if(n)if(n.length)for(var e,o=0;e=n[o];o+=1)s(t,e);else s(t,n)}($,window.lazyLoadOptions),$}));
define((function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=n&&"IntersectionObserver"in window,o=n&&"classList"in document.createElement("p"),i={elements_selector:"img",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_multi:"bg-multi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,use_native:!1},r=function(n){return t({},i,n)},l=function(t,n){var e,a=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:a}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:a})}window.dispatchEvent(e)},c=function(t,n){return t.getAttribute("data-"+n)},s=function(t,n,e){var a="data-"+n;null!==e?t.setAttribute(a,e):t.removeAttribute(a)},u=function(t,n){return s(t,"ll-status",n)},d=function(t,n){return s(t,"ll-timeout",n)},f=function(t){return c(t,"ll-timeout")},_=function(t,n,e,a){t&&(void 0===a?void 0===e?t(n):t(n,e):t(n,e,a))},g=function(t,n){o?t.classList.add(n):t.className+=(t.className?" ":"")+n},v=function(t,n){o?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},b=function(t){return t.llTempImage},h=function(t){t&&(t.loadingCount+=1)},p=function(t){for(var n,e=[],a=0;n=t.children[a];a+=1)"SOURCE"===n.tagName&&e.push(n);return e},m=function(t,n,e){e&&t.setAttribute(n,e)},E=function(t,n){m(t,"sizes",c(t,n.data_sizes)),m(t,"srcset",c(t,n.data_srcset)),m(t,"src",c(t,n.data_src))},y={IMG:function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&p(e).forEach((function(t){E(t,n)}));E(t,n)},IFRAME:function(t,n){m(t,"src",c(t,n.data_src))},VIDEO:function(t,n){p(t).forEach((function(t){m(t,"src",c(t,n.data_src))})),m(t,"poster",c(t,n.data_poster)),m(t,"src",c(t,n.data_src)),t.load()}},I=function(t,n,e){var a=y[t.tagName];a&&(a(t,n),h(e),g(t,n.class_loading),u(t,"loading"),_(n.callback_loading,t,e),_(n.callback_reveal,t,e))},k=["IMG","IFRAME","VIDEO"],w=function(t,n){!n||n.toLoadCount||n.loadingCount||_(t.callback_finish,n)},L=function(t,n,e){t.addEventListener(n,e)},C=function(t,n,e){t.removeEventListener(n,e)},A=function(t,n,e){C(t,"load",n),C(t,"loadeddata",n),C(t,"error",e)},O=function(t,n,e){!function(t){delete t.llTempImage}(t),function(t,n){n&&(n.loadingCount-=1)}(0,e),v(t,n.class_loading)},z=function(t,n,e){var a=b(t)||t,o=function o(r){!function(t,n,e,a){O(n,e,a),g(n,e.class_loaded),u(n,"loaded"),_(e.callback_loaded,n,a),w(e,a)}(0,t,n,e),A(a,o,i)},i=function i(r){!function(t,n,e,a){O(n,e,a),g(n,e.class_error),u(n,"error"),_(e.callback_error,n,a),w(e,a)}(0,t,n,e),A(a,o,i)};!function(t,n,e){L(t,"load",n),L(t,"loadeddata",n),L(t,"error",e)}(a,o,i)},N=function(t,n){n&&(n.toLoadCount-=1)},M=function(t,n,e){!function(t){t.llTempImage=document.createElement("img")}(t),z(t,n,e),function(t,n,e){var a=c(t,n.data_bg);a&&(t.style.backgroundImage='url("'.concat(a,'")'),b(t).setAttribute("src",a),h(e),g(t,n.class_loading),u(t,"loading"),_(n.callback_loading,t,e),_(n.callback_reveal,t,e))}(t,n,e),function(t,n,e){var a=c(t,n.data_bg_multi);a&&(t.style.backgroundImage=a,g(t,n.class_applied),u(t,"applied"),_(n.callback_applied,t,e))}(t,n,e)},R=function(t,n,e){!function(t){return k.indexOf(t.tagName)>-1}(t)?M(t,n,e):function(t,n,e){z(t,n,e),I(t,n,e)}(t,n,e),N(0,e),function(t,n){if(n){var e=n._observer;e&&n._settings.auto_unobserve&&e.unobserve(t)}}(t,e),w(n,e)},T=function(t){var n=f(t);n&&(clearTimeout(n),d(t,null))},x=function(t,n,e){var a=e._settings;_(a.callback_enter,t,n,e),a.load_delay?function(t,n,e){var a=n.load_delay,o=f(t);o||(o=setTimeout((function(){R(t,n,e),T(t)}),a),d(t,o))}(t,a,e):R(t,a,e)},F=["IMG","IFRAME"],G=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},j=function(t,n,e){t.forEach((function(t){-1!==F.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){z(t,n,e),I(t,n,e),N(0,e),u(t,"native"),w(n,e)}(t,n,e))})),e.toLoadCount=0},D=function(t,n){!function(t){t.disconnect()}(t),function(t,n){n.forEach((function(n){t.observe(n),u(n,"observed")}))}(t,n)},P=function(t){var n;a&&!G(t._settings)&&(t._observer=new IntersectionObserver((function(n){n.forEach((function(n){return function(t){return t.isIntersecting||t.intersectionRatio>0}(n)?x(n.target,n,t):function(t,n,e){var a=e._settings;_(a.callback_exit,t,n,e),a.load_delay&&T(t)}(n.target,n,t)}))}),{root:(n=t._settings).container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}))},S=function(t){return Array.prototype.slice.call(t)},U=function(t){return t.container.querySelectorAll(t.elements_selector)},V=function(t){return!function(t){return null!==c(t,"ll-status")}(t)||function(t){return"observed"===c(t,"ll-status")}(t)},$=function(t){return function(t){return"error"===c(t,"ll-status")}(t)},q=function(t,n){return function(t){return S(t).filter(V)}(t||U(n))},H=function(t){var n,e=t._settings;(n=U(e),S(n).filter($)).forEach((function(t){v(t,e.class_error),function(t){s(t,"ll-status",null)}(t)})),t.update()},B=function(t,e){var a;this._settings=r(t),this.loadingCount=0,P(this),a=this,n&&window.addEventListener("online",(function(t){H(a)})),this.update(e)};return B.prototype={update:function(t){var n=this._settings,o=q(t,n);this.toLoadCount=o.length,!e&&a?G(n)?j(o,n,this):D(this._observer,o):this.loadAll(o)},destroy:function(){this._observer&&this._observer.disconnect(),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;q(t,e).forEach((function(t){R(t,e,n)}))},load:function(t){R(t,this._settings,this)}},B.load=function(t,n){var e=r(n);R(t,e)},n&&function(t,n){if(n)if(n.length)for(var e,a=0;e=n[a];a+=1)l(t,e);else l(t,n)}(B,window.lazyLoadOptions),B}));

210

dist/lazyload.esm.js

@@ -23,3 +23,5 @@ const runningOnBrowser = typeof window !== "undefined";

data_bg: "bg",
data_bg_multi: "bg-multi",
data_poster: "poster",
class_applied: "applied",
class_loading: "loading",

@@ -32,2 +34,3 @@ class_loaded: "loaded",

callback_exit: null,
callback_applied: null,
callback_loading: null,

@@ -78,2 +81,3 @@ callback_loaded: null,

const statusObserved = "observed";
const statusApplied = "applied";
const statusLoading = "loading";

@@ -115,2 +119,47 @@ const statusLoaded = "loaded";

const safeCallback = (callback, arg1, arg2, arg3) => {
if (!callback) {
return;
}
if (arg3 !== undefined) {
callback(arg1, arg2, arg3);
return;
}
if (arg2 !== undefined) {
callback(arg1, arg2);
return;
}
callback(arg1);
};
const addClass = (element, className) => {
if (supportsClassList) {
element.classList.add(className);
return;
}
element.className += (element.className ? " " : "") + className;
};
const removeClass = (element, className) => {
if (supportsClassList) {
element.classList.remove(className);
return;
}
element.className = element.className.
replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").
replace(/^\s+/, "").
replace(/\s+$/, "");
};
const addTempImage = element => {
element.llTempImage = document.createElement("img");
};
const deleteTempImage = element => {
delete element.llTempImage;
};
const getTempImage = element => element.llTempImage;
const increaseLoadingCount = instance => {

@@ -171,15 +220,2 @@ if (!instance) return;

const setSourcesBgImage = (element, settings) => {
const srcDataValue = getData(element, settings.data_src);
const bgDataValue = getData(element, settings.data_bg);
if (srcDataValue) {
element.style.backgroundImage = `url("${srcDataValue}")`;
}
if (bgDataValue) {
element.style.backgroundImage = bgDataValue;
}
};
const setSourcesFunctions = {

@@ -192,47 +228,39 @@ IMG: setSourcesImg,

const setSources = (element, settings, instance) => {
const tagName = element.tagName;
const setSourcesFunction = setSourcesFunctions[tagName];
if (setSourcesFunction) {
setSourcesFunction(element, settings);
increaseLoadingCount(instance);
} else {
setSourcesBgImage(element, settings);
}
const setSourcesFunction = setSourcesFunctions[element.tagName];
if (!setSourcesFunction) return;
setSourcesFunction(element, settings);
// Annotate and notify loading
increaseLoadingCount(instance);
addClass(element, settings.class_loading);
setStatus(element, statusLoading);
safeCallback(settings.callback_loading, element, instance);
safeCallback(settings.callback_reveal, element, instance); // <== DEPRECATED
};
const addClass = (element, className) => {
if (supportsClassList) {
element.classList.add(className);
return;
}
element.className += (element.className ? " " : "") + className;
const setBackground = (element, settings, instance) => {
const srcDataValue = getData(element, settings.data_bg); // TODO: GET 2X WHEN DEVICEPIXELRATIO >= 1.5
if (!srcDataValue) return;
element.style.backgroundImage = `url("${srcDataValue}")`;
getTempImage(element).setAttribute("src", srcDataValue);
// Annotate and notify loading
increaseLoadingCount(instance);
addClass(element, settings.class_loading);
setStatus(element, statusLoading);
safeCallback(settings.callback_loading, element, instance);
safeCallback(settings.callback_reveal, element, instance); // <== DEPRECATED
};
const removeClass = (element, className) => {
if (supportsClassList) {
element.classList.remove(className);
return;
}
element.className = element.className.
replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").
replace(/^\s+/, "").
replace(/\s+$/, "");
// NOTE: THE TEMP IMAGE TRICK CANNOT BE DONE WITH data-multi-bg
// BECAUSE INSIDE ITS VALUES MUST BE WRAPPED WITH URL() AND ONE OF THEM
// COULD BE A GRADIENT BACKGROUND IMAGE
const setMultiBackground = (element, settings, instance) => {
const bgDataValue = getData(element, settings.data_bg_multi); // TODO: GET 2X WHEN DEVICEPIXELRATIO >= 1.5
if (!bgDataValue) return;
element.style.backgroundImage = bgDataValue;
// Annotate and notify applied
addClass(element, settings.class_applied);
setStatus(element, statusApplied);
safeCallback(settings.callback_applied, element, instance);
};
const safeCallback = (callback, arg1, arg2, arg3) => {
if (!callback) {
return;
}
if (arg3 !== undefined) {
callback(arg1, arg2, arg3);
return;
}
if (arg2 !== undefined) {
callback(arg1, arg2);
return;
}
callback(arg1);
};
const genericLoadEventName = "load";

@@ -242,10 +270,13 @@ const mediaLoadEventName = "loadeddata";

const elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"];
const hasLoadEvent = element => elementsWithLoadEvent.indexOf(element.tagName) > -1;
const decreaseLoadingCount = (settings, instance) => {
if (!instance) return;
instance.loadingCount -= 1;
checkFinish(settings, instance);
};
const checkFinish = (settings, instance) => {
if (instance.toLoadCount || instance.loadingCount) return;
if (!instance || instance.toLoadCount || instance.loadingCount) return;
safeCallback(settings.callback_finish, instance);

@@ -274,38 +305,42 @@ };

const loadHandler = (event, settings, instance) => {
const element = event.target;
setStatus(element, statusLoaded);
const doneHandler = (element, settings, instance) => {
deleteTempImage(element);
decreaseLoadingCount(settings, instance);
removeClass(element, settings.class_loading);
};
const loadHandler = (event, element, settings, instance) => {
doneHandler(element, settings, instance);
addClass(element, settings.class_loaded);
setStatus(element, statusLoaded);
safeCallback(settings.callback_loaded, element, instance);
decreaseLoadingCount(settings, instance);
checkFinish(settings, instance);
};
const errorHandler = (event, settings, instance) => {
const element = event.target;
const errorHandler = (event, element, settings, instance) => {
doneHandler(element, settings, instance);
addClass(element, settings.class_error);
setStatus(element, statusError);
removeClass(element, settings.class_loading);
addClass(element, settings.class_error);
safeCallback(settings.callback_error, element, instance);
decreaseLoadingCount(settings, instance);
checkFinish(settings, instance);
};
const addOneShotEventListeners = (element, settings, instance) => {
const elementToListenTo = getTempImage(element) || element;
const _loadHandler = event => {
loadHandler(event, settings, instance);
removeEventListeners(element, _loadHandler, _errorHandler);
loadHandler(event, element, settings, instance);
removeEventListeners(elementToListenTo, _loadHandler, _errorHandler);
};
const _errorHandler = event => {
errorHandler(event, settings, instance);
removeEventListeners(element, _loadHandler, _errorHandler);
errorHandler(event, element, settings, instance);
removeEventListeners(elementToListenTo, _loadHandler, _errorHandler);
};
addEventListeners(element, _loadHandler, _errorHandler);
addEventListeners(elementToListenTo, _loadHandler, _errorHandler);
};
const manageableTags = ["IMG", "IFRAME", "VIDEO"];
const decreaseToLoadCount = (settings, instance) => {
if (!instance) return;
instance.toLoadCount -= 1;
checkFinish(settings, instance);
};

@@ -321,24 +356,31 @@

const isManageableTag = element => manageableTags.indexOf(element.tagName) > -1;
const loadBackground = (element, settings, instance) => {
addTempImage(element);
addOneShotEventListeners(element, settings, instance);
setBackground(element, settings, instance);
setMultiBackground(element, settings, instance);
};
const enableLoading = (element, settings, instance) => {
if (isManageableTag(element)) {
addOneShotEventListeners(element, settings, instance);
addClass(element, settings.class_loading);
}
const loadRegular = (element, settings, instance) => {
addOneShotEventListeners(element, settings, instance);
setSources(element, settings, instance);
decreaseToLoadCount(settings, instance);
};
const load = (element, settings, instance) => {
enableLoading(element, settings, instance);
setStatus(element, statusLoading);
safeCallback(settings.callback_loading, element, instance);
/* DEPRECATED, REMOVE IN V.15 => */ safeCallback(settings.callback_reveal, element, instance);
if (hasLoadEvent(element)) {
loadRegular(element, settings, instance);
} else {
loadBackground(element, settings, instance);
}
decreaseToLoadCount(settings, instance);
unobserve(element, instance);
checkFinish(settings, instance);
};
const loadNative = (element, settings, instance) => {
enableLoading(element, settings, instance);
addOneShotEventListeners(element, settings, instance);
setSources(element, settings, instance);
decreaseToLoadCount(settings, instance);
setStatus(element, statusNative);
checkFinish(settings, instance);
};

@@ -518,4 +560,4 @@

// DEPRECATED
load: function(element) {
/* DEPRECATED, REMOVE IN V.15 */
load(element, this._settings, this);

@@ -522,0 +564,0 @@ }

2

dist/lazyload.esm.min.js

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

const t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=t&&"IntersectionObserver"in window,s=t&&"classList"in document.createElement("p"),o={elements_selector:"img",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_poster:"poster",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,use_native:!1},l=t=>Object.assign({},o,t),n=function(t,e){var a;let s=new t(e);try{a=new CustomEvent("LazyLoad::Initialized",{detail:{instance:s}})}catch(t){(a=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:s})}window.dispatchEvent(a)},r=(t,e)=>t.getAttribute("data-"+e),i=(t,e,a)=>{var s="data-"+e;null!==a?t.setAttribute(s,a):t.removeAttribute(s)},c=(t,e)=>i(t,"ll-status",e),d=(t,e)=>i(t,"ll-timeout",e),u=t=>r(t,"ll-timeout"),_=t=>{let e=[];for(let a,s=0;a=t.children[s];s+=1)"SOURCE"===a.tagName&&e.push(a);return e},g=(t,e,a)=>{a&&t.setAttribute(e,a)},h=(t,e)=>{g(t,"sizes",r(t,e.data_sizes)),g(t,"srcset",r(t,e.data_srcset)),g(t,"src",r(t,e.data_src))},b={IMG:(t,e)=>{const a=t.parentNode;if(a&&"PICTURE"===a.tagName){_(a).forEach(t=>{h(t,e)})}h(t,e)},IFRAME:(t,e)=>{g(t,"src",r(t,e.data_src))},VIDEO:(t,e)=>{_(t).forEach(t=>{g(t,"src",r(t,e.data_src))}),g(t,"poster",r(t,e.data_poster)),g(t,"src",r(t,e.data_src)),t.load()}},v=(t,e,a)=>{const s=t.tagName,o=b[s];o?(o(t,e),(t=>{t&&(t.loadingCount+=1)})(a)):((t,e)=>{const a=r(t,e.data_src),s=r(t,e.data_bg);a&&(t.style.backgroundImage=`url("${a}")`),s&&(t.style.backgroundImage=s)})(t,e)},f=(t,e)=>{s?t.classList.add(e):t.className+=(t.className?" ":"")+e},m=(t,e)=>{s?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},p=(t,e,a,s)=>{t&&(void 0===s?void 0===a?t(e):t(e,a):t(e,a,s))},E=(t,e)=>{e&&(e.loadingCount-=1,y(t,e))},y=(t,e)=>{e.toLoadCount||e.loadingCount||p(t.callback_finish,e)},w=(t,e,a)=>{t.addEventListener(e,a)},I=(t,e,a)=>{t.removeEventListener(e,a)},L=(t,e,a)=>{I(t,"load",e),I(t,"loadeddata",e),I(t,"error",a)},k=(t,e,a)=>{const s=l=>{((t,e,a)=>{const s=t.target;c(s,"loaded"),m(s,e.class_loading),f(s,e.class_loaded),p(e.callback_loaded,s,a),E(e,a)})(l,e,a),L(t,s,o)},o=l=>{((t,e,a)=>{const s=t.target;c(s,"error"),m(s,e.class_loading),f(s,e.class_error),p(e.callback_error,s,a),E(e,a)})(l,e,a),L(t,s,o)};((t,e,a)=>{w(t,"load",e),w(t,"loadeddata",e),w(t,"error",a)})(t,s,o)},C=["IMG","IFRAME","VIDEO"],A=(t,e,a)=>{(t=>C.indexOf(t.tagName)>-1)(t)&&(k(t,e,a),f(t,e.class_loading)),v(t,e,a),((t,e)=>{e&&(e.toLoadCount-=1,y(t,e))})(e,a)},z=(t,e,a)=>{A(t,e,a),c(t,"loading"),p(e.callback_loading,t,a),p(e.callback_reveal,t,a),((t,e)=>{if(!e)return;const a=e._observer;a&&e._settings.auto_unobserve&&a.unobserve(t)})(t,a)},N=t=>{var e=u(t);e&&(clearTimeout(e),d(t,null))},O=(t,e,a)=>{const s=a._settings;p(s.callback_enter,t,e,a),s.load_delay?((t,e,a)=>{const s=e.load_delay;let o=u(t);o||(o=setTimeout((function(){z(t,e,a),N(t)}),s),d(t,o))})(t,s,a):z(t,s,a)},M=["IMG","IFRAME"],x=t=>t.use_native&&"loading"in HTMLImageElement.prototype,R=(t,e,a)=>{t.forEach(t=>{-1!==M.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),((t,e,a)=>{A(t,e,a),c(t,"native")})(t,e,a))}),a.toLoadCount=0},T=(t,e)=>{(t=>{t.disconnect()})(t),((t,e)=>{e.forEach(e=>{t.observe(e),c(e,"observed")})})(t,e)},F=t=>{var e;a&&!x(t._settings)&&(t._observer=new IntersectionObserver(e=>{e.forEach(e=>(t=>t.isIntersecting||t.intersectionRatio>0)(e)?O(e.target,e,t):((t,e,a)=>{const s=a._settings;p(s.callback_exit,t,e,a),s.load_delay&&N(t)})(e.target,e,t))},{root:(e=t._settings).container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))},G=t=>Array.prototype.slice.call(t),$=t=>t.container.querySelectorAll(t.elements_selector),D=t=>!(t=>null!==r(t,"ll-status"))(t)||(t=>"observed"===r(t,"ll-status"))(t),S=t=>(t=>"error"===r(t,"ll-status"))(t),U=(t,e)=>(t=>G(t).filter(D))(t||$(e)),V=t=>{const e=t._settings;var a;(a=$(e),G(a).filter(S)).forEach(t=>{m(t,e.class_error),(t=>{i(t,"ll-status",null)})(t)}),t.update()},j=function(e,a){var s;this._settings=l(e),this.loadingCount=0,F(this),s=this,t&&window.addEventListener("online",t=>{V(s)}),this.update(a)};j.prototype={update:function(t){const s=this._settings,o=U(t,s);this.toLoadCount=o.length,!e&&a?x(s)?R(o,s,this):T(this._observer,o):this.loadAll(o)},destroy:function(){this._observer&&this._observer.disconnect(),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){const e=this._settings;U(t,e).forEach(t=>{z(t,e,this)})},load:function(t){z(t,this._settings,this)}},j.load=(t,e)=>{const a=l(e);z(t,a)},t&&((t,e)=>{if(e)if(e.length)for(let a,s=0;a=e[s];s+=1)n(t,a);else n(t,e)})(j,window.lazyLoadOptions);export default j;
const e="undefined"!=typeof window,t=e&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=e&&"IntersectionObserver"in window,l=e&&"classList"in document.createElement("p"),s={elements_selector:"img",container:t||e?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_multi:"bg-multi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,use_native:!1},o=e=>Object.assign({},s,e),n=function(e,t){var a;let l=new e(t);try{a=new CustomEvent("LazyLoad::Initialized",{detail:{instance:l}})}catch(e){(a=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:l})}window.dispatchEvent(a)},r=(e,t)=>e.getAttribute("data-"+t),i=(e,t,a)=>{var l="data-"+t;null!==a?e.setAttribute(l,a):e.removeAttribute(l)},c=(e,t)=>i(e,"ll-status",t),d=(e,t)=>i(e,"ll-timeout",t),u=e=>r(e,"ll-timeout"),_=(e,t,a,l)=>{e&&(void 0===l?void 0===a?e(t):e(t,a):e(t,a,l))},g=(e,t)=>{l?e.classList.add(t):e.className+=(e.className?" ":"")+t},b=(e,t)=>{l?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},h=e=>e.llTempImage,m=e=>{e&&(e.loadingCount+=1)},p=e=>{let t=[];for(let a,l=0;a=e.children[l];l+=1)"SOURCE"===a.tagName&&t.push(a);return t},v=(e,t,a)=>{a&&e.setAttribute(t,a)},f=(e,t)=>{v(e,"sizes",r(e,t.data_sizes)),v(e,"srcset",r(e,t.data_srcset)),v(e,"src",r(e,t.data_src))},E={IMG:(e,t)=>{const a=e.parentNode;if(a&&"PICTURE"===a.tagName){p(a).forEach(e=>{f(e,t)})}f(e,t)},IFRAME:(e,t)=>{v(e,"src",r(e,t.data_src))},VIDEO:(e,t)=>{p(e).forEach(e=>{v(e,"src",r(e,t.data_src))}),v(e,"poster",r(e,t.data_poster)),v(e,"src",r(e,t.data_src)),e.load()}},I=(e,t,a)=>{const l=E[e.tagName];l&&(l(e,t),m(a),g(e,t.class_loading),c(e,"loading"),_(t.callback_loading,e,a),_(t.callback_reveal,e,a))},k=["IMG","IFRAME","VIDEO"],y=(e,t)=>{!t||t.toLoadCount||t.loadingCount||_(e.callback_finish,t)},w=(e,t,a)=>{e.addEventListener(t,a)},L=(e,t,a)=>{e.removeEventListener(t,a)},C=(e,t,a)=>{L(e,"load",t),L(e,"loadeddata",t),L(e,"error",a)},A=(e,t,a)=>{(e=>{delete e.llTempImage})(e),((e,t)=>{t&&(t.loadingCount-=1)})(0,a),b(e,t.class_loading)},z=(e,t,a)=>{const l=h(e)||e,s=n=>{((e,t,a,l)=>{A(t,a,l),g(t,a.class_loaded),c(t,"loaded"),_(a.callback_loaded,t,l),y(a,l)})(0,e,t,a),C(l,s,o)},o=n=>{((e,t,a,l)=>{A(t,a,l),g(t,a.class_error),c(t,"error"),_(a.callback_error,t,l),y(a,l)})(0,e,t,a),C(l,s,o)};((e,t,a)=>{w(e,"load",t),w(e,"loadeddata",t),w(e,"error",a)})(l,s,o)},N=(e,t)=>{t&&(t.toLoadCount-=1)},O=(e,t,a)=>{(e=>{e.llTempImage=document.createElement("img")})(e),z(e,t,a),((e,t,a)=>{const l=r(e,t.data_bg);l&&(e.style.backgroundImage=`url("${l}")`,h(e).setAttribute("src",l),m(a),g(e,t.class_loading),c(e,"loading"),_(t.callback_loading,e,a),_(t.callback_reveal,e,a))})(e,t,a),((e,t,a)=>{const l=r(e,t.data_bg_multi);l&&(e.style.backgroundImage=l,g(e,t.class_applied),c(e,"applied"),_(t.callback_applied,e,a))})(e,t,a)},M=(e,t,a)=>{(e=>k.indexOf(e.tagName)>-1)(e)?((e,t,a)=>{z(e,t,a),I(e,t,a)})(e,t,a):O(e,t,a),N(0,a),((e,t)=>{if(!t)return;const a=t._observer;a&&t._settings.auto_unobserve&&a.unobserve(e)})(e,a),y(t,a)},x=e=>{var t=u(e);t&&(clearTimeout(t),d(e,null))},R=(e,t,a)=>{const l=a._settings;_(l.callback_enter,e,t,a),l.load_delay?((e,t,a)=>{const l=t.load_delay;let s=u(e);s||(s=setTimeout((function(){M(e,t,a),x(e)}),l),d(e,s))})(e,l,a):M(e,l,a)},T=["IMG","IFRAME"],F=e=>e.use_native&&"loading"in HTMLImageElement.prototype,G=(e,t,a)=>{e.forEach(e=>{-1!==T.indexOf(e.tagName)&&(e.setAttribute("loading","lazy"),((e,t,a)=>{z(e,t,a),I(e,t,a),N(0,a),c(e,"native"),y(t,a)})(e,t,a))}),a.toLoadCount=0},$=(e,t)=>{(e=>{e.disconnect()})(e),((e,t)=>{t.forEach(t=>{e.observe(t),c(t,"observed")})})(e,t)},D=e=>{var t;a&&!F(e._settings)&&(e._observer=new IntersectionObserver(t=>{t.forEach(t=>(e=>e.isIntersecting||e.intersectionRatio>0)(t)?R(t.target,t,e):((e,t,a)=>{const l=a._settings;_(l.callback_exit,e,t,a),l.load_delay&&x(e)})(t.target,t,e))},{root:(t=e._settings).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))},S=e=>Array.prototype.slice.call(e),U=e=>e.container.querySelectorAll(e.elements_selector),V=e=>!(e=>null!==r(e,"ll-status"))(e)||(e=>"observed"===r(e,"ll-status"))(e),j=e=>(e=>"error"===r(e,"ll-status"))(e),q=(e,t)=>(e=>S(e).filter(V))(e||U(t)),H=e=>{const t=e._settings;var a;(a=U(t),S(a).filter(j)).forEach(e=>{b(e,t.class_error),(e=>{i(e,"ll-status",null)})(e)}),e.update()},P=function(t,a){var l;this._settings=o(t),this.loadingCount=0,D(this),l=this,e&&window.addEventListener("online",e=>{H(l)}),this.update(a)};P.prototype={update:function(e){const l=this._settings,s=q(e,l);this.toLoadCount=s.length,!t&&a?F(l)?G(s,l,this):$(this._observer,s):this.loadAll(s)},destroy:function(){this._observer&&this._observer.disconnect(),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(e){const t=this._settings;q(e,t).forEach(e=>{M(e,t,this)})},load:function(e){M(e,this._settings,this)}},P.load=(e,t)=>{const a=o(t);M(e,a)},e&&((e,t)=>{if(t)if(t.length)for(let a,l=0;a=t[l];l+=1)n(e,a);else n(e,t)})(P,window.lazyLoadOptions);export default P;

204

dist/lazyload.iife.js

@@ -36,3 +36,5 @@ var LazyLoad = (function () {

data_bg: "bg",
data_bg_multi: "bg-multi",
data_poster: "poster",
class_applied: "applied",
class_loading: "loading",

@@ -45,2 +47,3 @@ class_loaded: "loaded",

callback_exit: null,
callback_applied: null,
callback_loading: null,

@@ -100,2 +103,3 @@ callback_loaded: null,

var statusObserved = "observed";
var statusApplied = "applied";
var statusLoading = "loading";

@@ -144,2 +148,47 @@ var statusLoaded = "loaded";

var safeCallback = function safeCallback(callback, arg1, arg2, arg3) {
if (!callback) {
return;
}
if (arg3 !== undefined) {
callback(arg1, arg2, arg3);
return;
}
if (arg2 !== undefined) {
callback(arg1, arg2);
return;
}
callback(arg1);
};
var addClass = function addClass(element, className) {
if (supportsClassList) {
element.classList.add(className);
return;
}
element.className += (element.className ? " " : "") + className;
};
var removeClass = function removeClass(element, className) {
if (supportsClassList) {
element.classList.remove(className);
return;
}
element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
};
var addTempImage = function addTempImage(element) {
element.llTempImage = document.createElement("img");
};
var deleteTempImage = function deleteTempImage(element) {
delete element.llTempImage;
};
var getTempImage = function getTempImage(element) {
return element.llTempImage;
};
var increaseLoadingCount = function increaseLoadingCount(instance) {

@@ -196,14 +245,2 @@ if (!instance) return;

};
var setSourcesBgImage = function setSourcesBgImage(element, settings) {
var srcDataValue = getData(element, settings.data_src);
var bgDataValue = getData(element, settings.data_bg);
if (srcDataValue) {
element.style.backgroundImage = "url(\"".concat(srcDataValue, "\")");
}
if (bgDataValue) {
element.style.backgroundImage = bgDataValue;
}
};
var setSourcesFunctions = {

@@ -215,46 +252,37 @@ IMG: setSourcesImg,

var setSources = function setSources(element, settings, instance) {
var tagName = element.tagName;
var setSourcesFunction = setSourcesFunctions[tagName];
var setSourcesFunction = setSourcesFunctions[element.tagName];
if (!setSourcesFunction) return;
setSourcesFunction(element, settings); // Annotate and notify loading
if (setSourcesFunction) {
setSourcesFunction(element, settings);
increaseLoadingCount(instance);
} else {
setSourcesBgImage(element, settings);
}
increaseLoadingCount(instance);
addClass(element, settings.class_loading);
setStatus(element, statusLoading);
safeCallback(settings.callback_loading, element, instance);
safeCallback(settings.callback_reveal, element, instance); // <== DEPRECATED
};
var setBackground = function setBackground(element, settings, instance) {
var srcDataValue = getData(element, settings.data_bg); // TODO: GET 2X WHEN DEVICEPIXELRATIO >= 1.5
var addClass = function addClass(element, className) {
if (supportsClassList) {
element.classList.add(className);
return;
}
if (!srcDataValue) return;
element.style.backgroundImage = "url(\"".concat(srcDataValue, "\")");
getTempImage(element).setAttribute("src", srcDataValue); // Annotate and notify loading
element.className += (element.className ? " " : "") + className;
};
var removeClass = function removeClass(element, className) {
if (supportsClassList) {
element.classList.remove(className);
return;
}
increaseLoadingCount(instance);
addClass(element, settings.class_loading);
setStatus(element, statusLoading);
safeCallback(settings.callback_loading, element, instance);
safeCallback(settings.callback_reveal, element, instance); // <== DEPRECATED
}; // NOTE: THE TEMP IMAGE TRICK CANNOT BE DONE WITH data-multi-bg
// BECAUSE INSIDE ITS VALUES MUST BE WRAPPED WITH URL() AND ONE OF THEM
// COULD BE A GRADIENT BACKGROUND IMAGE
element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
};
var setMultiBackground = function setMultiBackground(element, settings, instance) {
var bgDataValue = getData(element, settings.data_bg_multi); // TODO: GET 2X WHEN DEVICEPIXELRATIO >= 1.5
var safeCallback = function safeCallback(callback, arg1, arg2, arg3) {
if (!callback) {
return;
}
if (!bgDataValue) return;
element.style.backgroundImage = bgDataValue; // Annotate and notify applied
if (arg3 !== undefined) {
callback(arg1, arg2, arg3);
return;
}
if (arg2 !== undefined) {
callback(arg1, arg2);
return;
}
callback(arg1);
addClass(element, settings.class_applied);
setStatus(element, statusApplied);
safeCallback(settings.callback_applied, element, instance);
};

@@ -265,9 +293,12 @@

var errorEventName = "error";
var elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"];
var hasLoadEvent = function hasLoadEvent(element) {
return elementsWithLoadEvent.indexOf(element.tagName) > -1;
};
var decreaseLoadingCount = function decreaseLoadingCount(settings, instance) {
if (!instance) return;
instance.loadingCount -= 1;
checkFinish(settings, instance);
};
var checkFinish = function checkFinish(settings, instance) {
if (instance.toLoadCount || instance.loadingCount) return;
if (!instance || instance.toLoadCount || instance.loadingCount) return;
safeCallback(settings.callback_finish, instance);

@@ -291,37 +322,40 @@ };

};
var loadHandler = function loadHandler(event, settings, instance) {
var element = event.target;
setStatus(element, statusLoaded);
var doneHandler = function doneHandler(element, settings, instance) {
deleteTempImage(element);
decreaseLoadingCount(settings, instance);
removeClass(element, settings.class_loading);
};
var loadHandler = function loadHandler(event, element, settings, instance) {
doneHandler(element, settings, instance);
addClass(element, settings.class_loaded);
setStatus(element, statusLoaded);
safeCallback(settings.callback_loaded, element, instance);
decreaseLoadingCount(settings, instance);
checkFinish(settings, instance);
};
var errorHandler = function errorHandler(event, settings, instance) {
var element = event.target;
var errorHandler = function errorHandler(event, element, settings, instance) {
doneHandler(element, settings, instance);
addClass(element, settings.class_error);
setStatus(element, statusError);
removeClass(element, settings.class_loading);
addClass(element, settings.class_error);
safeCallback(settings.callback_error, element, instance);
decreaseLoadingCount(settings, instance);
checkFinish(settings, instance);
};
var addOneShotEventListeners = function addOneShotEventListeners(element, settings, instance) {
var elementToListenTo = getTempImage(element) || element;
var _loadHandler = function _loadHandler(event) {
loadHandler(event, settings, instance);
removeEventListeners(element, _loadHandler, _errorHandler);
loadHandler(event, element, settings, instance);
removeEventListeners(elementToListenTo, _loadHandler, _errorHandler);
};
var _errorHandler = function _errorHandler(event) {
errorHandler(event, settings, instance);
removeEventListeners(element, _loadHandler, _errorHandler);
errorHandler(event, element, settings, instance);
removeEventListeners(elementToListenTo, _loadHandler, _errorHandler);
};
addEventListeners(element, _loadHandler, _errorHandler);
addEventListeners(elementToListenTo, _loadHandler, _errorHandler);
};
var manageableTags = ["IMG", "IFRAME", "VIDEO"];
var decreaseToLoadCount = function decreaseToLoadCount(settings, instance) {
if (!instance) return;
instance.toLoadCount -= 1;
checkFinish(settings, instance);
};

@@ -336,26 +370,32 @@ var unobserve = function unobserve(element, instance) {

};
var isManageableTag = function isManageableTag(element) {
return manageableTags.indexOf(element.tagName) > -1;
var loadBackground = function loadBackground(element, settings, instance) {
addTempImage(element);
addOneShotEventListeners(element, settings, instance);
setBackground(element, settings, instance);
setMultiBackground(element, settings, instance);
};
var enableLoading = function enableLoading(element, settings, instance) {
if (isManageableTag(element)) {
addOneShotEventListeners(element, settings, instance);
addClass(element, settings.class_loading);
}
var loadRegular = function loadRegular(element, settings, instance) {
addOneShotEventListeners(element, settings, instance);
setSources(element, settings, instance);
decreaseToLoadCount(settings, instance);
};
var load = function load(element, settings, instance) {
enableLoading(element, settings, instance);
setStatus(element, statusLoading);
safeCallback(settings.callback_loading, element, instance);
/* DEPRECATED, REMOVE IN V.15 => */
if (hasLoadEvent(element)) {
loadRegular(element, settings, instance);
} else {
loadBackground(element, settings, instance);
}
safeCallback(settings.callback_reveal, element, instance);
decreaseToLoadCount(settings, instance);
unobserve(element, instance);
checkFinish(settings, instance);
};
var loadNative = function loadNative(element, settings, instance) {
enableLoading(element, settings, instance);
addOneShotEventListeners(element, settings, instance);
setSources(element, settings, instance);
decreaseToLoadCount(settings, instance);
setStatus(element, statusNative);
checkFinish(settings, instance);
};

@@ -550,4 +590,4 @@

},
// DEPRECATED
load: function load$1(element) {
/* DEPRECATED, REMOVE IN V.15 */
load(element, this._settings, this);

@@ -554,0 +594,0 @@ }

2

dist/lazyload.iife.min.js

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

var LazyLoad=function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),o=n&&"IntersectionObserver"in window,a=n&&"classList"in document.createElement("p"),r={elements_selector:"img",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_poster:"poster",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,use_native:!1},i=function(n){return t({},r,n)},s=function(t,n){var e,o=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:o}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:o})}window.dispatchEvent(e)},c=function(t,n){return t.getAttribute("data-"+n)},l=function(t,n,e){var o="data-"+n;null!==e?t.setAttribute(o,e):t.removeAttribute(o)},u=function(t,n){return l(t,"ll-status",n)},d=function(t,n){return l(t,"ll-timeout",n)},f=function(t){return c(t,"ll-timeout")},_=function(t){for(var n,e=[],o=0;n=t.children[o];o+=1)"SOURCE"===n.tagName&&e.push(n);return e},v=function(t,n,e){e&&t.setAttribute(n,e)},g=function(t,n){v(t,"sizes",c(t,n.data_sizes)),v(t,"srcset",c(t,n.data_srcset)),v(t,"src",c(t,n.data_src))},h={IMG:function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&_(e).forEach((function(t){g(t,n)}));g(t,n)},IFRAME:function(t,n){v(t,"src",c(t,n.data_src))},VIDEO:function(t,n){_(t).forEach((function(t){v(t,"src",c(t,n.data_src))})),v(t,"poster",c(t,n.data_poster)),v(t,"src",c(t,n.data_src)),t.load()}},b=function(t,n,e){var o=t.tagName,a=h[o];a?(a(t,n),function(t){t&&(t.loadingCount+=1)}(e)):function(t,n){var e=c(t,n.data_src),o=c(t,n.data_bg);e&&(t.style.backgroundImage='url("'.concat(e,'")')),o&&(t.style.backgroundImage=o)}(t,n)},m=function(t,n){a?t.classList.add(n):t.className+=(t.className?" ":"")+n},p=function(t,n){a?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},E=function(t,n,e,o){t&&(void 0===o?void 0===e?t(n):t(n,e):t(n,e,o))},y=function(t,n){n&&(n.loadingCount-=1,L(t,n))},L=function(t,n){n.toLoadCount||n.loadingCount||E(t.callback_finish,n)},w=function(t,n,e){t.addEventListener(n,e)},I=function(t,n,e){t.removeEventListener(n,e)},k=function(t,n,e){I(t,"load",n),I(t,"loadeddata",n),I(t,"error",e)},C=function(t,n,e){var o=function o(r){!function(t,n,e){var o=t.target;u(o,"loaded"),p(o,n.class_loading),m(o,n.class_loaded),E(n.callback_loaded,o,e),y(n,e)}(r,n,e),k(t,o,a)},a=function a(r){!function(t,n,e){var o=t.target;u(o,"error"),p(o,n.class_loading),m(o,n.class_error),E(n.callback_error,o,e),y(n,e)}(r,n,e),k(t,o,a)};!function(t,n,e){w(t,"load",n),w(t,"loadeddata",n),w(t,"error",e)}(t,o,a)},A=["IMG","IFRAME","VIDEO"],z=function(t,n,e){(function(t){return A.indexOf(t.tagName)>-1})(t)&&(C(t,n,e),m(t,n.class_loading)),b(t,n,e),function(t,n){n&&(n.toLoadCount-=1,L(t,n))}(n,e)},O=function(t,n,e){z(t,n,e),u(t,"loading"),E(n.callback_loading,t,e),E(n.callback_reveal,t,e),function(t,n){if(n){var e=n._observer;e&&n._settings.auto_unobserve&&e.unobserve(t)}}(t,e)},N=function(t){var n=f(t);n&&(clearTimeout(n),d(t,null))},M=function(t,n,e){var o=e._settings;E(o.callback_enter,t,n,e),o.load_delay?function(t,n,e){var o=n.load_delay,a=f(t);a||(a=setTimeout((function(){O(t,n,e),N(t)}),o),d(t,a))}(t,o,e):O(t,o,e)},R=["IMG","IFRAME"],x=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},T=function(t,n,e){t.forEach((function(t){-1!==R.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){z(t,n,e),u(t,"native")}(t,n,e))})),e.toLoadCount=0},F=function(t,n){!function(t){t.disconnect()}(t),function(t,n){n.forEach((function(n){t.observe(n),u(n,"observed")}))}(t,n)},G=function(t){var n;o&&!x(t._settings)&&(t._observer=new IntersectionObserver((function(n){n.forEach((function(n){return function(t){return t.isIntersecting||t.intersectionRatio>0}(n)?M(n.target,n,t):function(t,n,e){var o=e._settings;E(o.callback_exit,t,n,e),o.load_delay&&N(t)}(n.target,n,t)}))}),{root:(n=t._settings).container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}))},j=function(t){return Array.prototype.slice.call(t)},D=function(t){return t.container.querySelectorAll(t.elements_selector)},P=function(t){return!function(t){return null!==c(t,"ll-status")}(t)||function(t){return"observed"===c(t,"ll-status")}(t)},S=function(t){return function(t){return"error"===c(t,"ll-status")}(t)},U=function(t,n){return function(t){return j(t).filter(P)}(t||D(n))},V=function(t){var n,e=t._settings;(n=D(e),j(n).filter(S)).forEach((function(t){p(t,e.class_error),function(t){l(t,"ll-status",null)}(t)})),t.update()},$=function(t,e){var o;this._settings=i(t),this.loadingCount=0,G(this),o=this,n&&window.addEventListener("online",(function(t){V(o)})),this.update(e)};return $.prototype={update:function(t){var n=this._settings,a=U(t,n);this.toLoadCount=a.length,!e&&o?x(n)?T(a,n,this):F(this._observer,a):this.loadAll(a)},destroy:function(){this._observer&&this._observer.disconnect(),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;U(t,e).forEach((function(t){O(t,e,n)}))},load:function(t){O(t,this._settings,this)}},$.load=function(t,n){var e=i(n);O(t,e)},n&&function(t,n){if(n)if(n.length)for(var e,o=0;e=n[o];o+=1)s(t,e);else s(t,n)}($,window.lazyLoadOptions),$}();
var LazyLoad=function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=n&&"IntersectionObserver"in window,o=n&&"classList"in document.createElement("p"),i={elements_selector:"img",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_multi:"bg-multi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,use_native:!1},r=function(n){return t({},i,n)},l=function(t,n){var e,a=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:a}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:a})}window.dispatchEvent(e)},c=function(t,n){return t.getAttribute("data-"+n)},s=function(t,n,e){var a="data-"+n;null!==e?t.setAttribute(a,e):t.removeAttribute(a)},u=function(t,n){return s(t,"ll-status",n)},d=function(t,n){return s(t,"ll-timeout",n)},f=function(t){return c(t,"ll-timeout")},_=function(t,n,e,a){t&&(void 0===a?void 0===e?t(n):t(n,e):t(n,e,a))},g=function(t,n){o?t.classList.add(n):t.className+=(t.className?" ":"")+n},v=function(t,n){o?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},b=function(t){return t.llTempImage},h=function(t){t&&(t.loadingCount+=1)},p=function(t){for(var n,e=[],a=0;n=t.children[a];a+=1)"SOURCE"===n.tagName&&e.push(n);return e},m=function(t,n,e){e&&t.setAttribute(n,e)},E=function(t,n){m(t,"sizes",c(t,n.data_sizes)),m(t,"srcset",c(t,n.data_srcset)),m(t,"src",c(t,n.data_src))},y={IMG:function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&p(e).forEach((function(t){E(t,n)}));E(t,n)},IFRAME:function(t,n){m(t,"src",c(t,n.data_src))},VIDEO:function(t,n){p(t).forEach((function(t){m(t,"src",c(t,n.data_src))})),m(t,"poster",c(t,n.data_poster)),m(t,"src",c(t,n.data_src)),t.load()}},I=function(t,n,e){var a=y[t.tagName];a&&(a(t,n),h(e),g(t,n.class_loading),u(t,"loading"),_(n.callback_loading,t,e),_(n.callback_reveal,t,e))},k=["IMG","IFRAME","VIDEO"],L=function(t,n){!n||n.toLoadCount||n.loadingCount||_(t.callback_finish,n)},w=function(t,n,e){t.addEventListener(n,e)},C=function(t,n,e){t.removeEventListener(n,e)},A=function(t,n,e){C(t,"load",n),C(t,"loadeddata",n),C(t,"error",e)},z=function(t,n,e){!function(t){delete t.llTempImage}(t),function(t,n){n&&(n.loadingCount-=1)}(0,e),v(t,n.class_loading)},O=function(t,n,e){var a=b(t)||t,o=function o(r){!function(t,n,e,a){z(n,e,a),g(n,e.class_loaded),u(n,"loaded"),_(e.callback_loaded,n,a),L(e,a)}(0,t,n,e),A(a,o,i)},i=function i(r){!function(t,n,e,a){z(n,e,a),g(n,e.class_error),u(n,"error"),_(e.callback_error,n,a),L(e,a)}(0,t,n,e),A(a,o,i)};!function(t,n,e){w(t,"load",n),w(t,"loadeddata",n),w(t,"error",e)}(a,o,i)},N=function(t,n){n&&(n.toLoadCount-=1)},M=function(t,n,e){!function(t){t.llTempImage=document.createElement("img")}(t),O(t,n,e),function(t,n,e){var a=c(t,n.data_bg);a&&(t.style.backgroundImage='url("'.concat(a,'")'),b(t).setAttribute("src",a),h(e),g(t,n.class_loading),u(t,"loading"),_(n.callback_loading,t,e),_(n.callback_reveal,t,e))}(t,n,e),function(t,n,e){var a=c(t,n.data_bg_multi);a&&(t.style.backgroundImage=a,g(t,n.class_applied),u(t,"applied"),_(n.callback_applied,t,e))}(t,n,e)},R=function(t,n,e){!function(t){return k.indexOf(t.tagName)>-1}(t)?M(t,n,e):function(t,n,e){O(t,n,e),I(t,n,e)}(t,n,e),N(0,e),function(t,n){if(n){var e=n._observer;e&&n._settings.auto_unobserve&&e.unobserve(t)}}(t,e),L(n,e)},T=function(t){var n=f(t);n&&(clearTimeout(n),d(t,null))},x=function(t,n,e){var a=e._settings;_(a.callback_enter,t,n,e),a.load_delay?function(t,n,e){var a=n.load_delay,o=f(t);o||(o=setTimeout((function(){R(t,n,e),T(t)}),a),d(t,o))}(t,a,e):R(t,a,e)},F=["IMG","IFRAME"],G=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},j=function(t,n,e){t.forEach((function(t){-1!==F.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){O(t,n,e),I(t,n,e),N(0,e),u(t,"native"),L(n,e)}(t,n,e))})),e.toLoadCount=0},D=function(t,n){!function(t){t.disconnect()}(t),function(t,n){n.forEach((function(n){t.observe(n),u(n,"observed")}))}(t,n)},P=function(t){var n;a&&!G(t._settings)&&(t._observer=new IntersectionObserver((function(n){n.forEach((function(n){return function(t){return t.isIntersecting||t.intersectionRatio>0}(n)?x(n.target,n,t):function(t,n,e){var a=e._settings;_(a.callback_exit,t,n,e),a.load_delay&&T(t)}(n.target,n,t)}))}),{root:(n=t._settings).container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}))},S=function(t){return Array.prototype.slice.call(t)},U=function(t){return t.container.querySelectorAll(t.elements_selector)},V=function(t){return!function(t){return null!==c(t,"ll-status")}(t)||function(t){return"observed"===c(t,"ll-status")}(t)},$=function(t){return function(t){return"error"===c(t,"ll-status")}(t)},q=function(t,n){return function(t){return S(t).filter(V)}(t||U(n))},H=function(t){var n,e=t._settings;(n=U(e),S(n).filter($)).forEach((function(t){v(t,e.class_error),function(t){s(t,"ll-status",null)}(t)})),t.update()},B=function(t,e){var a;this._settings=r(t),this.loadingCount=0,P(this),a=this,n&&window.addEventListener("online",(function(t){H(a)})),this.update(e)};return B.prototype={update:function(t){var n=this._settings,o=q(t,n);this.toLoadCount=o.length,!e&&a?G(n)?j(o,n,this):D(this._observer,o):this.loadAll(o)},destroy:function(){this._observer&&this._observer.disconnect(),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;q(t,e).forEach((function(t){R(t,e,n)}))},load:function(t){R(t,this._settings,this)}},B.load=function(t,n){var e=r(n);R(t,e)},n&&function(t,n){if(n)if(n.length)for(var e,a=0;e=n[a];a+=1)l(t,e);else l(t,n)}(B,window.lazyLoadOptions),B}();

204

dist/lazyload.js

@@ -39,3 +39,5 @@ (function (global, factory) {

data_bg: "bg",
data_bg_multi: "bg-multi",
data_poster: "poster",
class_applied: "applied",
class_loading: "loading",

@@ -48,2 +50,3 @@ class_loaded: "loaded",

callback_exit: null,
callback_applied: null,
callback_loading: null,

@@ -103,2 +106,3 @@ callback_loaded: null,

var statusObserved = "observed";
var statusApplied = "applied";
var statusLoading = "loading";

@@ -147,2 +151,47 @@ var statusLoaded = "loaded";

var safeCallback = function safeCallback(callback, arg1, arg2, arg3) {
if (!callback) {
return;
}
if (arg3 !== undefined) {
callback(arg1, arg2, arg3);
return;
}
if (arg2 !== undefined) {
callback(arg1, arg2);
return;
}
callback(arg1);
};
var addClass = function addClass(element, className) {
if (supportsClassList) {
element.classList.add(className);
return;
}
element.className += (element.className ? " " : "") + className;
};
var removeClass = function removeClass(element, className) {
if (supportsClassList) {
element.classList.remove(className);
return;
}
element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
};
var addTempImage = function addTempImage(element) {
element.llTempImage = document.createElement("img");
};
var deleteTempImage = function deleteTempImage(element) {
delete element.llTempImage;
};
var getTempImage = function getTempImage(element) {
return element.llTempImage;
};
var increaseLoadingCount = function increaseLoadingCount(instance) {

@@ -199,14 +248,2 @@ if (!instance) return;

};
var setSourcesBgImage = function setSourcesBgImage(element, settings) {
var srcDataValue = getData(element, settings.data_src);
var bgDataValue = getData(element, settings.data_bg);
if (srcDataValue) {
element.style.backgroundImage = "url(\"".concat(srcDataValue, "\")");
}
if (bgDataValue) {
element.style.backgroundImage = bgDataValue;
}
};
var setSourcesFunctions = {

@@ -218,46 +255,37 @@ IMG: setSourcesImg,

var setSources = function setSources(element, settings, instance) {
var tagName = element.tagName;
var setSourcesFunction = setSourcesFunctions[tagName];
var setSourcesFunction = setSourcesFunctions[element.tagName];
if (!setSourcesFunction) return;
setSourcesFunction(element, settings); // Annotate and notify loading
if (setSourcesFunction) {
setSourcesFunction(element, settings);
increaseLoadingCount(instance);
} else {
setSourcesBgImage(element, settings);
}
increaseLoadingCount(instance);
addClass(element, settings.class_loading);
setStatus(element, statusLoading);
safeCallback(settings.callback_loading, element, instance);
safeCallback(settings.callback_reveal, element, instance); // <== DEPRECATED
};
var setBackground = function setBackground(element, settings, instance) {
var srcDataValue = getData(element, settings.data_bg); // TODO: GET 2X WHEN DEVICEPIXELRATIO >= 1.5
var addClass = function addClass(element, className) {
if (supportsClassList) {
element.classList.add(className);
return;
}
if (!srcDataValue) return;
element.style.backgroundImage = "url(\"".concat(srcDataValue, "\")");
getTempImage(element).setAttribute("src", srcDataValue); // Annotate and notify loading
element.className += (element.className ? " " : "") + className;
};
var removeClass = function removeClass(element, className) {
if (supportsClassList) {
element.classList.remove(className);
return;
}
increaseLoadingCount(instance);
addClass(element, settings.class_loading);
setStatus(element, statusLoading);
safeCallback(settings.callback_loading, element, instance);
safeCallback(settings.callback_reveal, element, instance); // <== DEPRECATED
}; // NOTE: THE TEMP IMAGE TRICK CANNOT BE DONE WITH data-multi-bg
// BECAUSE INSIDE ITS VALUES MUST BE WRAPPED WITH URL() AND ONE OF THEM
// COULD BE A GRADIENT BACKGROUND IMAGE
element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
};
var setMultiBackground = function setMultiBackground(element, settings, instance) {
var bgDataValue = getData(element, settings.data_bg_multi); // TODO: GET 2X WHEN DEVICEPIXELRATIO >= 1.5
var safeCallback = function safeCallback(callback, arg1, arg2, arg3) {
if (!callback) {
return;
}
if (!bgDataValue) return;
element.style.backgroundImage = bgDataValue; // Annotate and notify applied
if (arg3 !== undefined) {
callback(arg1, arg2, arg3);
return;
}
if (arg2 !== undefined) {
callback(arg1, arg2);
return;
}
callback(arg1);
addClass(element, settings.class_applied);
setStatus(element, statusApplied);
safeCallback(settings.callback_applied, element, instance);
};

@@ -268,9 +296,12 @@

var errorEventName = "error";
var elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"];
var hasLoadEvent = function hasLoadEvent(element) {
return elementsWithLoadEvent.indexOf(element.tagName) > -1;
};
var decreaseLoadingCount = function decreaseLoadingCount(settings, instance) {
if (!instance) return;
instance.loadingCount -= 1;
checkFinish(settings, instance);
};
var checkFinish = function checkFinish(settings, instance) {
if (instance.toLoadCount || instance.loadingCount) return;
if (!instance || instance.toLoadCount || instance.loadingCount) return;
safeCallback(settings.callback_finish, instance);

@@ -294,37 +325,40 @@ };

};
var loadHandler = function loadHandler(event, settings, instance) {
var element = event.target;
setStatus(element, statusLoaded);
var doneHandler = function doneHandler(element, settings, instance) {
deleteTempImage(element);
decreaseLoadingCount(settings, instance);
removeClass(element, settings.class_loading);
};
var loadHandler = function loadHandler(event, element, settings, instance) {
doneHandler(element, settings, instance);
addClass(element, settings.class_loaded);
setStatus(element, statusLoaded);
safeCallback(settings.callback_loaded, element, instance);
decreaseLoadingCount(settings, instance);
checkFinish(settings, instance);
};
var errorHandler = function errorHandler(event, settings, instance) {
var element = event.target;
var errorHandler = function errorHandler(event, element, settings, instance) {
doneHandler(element, settings, instance);
addClass(element, settings.class_error);
setStatus(element, statusError);
removeClass(element, settings.class_loading);
addClass(element, settings.class_error);
safeCallback(settings.callback_error, element, instance);
decreaseLoadingCount(settings, instance);
checkFinish(settings, instance);
};
var addOneShotEventListeners = function addOneShotEventListeners(element, settings, instance) {
var elementToListenTo = getTempImage(element) || element;
var _loadHandler = function _loadHandler(event) {
loadHandler(event, settings, instance);
removeEventListeners(element, _loadHandler, _errorHandler);
loadHandler(event, element, settings, instance);
removeEventListeners(elementToListenTo, _loadHandler, _errorHandler);
};
var _errorHandler = function _errorHandler(event) {
errorHandler(event, settings, instance);
removeEventListeners(element, _loadHandler, _errorHandler);
errorHandler(event, element, settings, instance);
removeEventListeners(elementToListenTo, _loadHandler, _errorHandler);
};
addEventListeners(element, _loadHandler, _errorHandler);
addEventListeners(elementToListenTo, _loadHandler, _errorHandler);
};
var manageableTags = ["IMG", "IFRAME", "VIDEO"];
var decreaseToLoadCount = function decreaseToLoadCount(settings, instance) {
if (!instance) return;
instance.toLoadCount -= 1;
checkFinish(settings, instance);
};

@@ -339,26 +373,32 @@ var unobserve = function unobserve(element, instance) {

};
var isManageableTag = function isManageableTag(element) {
return manageableTags.indexOf(element.tagName) > -1;
var loadBackground = function loadBackground(element, settings, instance) {
addTempImage(element);
addOneShotEventListeners(element, settings, instance);
setBackground(element, settings, instance);
setMultiBackground(element, settings, instance);
};
var enableLoading = function enableLoading(element, settings, instance) {
if (isManageableTag(element)) {
addOneShotEventListeners(element, settings, instance);
addClass(element, settings.class_loading);
}
var loadRegular = function loadRegular(element, settings, instance) {
addOneShotEventListeners(element, settings, instance);
setSources(element, settings, instance);
decreaseToLoadCount(settings, instance);
};
var load = function load(element, settings, instance) {
enableLoading(element, settings, instance);
setStatus(element, statusLoading);
safeCallback(settings.callback_loading, element, instance);
/* DEPRECATED, REMOVE IN V.15 => */
if (hasLoadEvent(element)) {
loadRegular(element, settings, instance);
} else {
loadBackground(element, settings, instance);
}
safeCallback(settings.callback_reveal, element, instance);
decreaseToLoadCount(settings, instance);
unobserve(element, instance);
checkFinish(settings, instance);
};
var loadNative = function loadNative(element, settings, instance) {
enableLoading(element, settings, instance);
addOneShotEventListeners(element, settings, instance);
setSources(element, settings, instance);
decreaseToLoadCount(settings, instance);
setStatus(element, statusNative);
checkFinish(settings, instance);
};

@@ -553,4 +593,4 @@

},
// DEPRECATED
load: function load$1(element) {
/* DEPRECATED, REMOVE IN V.15 */
load(element, this._settings, this);

@@ -557,0 +597,0 @@ }

2

dist/lazyload.min.js

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

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).LazyLoad=n()}(this,(function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),o=n&&"IntersectionObserver"in window,a=n&&"classList"in document.createElement("p"),r={elements_selector:"img",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_poster:"poster",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,use_native:!1},i=function(n){return t({},r,n)},s=function(t,n){var e,o=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:o}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:o})}window.dispatchEvent(e)},c=function(t,n){return t.getAttribute("data-"+n)},l=function(t,n,e){var o="data-"+n;null!==e?t.setAttribute(o,e):t.removeAttribute(o)},u=function(t,n){return l(t,"ll-status",n)},d=function(t,n){return l(t,"ll-timeout",n)},f=function(t){return c(t,"ll-timeout")},_=function(t){for(var n,e=[],o=0;n=t.children[o];o+=1)"SOURCE"===n.tagName&&e.push(n);return e},v=function(t,n,e){e&&t.setAttribute(n,e)},g=function(t,n){v(t,"sizes",c(t,n.data_sizes)),v(t,"srcset",c(t,n.data_srcset)),v(t,"src",c(t,n.data_src))},h={IMG:function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&_(e).forEach((function(t){g(t,n)}));g(t,n)},IFRAME:function(t,n){v(t,"src",c(t,n.data_src))},VIDEO:function(t,n){_(t).forEach((function(t){v(t,"src",c(t,n.data_src))})),v(t,"poster",c(t,n.data_poster)),v(t,"src",c(t,n.data_src)),t.load()}},b=function(t,n,e){var o=t.tagName,a=h[o];a?(a(t,n),function(t){t&&(t.loadingCount+=1)}(e)):function(t,n){var e=c(t,n.data_src),o=c(t,n.data_bg);e&&(t.style.backgroundImage='url("'.concat(e,'")')),o&&(t.style.backgroundImage=o)}(t,n)},p=function(t,n){a?t.classList.add(n):t.className+=(t.className?" ":"")+n},m=function(t,n){a?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},y=function(t,n,e,o){t&&(void 0===o?void 0===e?t(n):t(n,e):t(n,e,o))},E=function(t,n){n&&(n.loadingCount-=1,L(t,n))},L=function(t,n){n.toLoadCount||n.loadingCount||y(t.callback_finish,n)},w=function(t,n,e){t.addEventListener(n,e)},I=function(t,n,e){t.removeEventListener(n,e)},k=function(t,n,e){I(t,"load",n),I(t,"loadeddata",n),I(t,"error",e)},C=function(t,n,e){var o=function o(r){!function(t,n,e){var o=t.target;u(o,"loaded"),m(o,n.class_loading),p(o,n.class_loaded),y(n.callback_loaded,o,e),E(n,e)}(r,n,e),k(t,o,a)},a=function a(r){!function(t,n,e){var o=t.target;u(o,"error"),m(o,n.class_loading),p(o,n.class_error),y(n.callback_error,o,e),E(n,e)}(r,n,e),k(t,o,a)};!function(t,n,e){w(t,"load",n),w(t,"loadeddata",n),w(t,"error",e)}(t,o,a)},A=["IMG","IFRAME","VIDEO"],z=function(t,n,e){(function(t){return A.indexOf(t.tagName)>-1})(t)&&(C(t,n,e),p(t,n.class_loading)),b(t,n,e),function(t,n){n&&(n.toLoadCount-=1,L(t,n))}(n,e)},O=function(t,n,e){z(t,n,e),u(t,"loading"),y(n.callback_loading,t,e),y(n.callback_reveal,t,e),function(t,n){if(n){var e=n._observer;e&&n._settings.auto_unobserve&&e.unobserve(t)}}(t,e)},N=function(t){var n=f(t);n&&(clearTimeout(n),d(t,null))},x=function(t,n,e){var o=e._settings;y(o.callback_enter,t,n,e),o.load_delay?function(t,n,e){var o=n.load_delay,a=f(t);a||(a=setTimeout((function(){O(t,n,e),N(t)}),o),d(t,a))}(t,o,e):O(t,o,e)},M=["IMG","IFRAME"],R=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},T=function(t,n,e){t.forEach((function(t){-1!==M.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){z(t,n,e),u(t,"native")}(t,n,e))})),e.toLoadCount=0},j=function(t,n){!function(t){t.disconnect()}(t),function(t,n){n.forEach((function(n){t.observe(n),u(n,"observed")}))}(t,n)},F=function(t){var n;o&&!R(t._settings)&&(t._observer=new IntersectionObserver((function(n){n.forEach((function(n){return function(t){return t.isIntersecting||t.intersectionRatio>0}(n)?x(n.target,n,t):function(t,n,e){var o=e._settings;y(o.callback_exit,t,n,e),o.load_delay&&N(t)}(n.target,n,t)}))}),{root:(n=t._settings).container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}))},G=function(t){return Array.prototype.slice.call(t)},D=function(t){return t.container.querySelectorAll(t.elements_selector)},P=function(t){return!function(t){return null!==c(t,"ll-status")}(t)||function(t){return"observed"===c(t,"ll-status")}(t)},S=function(t){return function(t){return"error"===c(t,"ll-status")}(t)},U=function(t,n){return function(t){return G(t).filter(P)}(t||D(n))},V=function(t){var n,e=t._settings;(n=D(e),G(n).filter(S)).forEach((function(t){m(t,e.class_error),function(t){l(t,"ll-status",null)}(t)})),t.update()},$=function(t,e){var o;this._settings=i(t),this.loadingCount=0,F(this),o=this,n&&window.addEventListener("online",(function(t){V(o)})),this.update(e)};return $.prototype={update:function(t){var n=this._settings,a=U(t,n);this.toLoadCount=a.length,!e&&o?R(n)?T(a,n,this):j(this._observer,a):this.loadAll(a)},destroy:function(){this._observer&&this._observer.disconnect(),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;U(t,e).forEach((function(t){O(t,e,n)}))},load:function(t){O(t,this._settings,this)}},$.load=function(t,n){var e=i(n);O(t,e)},n&&function(t,n){if(n)if(n.length)for(var e,o=0;e=n[o];o+=1)s(t,e);else s(t,n)}($,window.lazyLoadOptions),$}));
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).LazyLoad=n()}(this,(function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),o=n&&"IntersectionObserver"in window,a=n&&"classList"in document.createElement("p"),i={elements_selector:"img",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_multi:"bg-multi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,use_native:!1},r=function(n){return t({},i,n)},l=function(t,n){var e,o=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:o}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:o})}window.dispatchEvent(e)},c=function(t,n){return t.getAttribute("data-"+n)},s=function(t,n,e){var o="data-"+n;null!==e?t.setAttribute(o,e):t.removeAttribute(o)},u=function(t,n){return s(t,"ll-status",n)},d=function(t,n){return s(t,"ll-timeout",n)},f=function(t){return c(t,"ll-timeout")},_=function(t,n,e,o){t&&(void 0===o?void 0===e?t(n):t(n,e):t(n,e,o))},g=function(t,n){a?t.classList.add(n):t.className+=(t.className?" ":"")+n},v=function(t,n){a?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},p=function(t){return t.llTempImage},b=function(t){t&&(t.loadingCount+=1)},h=function(t){for(var n,e=[],o=0;n=t.children[o];o+=1)"SOURCE"===n.tagName&&e.push(n);return e},m=function(t,n,e){e&&t.setAttribute(n,e)},y=function(t,n){m(t,"sizes",c(t,n.data_sizes)),m(t,"srcset",c(t,n.data_srcset)),m(t,"src",c(t,n.data_src))},E={IMG:function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&h(e).forEach((function(t){y(t,n)}));y(t,n)},IFRAME:function(t,n){m(t,"src",c(t,n.data_src))},VIDEO:function(t,n){h(t).forEach((function(t){m(t,"src",c(t,n.data_src))})),m(t,"poster",c(t,n.data_poster)),m(t,"src",c(t,n.data_src)),t.load()}},I=function(t,n,e){var o=E[t.tagName];o&&(o(t,n),b(e),g(t,n.class_loading),u(t,"loading"),_(n.callback_loading,t,e),_(n.callback_reveal,t,e))},k=["IMG","IFRAME","VIDEO"],L=function(t,n){!n||n.toLoadCount||n.loadingCount||_(t.callback_finish,n)},w=function(t,n,e){t.addEventListener(n,e)},C=function(t,n,e){t.removeEventListener(n,e)},A=function(t,n,e){C(t,"load",n),C(t,"loadeddata",n),C(t,"error",e)},z=function(t,n,e){!function(t){delete t.llTempImage}(t),function(t,n){n&&(n.loadingCount-=1)}(0,e),v(t,n.class_loading)},O=function(t,n,e){var o=p(t)||t,a=function a(r){!function(t,n,e,o){z(n,e,o),g(n,e.class_loaded),u(n,"loaded"),_(e.callback_loaded,n,o),L(e,o)}(0,t,n,e),A(o,a,i)},i=function i(r){!function(t,n,e,o){z(n,e,o),g(n,e.class_error),u(n,"error"),_(e.callback_error,n,o),L(e,o)}(0,t,n,e),A(o,a,i)};!function(t,n,e){w(t,"load",n),w(t,"loadeddata",n),w(t,"error",e)}(o,a,i)},N=function(t,n){n&&(n.toLoadCount-=1)},x=function(t,n,e){!function(t){t.llTempImage=document.createElement("img")}(t),O(t,n,e),function(t,n,e){var o=c(t,n.data_bg);o&&(t.style.backgroundImage='url("'.concat(o,'")'),p(t).setAttribute("src",o),b(e),g(t,n.class_loading),u(t,"loading"),_(n.callback_loading,t,e),_(n.callback_reveal,t,e))}(t,n,e),function(t,n,e){var o=c(t,n.data_bg_multi);o&&(t.style.backgroundImage=o,g(t,n.class_applied),u(t,"applied"),_(n.callback_applied,t,e))}(t,n,e)},M=function(t,n,e){!function(t){return k.indexOf(t.tagName)>-1}(t)?x(t,n,e):function(t,n,e){O(t,n,e),I(t,n,e)}(t,n,e),N(0,e),function(t,n){if(n){var e=n._observer;e&&n._settings.auto_unobserve&&e.unobserve(t)}}(t,e),L(n,e)},R=function(t){var n=f(t);n&&(clearTimeout(n),d(t,null))},T=function(t,n,e){var o=e._settings;_(o.callback_enter,t,n,e),o.load_delay?function(t,n,e){var o=n.load_delay,a=f(t);a||(a=setTimeout((function(){M(t,n,e),R(t)}),o),d(t,a))}(t,o,e):M(t,o,e)},j=["IMG","IFRAME"],F=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},G=function(t,n,e){t.forEach((function(t){-1!==j.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){O(t,n,e),I(t,n,e),N(0,e),u(t,"native"),L(n,e)}(t,n,e))})),e.toLoadCount=0},D=function(t,n){!function(t){t.disconnect()}(t),function(t,n){n.forEach((function(n){t.observe(n),u(n,"observed")}))}(t,n)},P=function(t){var n;o&&!F(t._settings)&&(t._observer=new IntersectionObserver((function(n){n.forEach((function(n){return function(t){return t.isIntersecting||t.intersectionRatio>0}(n)?T(n.target,n,t):function(t,n,e){var o=e._settings;_(o.callback_exit,t,n,e),o.load_delay&&R(t)}(n.target,n,t)}))}),{root:(n=t._settings).container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}))},S=function(t){return Array.prototype.slice.call(t)},U=function(t){return t.container.querySelectorAll(t.elements_selector)},V=function(t){return!function(t){return null!==c(t,"ll-status")}(t)||function(t){return"observed"===c(t,"ll-status")}(t)},$=function(t){return function(t){return"error"===c(t,"ll-status")}(t)},q=function(t,n){return function(t){return S(t).filter(V)}(t||U(n))},H=function(t){var n,e=t._settings;(n=U(e),S(n).filter($)).forEach((function(t){v(t,e.class_error),function(t){s(t,"ll-status",null)}(t)})),t.update()},B=function(t,e){var o;this._settings=r(t),this.loadingCount=0,P(this),o=this,n&&window.addEventListener("online",(function(t){H(o)})),this.update(e)};return B.prototype={update:function(t){var n=this._settings,a=q(t,n);this.toLoadCount=a.length,!e&&o?F(n)?G(a,n,this):D(this._observer,a):this.loadAll(a)},destroy:function(){this._observer&&this._observer.disconnect(),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;q(t,e).forEach((function(t){M(t,e,n)}))},load:function(t){M(t,this._settings,this)}},B.load=function(t,n){var e=r(n);M(t,e)},n&&function(t,n){if(n)if(n.length)for(var e,o=0;e=n[o];o+=1)l(t,e);else l(t,n)}(B,window.lazyLoadOptions),B}));

2

package.json
{
"name": "vanilla-lazyload",
"version": "14.0.1",
"version": "15.0.0",
"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.min.js",

33

README.md

@@ -79,3 +79,3 @@ LazyLoad is a fast, lightweight and flexible script that **speeds up your web application** by loading your content images, videos and iframes only **as they enter the viewport**. It's written in plain "vanilla" JavaScript, it leverages the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API, it works with [responsive images](https://alistapart.com/article/responsive-images-in-practice) and it supports native lazy loading. See [notable features](#-notable-features) for more.

```html
<div class="lazy" data-bg="url(lazy.jpg)"></div>
<div class="lazy" data-bg="lazy.jpg"></div>
```

@@ -86,3 +86,6 @@

```html
<div class="lazy" data-bg="url(lazy-head.jpg), url(lazy-body.jpg), linear-gradient(#fff, #ccc)">
<div
class="lazy"
data-bg-multi="url(lazy-head.jpg), url(lazy-body.jpg), linear-gradient(#fff, #ccc)"
>
...

@@ -94,5 +97,4 @@ </div>

- 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
- you need to use `url()` in the values of your `data-bg-multi` attribute
- ⚠ you shouldn't use background images to load content images, they're bad for SEO and for accessibility

@@ -119,4 +121,6 @@ #### Lazy video

The latest, recommended version of LazyLoad is **14.0.1**.
The latest, recommended version of LazyLoad is **15.0.0**.
Quickly understand how to upgrade from a previous version reading the [practical upgrade guide](UPGRADE.md).
### To polyfill or not to polyfill IntersectionObserver?

@@ -135,3 +139,3 @@

```html
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@14.0.1/dist/lazyload.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.0.0/dist/lazyload.min.js"></script>
```

@@ -143,3 +147,3 @@

<script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.7.0/intersection-observer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@14.0.1/dist/lazyload.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.0.0/dist/lazyload.min.js"></script>
```

@@ -177,3 +181,3 @@

```js
var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@14.0.1/dist/lazyload.amd.min.js";
var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.0.0/dist/lazyload.amd.min.js";
var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/intersection-observer-amd@2.0.1/intersection-observer-amd.js";

@@ -224,3 +228,3 @@

async
src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@14.0.1/dist/lazyload.min.js"
src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.0.0/dist/lazyload.min.js"
></script>

@@ -258,3 +262,3 @@ ```

async
src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@14.0.1/dist/lazyload.min.js"
src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.0.0/dist/lazyload.min.js"
></script>

@@ -634,7 +638,9 @@ ```

| `thresholds` | Similar to `threshold`, but accepting multiple values and both `px` and `%` units. It maps directly to the `rootMargin` property of IntersectionObserver ([read more](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)), so it must be a string with a syntax similar to the CSS `margin` property. You can use it when you need to have different thresholds for the scrolling area. It overrides `threshold` when passed. | `null` | `"500px 10%"` |
| `data_src` | The name of the data attribute containing the original image source, excluding the `"data-"` part. E.g. if your data attribute is named `"data-src"`, just pass `"src"` | `"src"` | `"lazy-src"` |
| `data_srcset` | The name of the data attribute containing the original image source set in either `img` and `source` tags, excluding the `"data-"` part. E.g. if your data attribute is named `"data-srcset"`, just pass `"srcset"` | `"srcset"` | `"lazy-srcset"` |
| `data_src` | The name of the data attribute containing the element source to load, excluding the `"data-"` part. E.g. if your data attribute is named `"data-src"`, just pass `"src"` | `"src"` | `"lazy-src"` |
| `data_srcset` | The name of the data attribute containing the image source set to load, in either `img` and `source` tags, excluding the `"data-"` part. E.g. if your data attribute is named `"data-srcset"`, just pass `"srcset"` | `"srcset"` | `"lazy-srcset"` |
| `data_sizes` | The name of the data attribute containing the sizes attribute to use, excluding the `"data-"` part. E.g. if your data attribute is named `"data-sizes"`, just pass `"sizes"` | `"sizes"` | `"lazy-sizes"` |
| `data_bg` | The name of the data attribute containing the value of `background-image` to load lazily, excluding the `"data-"` part. E.g. if your data attribute is named `"data-bg"`, just pass `"bg"`. The attribute value must be a valid value for `background-image`, including the `url()` part of the CSS instruction. | `"bg"` | `"lazy-bg"` |
| `data_bg_multi` | The name of the data attribute containing the value of multiple `background-image` to load lazily, excluding the `"data-"` part. E.g. if your data attribute is named `"data-bg-multi"`, just pass `"bg-multi"`. The attribute value must be a valid value for `background-image`, including the `url()` part of the CSS instruction. | `"bg-multi"` | `"lazy-bg-multi"` |
| `data_poster` | The name of the data attribute containing the value of `poster` to load lazily, excluding the `"data-"` part. E.g. if your data attribute is named `"data-poster"`, just pass `"poster"`. | `"poster"` | `"lazy-poster"` |
| `class_applied` | The class applied to the multiple background elements after the multiple background was applied | `"applied"` | `"lazy-applied"` |
| `class_loading` | The class applied to the elements while the loading is in progress. | `"loading"` | `"lazy-loading"` |

@@ -647,2 +653,3 @@ | `class_loaded` | The class applied to the elements when the loading is complete. | `"loaded"` | `"lazy-loaded"` |

| `callback_exit` | A callback function which is called whenever an element exits the viewport. Arguments: DOM element, intersection observer entry, lazyload instance. | `null` | `(el)=>{console.log("Exited", el)}` |
| `callback_applied` | A callback function which is called whenever a multiple background element starts loading. Arguments: DOM element, lazyload instance. | `null` | `(el)=>{console.log("Applied", el)}` |
| `callback_loading` | A callback function which is called whenever an element starts loading. Arguments: DOM element, lazyload instance. | `null` | `(el)=>{console.log("Loading", el)}` |

@@ -649,0 +656,0 @@ | `callback_reveal` | **⚠ DEPRECATED: use `callback_loading` instead.** A callback function which is called whenever an element starts loading. Arguments: DOM element, lazyload instance. | `null` | `(el)=>{console.log("Loading", el)}` |

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