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 15.1.1 to 15.2.0

36

CHANGELOG.md

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

#### 15.2.0
OPTIMIZE FOR SLOW CONNECTIONS WITH `cancel_on_exit`
Want to optimize speed for users who scroll down fast on a slow connection? Just set `cancel_on_exit: true` and LazyLoad will cancel the download of images exiting the viewport while still loading, eventually restoring the original attributes.
- Introduced the new `cancel_on_exit` option.
- Introduced the `callback_cancel` option, just in case you want to perform any additional action whenever a download gets canceled by `cancel_on_exit`.
- Created a new demo named `cancel_on_exit.html` so you can try the new `cancel_on_exit` option live.
- Set `cancel_on_exit` to `true` in the following demos, so you can test how it behaves...
- `image_ph_inline.html`, with an inline SVG placeholder
- `image_ph_external.html`, with an external SVG placeholder
- `delay_test.html`, in conjuction with the `delay_load` option
- `fade_in.html`, with a beautiful fade-in effect.
The `cancel_on_exit` option applies only to images so to the `img` (and `picture`) tags. It doesn't work for background images, `iframe`s nor `video`s.
The `cancel_on_exit` option will probably default to `true` starting from the next major version, so give it a try! And please report your feedback in the comments of [#438](https://github.com/verlok/lazyload/issues/438).
API
- Added the `resetElementStatus()` method for when you need to tell LazyLoad to consider an image (or other DOM element) again. This is particularly useful if you change the `data-src` attribute after the previous `data-src` was loaded). See the [API section](README.md#-api) in the README file for more information.
FIX
- The `callback_exit` callback was called several times (for every images out of the viewport) at instance creation or upon `update()` calls. Now the callback is properly called only when any element exits the viewport.
INTERNALS
- Improved script performance by reducing the number of event listeners used for loading elements.
- Changed the values that the (internally used) `data-ll-status` attribute can take. Removed the status `"observed"` (it was useless) and introduced status `"delayed"`.
#### 15.1.1

@@ -31,3 +63,3 @@

**Like this project? 👍☕ [Buy me a coffee!](https://www.buymeacoffee.com/verlok)**
**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**

@@ -73,3 +105,3 @@ ---

**Like this project? 👍☕ [Buy me a coffee!](https://www.buymeacoffee.com/verlok)**
**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**

@@ -76,0 +108,0 @@ ---

274

dist/lazyload.amd.js

@@ -46,2 +46,3 @@ define(function () { 'use strict';

auto_unobserve: true,
cancel_on_exit: false,
callback_enter: null,

@@ -54,2 +55,3 @@ callback_exit: null,

callback_finish: null,
callback_cancel: null,
use_native: false

@@ -104,6 +106,6 @@ };

var statusObserved = "observed";
var statusApplied = "applied";
var statusDelayed = "delayed";
var statusLoading = "loading";
var statusLoaded = "loaded";
var statusApplied = "applied";
var statusError = "error";

@@ -128,4 +130,4 @@ var statusNative = "native";

};
var resetStatus = function resetStatus(element) {
return setData(element, statusDataName, null);
var getStatus = function getStatus(element) {
return getData(element, statusDataName);
};

@@ -135,11 +137,21 @@ var setStatus = function setStatus(element, status) {

};
var hasAnyStatus = function hasAnyStatus(element) {
return getData(element, statusDataName) !== null;
var resetStatus = function resetStatus(element) {
return setStatus(element, null);
};
var hasStatusObserved = function hasStatusObserved(element) {
return getData(element, statusDataName) === statusObserved;
var hasEmptyStatus = function hasEmptyStatus(element) {
return getStatus(element) === null;
};
var hasStatusLoading = function hasStatusLoading(element) {
return getStatus(element) === statusLoading;
};
var hasStatusError = function hasStatusError(element) {
return getData(element, statusDataName) === statusError;
return getStatus(element) === statusError;
};
var hasStatusDelayed = function hasStatusDelayed(element) {
return getStatus(element) === statusDelayed;
};
var statusesAfterLoading = [statusLoading, statusApplied, statusLoaded, statusError];
var hasStatusAfterLoading = function hasStatusAfterLoading(element) {
return statusesAfterLoading.indexOf(getStatus(element)) > -1;
};
var setTimeoutData = function setTimeoutData(element, value) {

@@ -197,2 +209,17 @@ return setData(element, timeoutDataName, value);

var unobserve = function unobserve(element, settings, instance) {
if (!instance) return;
var observer = instance._observer;
if (!observer || !settings.auto_unobserve) return;
observer.unobserve(element);
};
var resetObserver = function resetObserver(observer) {
observer.disconnect();
};
var _src_ = "src";
var _srcset_ = "srcset";
var _sizes_ = "sizes";
var _poster_ = "poster";
var _PICTURE_ = "PICTURE";
var increaseLoadingCount = function increaseLoadingCount(instance) {

@@ -220,21 +247,61 @@ if (!instance) return;

};
var resetAttribute = function resetAttribute(element, attrName) {
element.removeAttribute(attrName);
};
var hasOriginalAttributes = function hasOriginalAttributes(element) {
return !!element.llOriginalAttrs;
};
var saveOriginalImageAttributes = function saveOriginalImageAttributes(element) {
if (hasOriginalAttributes(element)) return;
var originalAttributes = {};
originalAttributes[_src_] = element.getAttribute(_src_);
originalAttributes[_srcset_] = element.getAttribute(_srcset_);
originalAttributes[_sizes_] = element.getAttribute(_sizes_);
element.llOriginalAttrs = originalAttributes;
};
var restoreOriginalImageAttributes = function restoreOriginalImageAttributes(element) {
if (!hasOriginalAttributes(element)) return;
var originalAttributes = element.llOriginalAttrs;
setAttributeIfValue(element, _src_, originalAttributes[_src_]);
setAttributeIfValue(element, _srcset_, originalAttributes[_srcset_]);
setAttributeIfValue(element, _sizes_, originalAttributes[_sizes_]);
};
var setImageAttributes = function setImageAttributes(element, settings) {
setAttributeIfValue(element, "sizes", getData(element, settings.data_sizes));
setAttributeIfValue(element, "srcset", getData(element, settings.data_srcset));
setAttributeIfValue(element, "src", getData(element, settings.data_src));
setAttributeIfValue(element, _sizes_, getData(element, settings.data_sizes));
setAttributeIfValue(element, _srcset_, getData(element, settings.data_srcset));
setAttributeIfValue(element, _src_, getData(element, settings.data_src));
};
var resetImageAttributes = function resetImageAttributes(element) {
resetAttribute(element, _src_);
resetAttribute(element, _srcset_);
resetAttribute(element, _sizes_);
};
var forEachPictureSource = function forEachPictureSource(element, fn) {
var parent = element.parentNode;
if (!parent || parent.tagName !== _PICTURE_) return;
var sourceTags = getSourceTags(parent);
sourceTags.forEach(fn);
};
var restoreOriginalAttributesImg = function restoreOriginalAttributesImg(element) {
forEachPictureSource(element, function (sourceTag) {
restoreOriginalImageAttributes(sourceTag);
});
restoreOriginalImageAttributes(element);
};
var setSourcesImg = function setSourcesImg(element, settings) {
var parent = element.parentNode;
if (parent && parent.tagName === "PICTURE") {
var sourceTags = getSourceTags(parent);
sourceTags.forEach(function (sourceTag) {
setImageAttributes(sourceTag, settings);
});
}
forEachPictureSource(element, function (sourceTag) {
saveOriginalImageAttributes(sourceTag);
setImageAttributes(sourceTag, settings);
});
saveOriginalImageAttributes(element);
setImageAttributes(element, settings);
};
var resetSourcesImg = function resetSourcesImg(element) {
forEachPictureSource(element, function (sourceTag) {
resetImageAttributes(sourceTag);
});
resetImageAttributes(element);
};
var setSourcesIframe = function setSourcesIframe(element, settings) {
setAttributeIfValue(element, "src", getData(element, settings.data_src));
setAttributeIfValue(element, _src_, getData(element, settings.data_src));
};

@@ -244,6 +311,6 @@ var setSourcesVideo = function setSourcesVideo(element, settings) {

sourceTags.forEach(function (sourceTag) {
setAttributeIfValue(sourceTag, "src", getData(sourceTag, settings.data_src));
setAttributeIfValue(sourceTag, _src_, getData(sourceTag, settings.data_src));
});
setAttributeIfValue(element, "poster", getData(element, settings.data_poster));
setAttributeIfValue(element, "src", getData(element, settings.data_src));
setAttributeIfValue(element, _poster_, getData(element, settings.data_poster));
setAttributeIfValue(element, _src_, getData(element, settings.data_src));
element.load();

@@ -256,13 +323,2 @@ };

};
var setSources = function setSources(element, settings, instance) {
var 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
};
var setBackground = function setBackground(element, settings, instance) {

@@ -274,3 +330,3 @@ var bg1xValue = getData(element, settings.data_bg);

element.style.backgroundImage = "url(\"".concat(bgDataValue, "\")");
getTempImage(element).setAttribute("src", bgDataValue); // Annotate and notify loading
getTempImage(element).setAttribute(_src_, bgDataValue); // Annotate and notify loading

@@ -295,5 +351,18 @@ increaseLoadingCount(instance);

setStatus(element, statusApplied);
unobserve(element, settings, instance); // Unobserve here because we can't do it on load
safeCallback(settings.callback_applied, element, instance);
};
var setSources = function setSources(element, settings, instance) {
var 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
};
var genericLoadEventName = "load";

@@ -306,3 +375,3 @@ var mediaLoadEventName = "loadeddata";

};
var decreaseLoadingCount = function decreaseLoadingCount(settings, instance) {
var decreaseLoadingCount = function decreaseLoadingCount(instance) {
if (!instance) return;

@@ -317,2 +386,3 @@ instance.loadingCount -= 1;

element.addEventListener(eventName, handler);
element.llEvLisnrs[eventName] = handler;
};

@@ -322,16 +392,28 @@ var removeEventListener = function removeEventListener(element, eventName, handler) {

};
var hasEventListeners = function hasEventListeners(element) {
return !!element.llEvLisnrs;
};
var addEventListeners = function addEventListeners(element, loadHandler, errorHandler) {
if (!hasEventListeners(element)) element.llEvLisnrs = {};
addEventListener(element, genericLoadEventName, loadHandler);
addEventListener(element, errorEventName, errorHandler);
if (element.tagName !== "VIDEO") return;
addEventListener(element, mediaLoadEventName, loadHandler);
addEventListener(element, errorEventName, errorHandler);
};
var removeEventListeners = function removeEventListeners(element, loadHandler, errorHandler) {
removeEventListener(element, genericLoadEventName, loadHandler);
removeEventListener(element, mediaLoadEventName, loadHandler);
removeEventListener(element, errorEventName, errorHandler);
var removeEventListeners = function removeEventListeners(element) {
if (!hasEventListeners(element)) return;
var eventListeners = element.llEvLisnrs;
for (var eventName in eventListeners) {
var handler = eventListeners[eventName];
removeEventListener(element, eventName, handler);
}
delete element.llEvLisnrs;
};
var doneHandler = function doneHandler(element, settings, instance) {
deleteTempImage(element);
decreaseLoadingCount(settings, instance);
decreaseLoadingCount(instance);
removeClass(element, settings.class_loading);
unobserve(element, settings, instance);
};

@@ -354,6 +436,7 @@ var loadHandler = function loadHandler(event, element, settings, instance) {

var elementToListenTo = getTempImage(element) || element;
if (hasEventListeners(elementToListenTo)) return; // <- when retry loading, e.g. with cancel_on_exit
var _loadHandler = function _loadHandler(event) {
loadHandler(event, element, settings, instance);
removeEventListeners(elementToListenTo, _loadHandler, _errorHandler);
removeEventListeners(elementToListenTo);
};

@@ -363,3 +446,3 @@

errorHandler(event, element, settings, instance);
removeEventListeners(elementToListenTo, _loadHandler, _errorHandler);
removeEventListeners(elementToListenTo);
};

@@ -370,13 +453,9 @@

var decreaseToLoadCount = function decreaseToLoadCount(settings, instance) {
var decreaseToLoadCount = function decreaseToLoadCount(instance) {
if (!instance) return;
instance.toLoadCount -= 1;
};
var unobserve = function unobserve(element, instance) {
var increaseToLoadCount = function increaseToLoadCount(instance) {
if (!instance) return;
var observer = instance._observer;
if (observer && instance._settings.auto_unobserve) {
observer.unobserve(element);
}
instance.toLoadCount += 1;
};

@@ -403,4 +482,3 @@

decreaseToLoadCount(settings, instance);
unobserve(element, instance);
decreaseToLoadCount(instance);
checkFinish(settings, instance);

@@ -411,3 +489,3 @@ };

setSources(element, settings, instance);
decreaseToLoadCount(settings, instance);
decreaseToLoadCount(instance);
setStatus(element, statusNative);

@@ -424,2 +502,7 @@ checkFinish(settings, instance);

if (hasStatusDelayed(element)) {
// iffing because status could also be "loading"
resetStatus(element);
}
clearTimeout(timeoutId);

@@ -440,25 +523,44 @@ setTimeoutData(element, null);

}, loadDelay);
setStatus(element, statusDelayed);
setTimeoutData(element, timeoutId);
};
var onEnter = function onEnter(element, entry, instance) {
var settings = instance._settings;
var cancelIfLoading = function cancelIfLoading(element, entry, settings, instance) {
if (element.tagName !== "IMG") return;
removeEventListeners(element);
resetSourcesImg(element);
restoreOriginalAttributesImg(element);
removeClass(element, settings.class_loading);
decreaseLoadingCount(instance);
safeCallback(settings.callback_cancel, element, entry, instance); // setTimeout is needed because the "callback_cancel" implementation
// could be out of the main thread, e.g. `img.setAttribute("src", "")`
setTimeout(function () {
instance.resetElementStatus(element, instance);
}, 0);
};
var onIntersecting = function onIntersecting(element, entry, settings, instance) {
safeCallback(settings.callback_enter, element, entry, instance);
if (hasStatusAfterLoading(element)) return; //Prevent loading it again, e.g. on !auto_unobserve
if (!settings.load_delay) {
load(element, settings, instance);
if (settings.load_delay) {
delayLoad(element, settings, instance);
return;
}
delayLoad(element, settings, instance);
load(element, settings, instance);
};
var onExit = function onExit(element, entry, instance) {
var settings = instance._settings;
var onNotIntersecting = function onNotIntersecting(element, entry, settings, instance) {
if (hasEmptyStatus(element)) return; //Ignore the first pass at landing
if (settings.cancel_on_exit && hasStatusLoading(element)) {
cancelIfLoading(element, entry, settings, instance);
}
safeCallback(settings.callback_exit, element, entry, instance);
if (!settings.load_delay) {
return;
if (settings.load_delay && hasStatusDelayed(element)) {
cancelDelayLoad(element);
}
cancelDelayLoad(element);
};

@@ -477,3 +579,4 @@

element.setAttribute(loadingString, "lazy");
element.setAttribute(loadingString, "lazy"); //TODO: Move inside the loadNative method
loadNative(element, settings, instance);

@@ -495,9 +598,11 @@ });

var resetObserver = function resetObserver(observer) {
observer.disconnect();
var intersectionHandler = function intersectionHandler(entries, settings, instance) {
entries.forEach(function (entry) {
return isIntersecting(entry) ? onIntersecting(entry.target, entry, settings, instance) : onNotIntersecting(entry.target, entry, settings, instance);
});
};
var observeElements = function observeElements(observer, elements) {
elements.forEach(function (element) {
observer.observe(element);
setStatus(element, statusObserved);
});

@@ -510,2 +615,4 @@ };

var setObserver = function setObserver(instance) {
var settings = instance._settings;
if (!supportsIntersectionObserver || shouldUseNative(instance._settings)) {

@@ -516,6 +623,4 @@ return;

instance._observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
return isIntersecting(entry) ? onEnter(entry.target, entry, instance) : onExit(entry.target, entry, instance);
});
}, getObserverSettings(instance._settings));
intersectionHandler(entries, settings, instance);
}, getObserverSettings(settings));
};

@@ -529,7 +634,4 @@

};
var isToManage = function isToManage(element) {
return !hasAnyStatus(element) || hasStatusObserved(element);
};
var excludeManagedElements = function excludeManagedElements(elements) {
return toArray(elements).filter(isToManage);
return toArray(elements).filter(hasEmptyStatus);
};

@@ -565,2 +667,10 @@ var hasError = function hasError(element) {

var resetElementStatus = function resetElementStatus(element, instance) {
if (hasStatusAfterLoading(element)) {
increaseToLoadCount(instance);
}
setStatus(element, null);
};
var LazyLoad = function LazyLoad(customSettings, elements) {

@@ -612,2 +722,5 @@ this._settings = getExtendedSettings(customSettings);

},
resetElementStatus: function resetElementStatus$1(element) {
resetElementStatus(element, this);
},
// DEPRECATED

@@ -623,4 +736,3 @@ load: function load$1(element) {

load(element, settings);
};
/* Automatic instances creation if required (useful for async script loading) */
}; // Automatic instances creation if required (useful for async script loading)

@@ -627,0 +739,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 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,i=n&&"classList"in document.createElement("p"),o=n&&window.devicePixelRatio>1,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_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",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},l=function(n){return t({},r,n)},c=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)},s=function(t,n){return t.getAttribute("data-"+n)},u=function(t,n,e){var a="data-"+n;null!==e?t.setAttribute(a,e):t.removeAttribute(a)},d=function(t,n){return u(t,"ll-status",n)},f=function(t,n){return u(t,"ll-timeout",n)},_=function(t){return s(t,"ll-timeout")},g=function(t,n,e,a){t&&(void 0===a?void 0===e?t(n):t(n,e):t(n,e,a))},v=function(t,n){i?t.classList.add(n):t.className+=(t.className?" ":"")+n},b=function(t,n){i?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},h=function(t){return t.llTempImage},p=function(t){t&&(t.loadingCount+=1)},m=function(t){for(var n,e=[],a=0;n=t.children[a];a+=1)"SOURCE"===n.tagName&&e.push(n);return e},E=function(t,n,e){e&&t.setAttribute(n,e)},y=function(t,n){E(t,"sizes",s(t,n.data_sizes)),E(t,"srcset",s(t,n.data_srcset)),E(t,"src",s(t,n.data_src))},w={IMG:function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&m(e).forEach((function(t){y(t,n)}));y(t,n)},IFRAME:function(t,n){E(t,"src",s(t,n.data_src))},VIDEO:function(t,n){m(t).forEach((function(t){E(t,"src",s(t,n.data_src))})),E(t,"poster",s(t,n.data_poster)),E(t,"src",s(t,n.data_src)),t.load()}},I=function(t,n,e){var a=w[t.tagName];a&&(a(t,n),p(e),v(t,n.class_loading),d(t,"loading"),g(n.callback_loading,t,e),g(n.callback_reveal,t,e))},k=["IMG","IFRAME","VIDEO"],L=function(t,n){!n||n.toLoadCount||n.loadingCount||g(t.callback_finish,n)},C=function(t,n,e){t.addEventListener(n,e)},A=function(t,n,e){t.removeEventListener(n,e)},O=function(t,n,e){A(t,"load",n),A(t,"loadeddata",n),A(t,"error",e)},z=function(t,n,e){!function(t){delete t.llTempImage}(t),function(t,n){n&&(n.loadingCount-=1)}(0,e),b(t,n.class_loading)},N=function(t,n,e){var a=h(t)||t,i=function i(r){!function(t,n,e,a){z(n,e,a),v(n,e.class_loaded),d(n,"loaded"),g(e.callback_loaded,n,a),L(e,a)}(0,t,n,e),O(a,i,o)},o=function o(r){!function(t,n,e,a){z(n,e,a),v(n,e.class_error),d(n,"error"),g(e.callback_error,n,a),L(e,a)}(0,t,n,e),O(a,i,o)};!function(t,n,e){C(t,"load",n),C(t,"loadeddata",n),C(t,"error",e)}(a,i,o)},M=function(t,n){n&&(n.toLoadCount-=1)},R=function(t,n,e){!function(t){t.llTempImage=document.createElement("img")}(t),N(t,n,e),function(t,n,e){var a=s(t,n.data_bg),i=s(t,n.data_bg_hidpi),r=o&&i?i:a;r&&(t.style.backgroundImage='url("'.concat(r,'")'),h(t).setAttribute("src",r),p(e),v(t,n.class_loading),d(t,"loading"),g(n.callback_loading,t,e),g(n.callback_reveal,t,e))}(t,n,e),function(t,n,e){var a=s(t,n.data_bg_multi),i=s(t,n.data_bg_multi_hidpi),r=o&&i?i:a;r&&(t.style.backgroundImage=r,v(t,n.class_applied),d(t,"applied"),g(n.callback_applied,t,e))}(t,n,e)},x=function(t,n,e){!function(t){return k.indexOf(t.tagName)>-1}(t)?R(t,n,e):function(t,n,e){N(t,n,e),I(t,n,e)}(t,n,e),M(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=_(t);n&&(clearTimeout(n),f(t,null))},F=function(t,n,e){var a=e._settings;g(a.callback_enter,t,n,e),a.load_delay?function(t,n,e){var a=n.load_delay,i=_(t);i||(i=setTimeout((function(){x(t,n,e),T(t)}),a),f(t,i))}(t,a,e):x(t,a,e)},G=["IMG","IFRAME"],P=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},j=function(t,n,e){t.forEach((function(t){-1!==G.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){N(t,n,e),I(t,n,e),M(0,e),d(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),d(n,"observed")}))}(t,n)},S=function(t){var n;a&&!P(t._settings)&&(t._observer=new IntersectionObserver((function(n){n.forEach((function(n){return function(t){return t.isIntersecting||t.intersectionRatio>0}(n)?F(n.target,n,t):function(t,n,e){var a=e._settings;g(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"}))},U=function(t){return Array.prototype.slice.call(t)},V=function(t){return t.container.querySelectorAll(t.elements_selector)},$=function(t){return!function(t){return null!==s(t,"ll-status")}(t)||function(t){return"observed"===s(t,"ll-status")}(t)},q=function(t){return function(t){return"error"===s(t,"ll-status")}(t)},H=function(t,n){return function(t){return U(t).filter($)}(t||V(n))},B=function(t){var n,e=t._settings;(n=V(e),U(n).filter(q)).forEach((function(t){b(t,e.class_error),function(t){u(t,"ll-status",null)}(t)})),t.update()},J=function(t,e){var a;this._settings=l(t),this.loadingCount=0,S(this),a=this,n&&window.addEventListener("online",(function(t){B(a)})),this.update(e)};return J.prototype={update:function(t){var n=this._settings,i=H(t,n);this.toLoadCount=i.length,!e&&a?P(n)?j(i,n,this):D(this._observer,i):this.loadAll(i)},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;H(t,e).forEach((function(t){x(t,e,n)}))},load:function(t){x(t,this._settings,this)}},J.load=function(t,n){var e=l(n);x(t,e)},n&&function(t,n){if(n)if(n.length)for(var e,a=0;e=n[a];a+=1)c(t,e);else c(t,n)}(J,window.lazyLoadOptions),J}));
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 i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}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),i=n&&"IntersectionObserver"in window,a=n&&"classList"in document.createElement("p"),o=n&&window.devicePixelRatio>1,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_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,cancel_on_exit:!1,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(n){return t({},r,n)},l=function(t,n){var e,i=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(e)},s=function(t,n){return t.getAttribute("data-"+n)},u=function(t,n,e){var i="data-"+n;null!==e?t.setAttribute(i,e):t.removeAttribute(i)},d=function(t){return s(t,"ll-status")},f=function(t,n){return u(t,"ll-status",n)},_=function(t){return f(t,null)},g=function(t){return null===d(t)},v=function(t){return"delayed"===d(t)},b=["loading","applied","loaded","error"],p=function(t){return b.indexOf(d(t))>-1},h=function(t,n){return u(t,"ll-timeout",n)},m=function(t){return s(t,"ll-timeout")},E=function(t,n,e,i){t&&(void 0===i?void 0===e?t(n):t(n,e):t(n,e,i))},y=function(t,n){a?t.classList.add(n):t.className+=(t.className?" ":"")+n},L=function(t,n){a?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},I=function(t){return t.llTempImage},k=function(t,n,e){if(e){var i=e._observer;i&&n.auto_unobserve&&i.unobserve(t)}},A=function(t){t&&(t.loadingCount+=1)},w=function(t){for(var n,e=[],i=0;n=t.children[i];i+=1)"SOURCE"===n.tagName&&e.push(n);return e},C=function(t,n,e){e&&t.setAttribute(n,e)},O=function(t,n){t.removeAttribute(n)},z=function(t){return!!t.llOriginalAttrs},N=function(t){if(!z(t)){var n={};n.src=t.getAttribute("src"),n.srcset=t.getAttribute("srcset"),n.sizes=t.getAttribute("sizes"),t.llOriginalAttrs=n}},x=function(t){if(z(t)){var n=t.llOriginalAttrs;C(t,"src",n.src),C(t,"srcset",n.srcset),C(t,"sizes",n.sizes)}},M=function(t,n){C(t,"sizes",s(t,n.data_sizes)),C(t,"srcset",s(t,n.data_srcset)),C(t,"src",s(t,n.data_src))},R=function(t){O(t,"src"),O(t,"srcset"),O(t,"sizes")},T=function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&w(e).forEach(n)},G={IMG:function(t,n){T(t,(function(t){N(t),M(t,n)})),N(t),M(t,n)},IFRAME:function(t,n){C(t,"src",s(t,n.data_src))},VIDEO:function(t,n){w(t).forEach((function(t){C(t,"src",s(t,n.data_src))})),C(t,"poster",s(t,n.data_poster)),C(t,"src",s(t,n.data_src)),t.load()}},S=function(t,n,e){var i=G[t.tagName];i&&(i(t,n),A(e),y(t,n.class_loading),f(t,"loading"),E(n.callback_loading,t,e),E(n.callback_reveal,t,e))},D=["IMG","IFRAME","VIDEO"],F=function(t){t&&(t.loadingCount-=1)},P=function(t,n){!n||n.toLoadCount||n.loadingCount||E(t.callback_finish,n)},V=function(t,n,e){t.addEventListener(n,e),t.llEvLisnrs[n]=e},j=function(t,n,e){t.removeEventListener(n,e)},U=function(t){return!!t.llEvLisnrs},$=function(t){if(U(t)){var n=t.llEvLisnrs;for(var e in n){var i=n[e];j(t,e,i)}delete t.llEvLisnrs}},q=function(t,n,e){!function(t){delete t.llTempImage}(t),F(e),L(t,n.class_loading),k(t,n,e)},H=function(t,n,e){var i=I(t)||t;if(!U(i)){!function(t,n,e){U(t)||(t.llEvLisnrs={}),V(t,"load",n),V(t,"error",e),"VIDEO"===t.tagName&&V(t,"loadeddata",n)}(i,(function(a){!function(t,n,e,i){q(n,e,i),y(n,e.class_loaded),f(n,"loaded"),E(e.callback_loaded,n,i),P(e,i)}(0,t,n,e),$(i)}),(function(a){!function(t,n,e,i){q(n,e,i),y(n,e.class_error),f(n,"error"),E(e.callback_error,n,i),P(e,i)}(0,t,n,e),$(i)}))}},B=function(t){t&&(t.toLoadCount-=1)},J=function(t,n,e){!function(t){t.llTempImage=document.createElement("img")}(t),H(t,n,e),function(t,n,e){var i=s(t,n.data_bg),a=s(t,n.data_bg_hidpi),r=o&&a?a:i;r&&(t.style.backgroundImage='url("'.concat(r,'")'),I(t).setAttribute("src",r),A(e),y(t,n.class_loading),f(t,"loading"),E(n.callback_loading,t,e),E(n.callback_reveal,t,e))}(t,n,e),function(t,n,e){var i=s(t,n.data_bg_multi),a=s(t,n.data_bg_multi_hidpi),r=o&&a?a:i;r&&(t.style.backgroundImage=r,y(t,n.class_applied),f(t,"applied"),k(t,n,e),E(n.callback_applied,t,e))}(t,n,e)},K=function(t,n,e){!function(t){return D.indexOf(t.tagName)>-1}(t)?J(t,n,e):function(t,n,e){H(t,n,e),S(t,n,e)}(t,n,e),B(e),P(n,e)},Q=function(t){var n=m(t);n&&(v(t)&&_(t),clearTimeout(n),h(t,null))},W=function(t,n,e,i){"IMG"===t.tagName&&($(t),function(t){T(t,(function(t){R(t)})),R(t)}(t),function(t){T(t,(function(t){x(t)})),x(t)}(t),L(t,e.class_loading),F(i),E(e.callback_cancel,t,n,i),setTimeout((function(){i.resetElementStatus(t,i)}),0))},X=function(t,n,e,i){E(e.callback_enter,t,n,i),p(t)||(e.load_delay?function(t,n,e){var i=n.load_delay,a=m(t);a||(a=setTimeout((function(){K(t,n,e),Q(t)}),i),f(t,"delayed"),h(t,a))}(t,e,i):K(t,e,i))},Y=function(t,n,e,i){g(t)||(e.cancel_on_exit&&function(t){return"loading"===d(t)}(t)&&W(t,n,e,i),E(e.callback_exit,t,n,i),e.load_delay&&v(t)&&Q(t))},Z=["IMG","IFRAME"],tt=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},nt=function(t,n,e){t.forEach((function(t){-1!==Z.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){H(t,n,e),S(t,n,e),B(e),f(t,"native"),P(n,e)}(t,n,e))})),e.toLoadCount=0},et=function(t){var n=t._settings;i&&!tt(t._settings)&&(t._observer=new IntersectionObserver((function(e){!function(t,n,e){t.forEach((function(t){return function(t){return t.isIntersecting||t.intersectionRatio>0}(t)?X(t.target,t,n,e):Y(t.target,t,n,e)}))}(e,n,t)}),function(t){return{root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}}(n)))},it=function(t){return Array.prototype.slice.call(t)},at=function(t){return t.container.querySelectorAll(t.elements_selector)},ot=function(t){return function(t){return"error"===d(t)}(t)},rt=function(t,n){return function(t){return it(t).filter(g)}(t||at(n))},ct=function(t){var n,e=t._settings;(n=at(e),it(n).filter(ot)).forEach((function(t){L(t,e.class_error),_(t)})),t.update()},lt=function(t,e){var i;this._settings=c(t),this.loadingCount=0,et(this),i=this,n&&window.addEventListener("online",(function(t){ct(i)})),this.update(e)};return lt.prototype={update:function(t){var n,a,o=this._settings,r=rt(t,o);(this.toLoadCount=r.length,!e&&i)?tt(o)?nt(r,o,this):(n=this._observer,a=r,function(t){t.disconnect()}(n),function(t,n){n.forEach((function(n){t.observe(n)}))}(n,a)):this.loadAll(r)},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;rt(t,e).forEach((function(t){K(t,e,n)}))},resetElementStatus:function(t){!function(t,n){p(t)&&function(t){t&&(t.toLoadCount+=1)}(n),f(t,null)}(t,this)},load:function(t){K(t,this._settings,this)}},lt.load=function(t,n){var e=c(n);K(t,e)},n&&function(t,n){if(n)if(n.length)for(var e,i=0;e=n[i];i+=1)l(t,e);else l(t,n)}(lt,window.lazyLoadOptions),lt}));

314

dist/lazyload.esm.js

@@ -32,2 +32,3 @@ const runningOnBrowser = typeof window !== "undefined";

auto_unobserve: true,
cancel_on_exit: false,
callback_enter: null,

@@ -40,2 +41,3 @@ callback_exit: null,

callback_finish: null,
callback_cancel: null,
use_native: false

@@ -81,6 +83,6 @@ };

const statusObserved = "observed";
const statusApplied = "applied";
const statusDelayed = "delayed";
const statusLoading = "loading";
const statusLoaded = "loaded";
const statusApplied = "applied";
const statusError = "error";

@@ -106,16 +108,18 @@ const statusNative = "native";

const resetStatus = element => setData(element, statusDataName, null);
const getStatus = (element) => getData(element, statusDataName);
const setStatus = (element, status) => setData(element, statusDataName, status);
const resetStatus = (element) => setStatus(element, null);
const hasAnyStatus = element => getData(element, statusDataName) !== null;
const hasEmptyStatus = (element) => getStatus(element) === null;
const hasStatusLoading = (element) => getStatus(element) === statusLoading;
const hasStatusError = (element) => getStatus(element) === statusError;
const hasStatusDelayed = (element) => getStatus(element) === statusDelayed;
const hasStatusObserved = element => getData(element, statusDataName) === statusObserved;
const statusesAfterLoading = [statusLoading, statusApplied, statusLoaded, statusError];
const hasStatusAfterLoading = (element) =>
statusesAfterLoading.indexOf(getStatus(element)) > -1;
const hasStatusError = element => getData(element, statusDataName) === statusError;
const setTimeoutData = (element, value) => setData(element, timeoutDataName, value);
const getTimeoutData = (element) => getData(element, timeoutDataName);
const getTimeoutData = element => getData(element, timeoutDataName);
const safeCallback = (callback, arg1, arg2, arg3) => {

@@ -166,8 +170,25 @@ if (!callback) {

const increaseLoadingCount = instance => {
const unobserve = (element, settings, instance) => {
if (!instance) return;
const observer = instance._observer;
if (!observer || !settings.auto_unobserve) return;
observer.unobserve(element);
};
const resetObserver = (observer) => {
observer.disconnect();
};
const _src_ = "src";
const _srcset_ = "srcset";
const _sizes_ = "sizes";
const _poster_ = "poster";
const _PICTURE_ = "PICTURE";
const increaseLoadingCount = (instance) => {
if (!instance) return;
instance.loadingCount += 1;
};
const getSourceTags = parentTag => {
const getSourceTags = (parentTag) => {
let sourceTags = [];

@@ -189,23 +210,72 @@ for (let i = 0, childTag; (childTag = parentTag.children[i]); i += 1) {

const resetAttribute = (element, attrName) => {
element.removeAttribute(attrName);
};
const hasOriginalAttributes = (element) => {
return !!element.llOriginalAttrs;
};
const saveOriginalImageAttributes = (element) => {
if (hasOriginalAttributes(element)) return;
const originalAttributes = {};
originalAttributes[_src_] = element.getAttribute(_src_);
originalAttributes[_srcset_] = element.getAttribute(_srcset_);
originalAttributes[_sizes_] = element.getAttribute(_sizes_);
element.llOriginalAttrs = originalAttributes;
};
const restoreOriginalImageAttributes = (element) => {
if (!hasOriginalAttributes(element)) return;
const originalAttributes = element.llOriginalAttrs;
setAttributeIfValue(element, _src_, originalAttributes[_src_]);
setAttributeIfValue(element, _srcset_, originalAttributes[_srcset_]);
setAttributeIfValue(element, _sizes_, originalAttributes[_sizes_]);
};
const setImageAttributes = (element, settings) => {
setAttributeIfValue(element, "sizes", getData(element, settings.data_sizes));
setAttributeIfValue(element, "srcset", getData(element, settings.data_srcset));
setAttributeIfValue(element, "src", getData(element, settings.data_src));
setAttributeIfValue(element, _sizes_, getData(element, settings.data_sizes));
setAttributeIfValue(element, _srcset_, getData(element, settings.data_srcset));
setAttributeIfValue(element, _src_, getData(element, settings.data_src));
};
const setSourcesImg = (element, settings) => {
const resetImageAttributes = (element) => {
resetAttribute(element, _src_);
resetAttribute(element, _srcset_);
resetAttribute(element, _sizes_);
};
const forEachPictureSource = (element, fn) => {
const parent = element.parentNode;
if (!parent || parent.tagName !== _PICTURE_) return;
if (parent && parent.tagName === "PICTURE") {
let sourceTags = getSourceTags(parent);
sourceTags.forEach(sourceTag => {
setImageAttributes(sourceTag, settings);
});
}
let sourceTags = getSourceTags(parent);
sourceTags.forEach(fn);
};
const restoreOriginalAttributesImg = (element) => {
forEachPictureSource(element, (sourceTag) => {
restoreOriginalImageAttributes(sourceTag);
});
restoreOriginalImageAttributes(element);
};
const setSourcesImg = (element, settings) => {
forEachPictureSource(element, (sourceTag) => {
saveOriginalImageAttributes(sourceTag);
setImageAttributes(sourceTag, settings);
});
saveOriginalImageAttributes(element);
setImageAttributes(element, settings);
};
const resetSourcesImg = (element) => {
forEachPictureSource(element, (sourceTag) => {
resetImageAttributes(sourceTag);
});
resetImageAttributes(element);
};
const setSourcesIframe = (element, settings) => {
setAttributeIfValue(element, "src", getData(element, settings.data_src));
setAttributeIfValue(element, _src_, getData(element, settings.data_src));
};

@@ -215,7 +285,7 @@

let sourceTags = getSourceTags(element);
sourceTags.forEach(sourceTag => {
setAttributeIfValue(sourceTag, "src", getData(sourceTag, settings.data_src));
sourceTags.forEach((sourceTag) => {
setAttributeIfValue(sourceTag, _src_, getData(sourceTag, settings.data_src));
});
setAttributeIfValue(element, "poster", getData(element, settings.data_poster));
setAttributeIfValue(element, "src", getData(element, settings.data_src));
setAttributeIfValue(element, _poster_, getData(element, settings.data_poster));
setAttributeIfValue(element, _src_, getData(element, settings.data_src));
element.load();

@@ -230,14 +300,2 @@ };

const setSources = (element, settings, instance) => {
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 setBackground = (element, settings, instance) => {

@@ -249,3 +307,3 @@ const bg1xValue = getData(element, settings.data_bg);

element.style.backgroundImage = `url("${bgDataValue}")`;
getTempImage(element).setAttribute("src", bgDataValue);
getTempImage(element).setAttribute(_src_, bgDataValue);
// Annotate and notify loading

@@ -271,5 +329,18 @@ increaseLoadingCount(instance);

setStatus(element, statusApplied);
unobserve(element, settings, instance); // Unobserve here because we can't do it on load
safeCallback(settings.callback_applied, element, instance);
};
const setSources = (element, settings, instance) => {
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 genericLoadEventName = "load";

@@ -280,6 +351,5 @@ const mediaLoadEventName = "loadeddata";

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

@@ -296,2 +366,3 @@ instance.loadingCount -= 1;

element.addEventListener(eventName, handler);
element.llEvLisnrs[eventName] = handler;
};

@@ -303,12 +374,22 @@

const hasEventListeners = (element) => {
return !!element.llEvLisnrs;
};
const addEventListeners = (element, loadHandler, errorHandler) => {
if (!hasEventListeners(element)) element.llEvLisnrs = {};
addEventListener(element, genericLoadEventName, loadHandler);
addEventListener(element, errorEventName, errorHandler);
if (element.tagName !== "VIDEO") return;
addEventListener(element, mediaLoadEventName, loadHandler);
addEventListener(element, errorEventName, errorHandler);
};
const removeEventListeners = (element, loadHandler, errorHandler) => {
removeEventListener(element, genericLoadEventName, loadHandler);
removeEventListener(element, mediaLoadEventName, loadHandler);
removeEventListener(element, errorEventName, errorHandler);
const removeEventListeners = (element) => {
if (!hasEventListeners(element)) return;
const eventListeners = element.llEvLisnrs;
for (let eventName in eventListeners) {
const handler = eventListeners[eventName];
removeEventListener(element, eventName, handler);
}
delete element.llEvLisnrs;
};

@@ -318,4 +399,5 @@

deleteTempImage(element);
decreaseLoadingCount(settings, instance);
decreaseLoadingCount(instance);
removeClass(element, settings.class_loading);
unobserve(element, settings, instance);
};

@@ -341,10 +423,11 @@

const elementToListenTo = getTempImage(element) || element;
if (hasEventListeners(elementToListenTo)) return; // <- when retry loading, e.g. with cancel_on_exit
const _loadHandler = event => {
const _loadHandler = (event) => {
loadHandler(event, element, settings, instance);
removeEventListeners(elementToListenTo, _loadHandler, _errorHandler);
removeEventListeners(elementToListenTo);
};
const _errorHandler = event => {
const _errorHandler = (event) => {
errorHandler(event, element, settings, instance);
removeEventListeners(elementToListenTo, _loadHandler, _errorHandler);
removeEventListeners(elementToListenTo);
};

@@ -355,3 +438,3 @@

const decreaseToLoadCount = (settings, instance) => {
const decreaseToLoadCount = (instance) => {
if (!instance) return;

@@ -361,8 +444,5 @@ instance.toLoadCount -= 1;

const unobserve = (element, instance) => {
const increaseToLoadCount = (instance) => {
if (!instance) return;
const observer = instance._observer;
if (observer && instance._settings.auto_unobserve) {
observer.unobserve(element);
}
instance.toLoadCount += 1;
};

@@ -388,4 +468,3 @@

}
decreaseToLoadCount(settings, instance);
unobserve(element, instance);
decreaseToLoadCount(instance);
checkFinish(settings, instance);

@@ -397,3 +476,3 @@ };

setSources(element, settings, instance);
decreaseToLoadCount(settings, instance);
decreaseToLoadCount(instance);
setStatus(element, statusNative);

@@ -403,3 +482,3 @@ checkFinish(settings, instance);

const cancelDelayLoad = element => {
const cancelDelayLoad = (element) => {
var timeoutId = getTimeoutData(element);

@@ -409,2 +488,5 @@ if (!timeoutId) {

}
if (hasStatusDelayed(element)) { // iffing because status could also be "loading"
resetStatus(element);
}
clearTimeout(timeoutId);

@@ -420,26 +502,44 @@ setTimeoutData(element, null);

}
timeoutId = setTimeout(function() {
timeoutId = setTimeout(function () {
load(element, settings, instance);
cancelDelayLoad(element);
}, loadDelay);
setStatus(element, statusDelayed);
setTimeoutData(element, timeoutId);
};
const onEnter = (element, entry, instance) => {
const settings = instance._settings;
const cancelIfLoading = (element, entry, settings, instance) => {
if (element.tagName !== "IMG") return;
removeEventListeners(element);
resetSourcesImg(element);
restoreOriginalAttributesImg(element);
removeClass(element, settings.class_loading);
decreaseLoadingCount(instance);
safeCallback(settings.callback_cancel, element, entry, instance);
// setTimeout is needed because the "callback_cancel" implementation
// could be out of the main thread, e.g. `img.setAttribute("src", "")`
setTimeout(() => {
instance.resetElementStatus(element, instance);
}, 0);
};
const onIntersecting = (element, entry, settings, instance) => {
safeCallback(settings.callback_enter, element, entry, instance);
if (!settings.load_delay) {
load(element, settings, instance);
if (hasStatusAfterLoading(element)) return; //Prevent loading it again, e.g. on !auto_unobserve
if (settings.load_delay) {
delayLoad(element, settings, instance);
return;
}
delayLoad(element, settings, instance);
load(element, settings, instance);
};
const onExit = (element, entry, instance) => {
const settings = instance._settings;
const onNotIntersecting = (element, entry, settings, instance) => {
if (hasEmptyStatus(element)) return; //Ignore the first pass at landing
if (settings.cancel_on_exit && hasStatusLoading(element)) {
cancelIfLoading(element, entry, settings, instance);
}
safeCallback(settings.callback_exit, element, entry, instance);
if (!settings.load_delay) {
return;
if (settings.load_delay && hasStatusDelayed(element)) {
cancelDelayLoad(element);
}
cancelDelayLoad(element);
};

@@ -458,3 +558,3 @@

}
element.setAttribute(loadingString, "lazy");
element.setAttribute(loadingString, "lazy"); //TODO: Move inside the loadNative method
loadNative(element, settings, instance);

@@ -465,5 +565,5 @@ });

const isIntersecting = entry => entry.isIntersecting || entry.intersectionRatio > 0;
const isIntersecting = (entry) => entry.isIntersecting || entry.intersectionRatio > 0;
const getObserverSettings = settings => ({
const getObserverSettings = (settings) => ({
root: settings.container === document ? null : settings.container,

@@ -473,10 +573,13 @@ rootMargin: settings.thresholds || settings.threshold + "px"

const resetObserver = observer => {
observer.disconnect();
const intersectionHandler = (entries, settings, instance) => {
entries.forEach((entry) =>
isIntersecting(entry)
? onIntersecting(entry.target, entry, settings, instance)
: onNotIntersecting(entry.target, entry, settings, instance)
);
};
const observeElements = (observer, elements) => {
elements.forEach(element => {
elements.forEach((element) => {
observer.observe(element);
setStatus(element, statusObserved);
});

@@ -490,25 +593,21 @@ };

const setObserver = instance => {
const setObserver = (instance) => {
const settings = instance._settings;
if (!supportsIntersectionObserver || shouldUseNative(instance._settings)) {
return;
}
instance._observer = new IntersectionObserver(entries => {
entries.forEach(entry =>
isIntersecting(entry)
? onEnter(entry.target, entry, instance)
: onExit(entry.target, entry, instance)
);
}, getObserverSettings(instance._settings));
instance._observer = new IntersectionObserver((entries) => {
intersectionHandler(entries, settings, instance);
}, getObserverSettings(settings));
};
const toArray = nodeSet => Array.prototype.slice.call(nodeSet);
const toArray = (nodeSet) => Array.prototype.slice.call(nodeSet);
const queryElements = settings =>
const queryElements = (settings) =>
settings.container.querySelectorAll(settings.elements_selector);
const isToManage = element => !hasAnyStatus(element) || hasStatusObserved(element);
const excludeManagedElements = elements => toArray(elements).filter(isToManage);
const excludeManagedElements = (elements) => toArray(elements).filter(hasEmptyStatus);
const hasError = element => hasStatusError(element);
const filterErrorElements = elements => toArray(elements).filter(hasError);
const hasError = (element) => hasStatusError(element);
const filterErrorElements = (elements) => toArray(elements).filter(hasError);

@@ -537,3 +636,10 @@ const getElementsToLoad = (elements, settings) =>

const LazyLoad = function(customSettings, elements) {
const resetElementStatus = (element, instance) => {
if (hasStatusAfterLoading(element)) {
increaseToLoadCount(instance);
}
setStatus(element, null);
};
const LazyLoad = function (customSettings, elements) {
this._settings = getExtendedSettings(customSettings);

@@ -547,3 +653,3 @@ this.loadingCount = 0;

LazyLoad.prototype = {
update: function(givenNodeset) {
update: function (givenNodeset) {
const settings = this._settings;

@@ -565,3 +671,3 @@ const elementsToLoad = getElementsToLoad(givenNodeset, settings);

destroy: function() {
destroy: function () {
// Observer

@@ -577,6 +683,6 @@ if (this._observer) {

loadAll: function(elements) {
loadAll: function (elements) {
const settings = this._settings;
const elementsToLoad = getElementsToLoad(elements, settings);
elementsToLoad.forEach(element => {
elementsToLoad.forEach((element) => {
load(element, settings, this);

@@ -586,4 +692,8 @@ });

resetElementStatus: function (element) {
resetElementStatus(element, this);
},
// DEPRECATED
load: function(element) {
load: function (element) {
load(element, this._settings, this);

@@ -598,3 +708,3 @@ }

/* Automatic instances creation if required (useful for async script loading) */
// Automatic instances creation if required (useful for async script loading)
if (runningOnBrowser) {

@@ -601,0 +711,0 @@ autoInitialize(LazyLoad, window.lazyLoadOptions);

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

274

dist/lazyload.iife.js

@@ -47,2 +47,3 @@ var LazyLoad = (function () {

auto_unobserve: true,
cancel_on_exit: false,
callback_enter: null,

@@ -55,2 +56,3 @@ callback_exit: null,

callback_finish: null,
callback_cancel: null,
use_native: false

@@ -105,6 +107,6 @@ };

var statusObserved = "observed";
var statusApplied = "applied";
var statusDelayed = "delayed";
var statusLoading = "loading";
var statusLoaded = "loaded";
var statusApplied = "applied";
var statusError = "error";

@@ -129,4 +131,4 @@ var statusNative = "native";

};
var resetStatus = function resetStatus(element) {
return setData(element, statusDataName, null);
var getStatus = function getStatus(element) {
return getData(element, statusDataName);
};

@@ -136,11 +138,21 @@ var setStatus = function setStatus(element, status) {

};
var hasAnyStatus = function hasAnyStatus(element) {
return getData(element, statusDataName) !== null;
var resetStatus = function resetStatus(element) {
return setStatus(element, null);
};
var hasStatusObserved = function hasStatusObserved(element) {
return getData(element, statusDataName) === statusObserved;
var hasEmptyStatus = function hasEmptyStatus(element) {
return getStatus(element) === null;
};
var hasStatusLoading = function hasStatusLoading(element) {
return getStatus(element) === statusLoading;
};
var hasStatusError = function hasStatusError(element) {
return getData(element, statusDataName) === statusError;
return getStatus(element) === statusError;
};
var hasStatusDelayed = function hasStatusDelayed(element) {
return getStatus(element) === statusDelayed;
};
var statusesAfterLoading = [statusLoading, statusApplied, statusLoaded, statusError];
var hasStatusAfterLoading = function hasStatusAfterLoading(element) {
return statusesAfterLoading.indexOf(getStatus(element)) > -1;
};
var setTimeoutData = function setTimeoutData(element, value) {

@@ -198,2 +210,17 @@ return setData(element, timeoutDataName, value);

var unobserve = function unobserve(element, settings, instance) {
if (!instance) return;
var observer = instance._observer;
if (!observer || !settings.auto_unobserve) return;
observer.unobserve(element);
};
var resetObserver = function resetObserver(observer) {
observer.disconnect();
};
var _src_ = "src";
var _srcset_ = "srcset";
var _sizes_ = "sizes";
var _poster_ = "poster";
var _PICTURE_ = "PICTURE";
var increaseLoadingCount = function increaseLoadingCount(instance) {

@@ -221,21 +248,61 @@ if (!instance) return;

};
var resetAttribute = function resetAttribute(element, attrName) {
element.removeAttribute(attrName);
};
var hasOriginalAttributes = function hasOriginalAttributes(element) {
return !!element.llOriginalAttrs;
};
var saveOriginalImageAttributes = function saveOriginalImageAttributes(element) {
if (hasOriginalAttributes(element)) return;
var originalAttributes = {};
originalAttributes[_src_] = element.getAttribute(_src_);
originalAttributes[_srcset_] = element.getAttribute(_srcset_);
originalAttributes[_sizes_] = element.getAttribute(_sizes_);
element.llOriginalAttrs = originalAttributes;
};
var restoreOriginalImageAttributes = function restoreOriginalImageAttributes(element) {
if (!hasOriginalAttributes(element)) return;
var originalAttributes = element.llOriginalAttrs;
setAttributeIfValue(element, _src_, originalAttributes[_src_]);
setAttributeIfValue(element, _srcset_, originalAttributes[_srcset_]);
setAttributeIfValue(element, _sizes_, originalAttributes[_sizes_]);
};
var setImageAttributes = function setImageAttributes(element, settings) {
setAttributeIfValue(element, "sizes", getData(element, settings.data_sizes));
setAttributeIfValue(element, "srcset", getData(element, settings.data_srcset));
setAttributeIfValue(element, "src", getData(element, settings.data_src));
setAttributeIfValue(element, _sizes_, getData(element, settings.data_sizes));
setAttributeIfValue(element, _srcset_, getData(element, settings.data_srcset));
setAttributeIfValue(element, _src_, getData(element, settings.data_src));
};
var resetImageAttributes = function resetImageAttributes(element) {
resetAttribute(element, _src_);
resetAttribute(element, _srcset_);
resetAttribute(element, _sizes_);
};
var forEachPictureSource = function forEachPictureSource(element, fn) {
var parent = element.parentNode;
if (!parent || parent.tagName !== _PICTURE_) return;
var sourceTags = getSourceTags(parent);
sourceTags.forEach(fn);
};
var restoreOriginalAttributesImg = function restoreOriginalAttributesImg(element) {
forEachPictureSource(element, function (sourceTag) {
restoreOriginalImageAttributes(sourceTag);
});
restoreOriginalImageAttributes(element);
};
var setSourcesImg = function setSourcesImg(element, settings) {
var parent = element.parentNode;
if (parent && parent.tagName === "PICTURE") {
var sourceTags = getSourceTags(parent);
sourceTags.forEach(function (sourceTag) {
setImageAttributes(sourceTag, settings);
});
}
forEachPictureSource(element, function (sourceTag) {
saveOriginalImageAttributes(sourceTag);
setImageAttributes(sourceTag, settings);
});
saveOriginalImageAttributes(element);
setImageAttributes(element, settings);
};
var resetSourcesImg = function resetSourcesImg(element) {
forEachPictureSource(element, function (sourceTag) {
resetImageAttributes(sourceTag);
});
resetImageAttributes(element);
};
var setSourcesIframe = function setSourcesIframe(element, settings) {
setAttributeIfValue(element, "src", getData(element, settings.data_src));
setAttributeIfValue(element, _src_, getData(element, settings.data_src));
};

@@ -245,6 +312,6 @@ var setSourcesVideo = function setSourcesVideo(element, settings) {

sourceTags.forEach(function (sourceTag) {
setAttributeIfValue(sourceTag, "src", getData(sourceTag, settings.data_src));
setAttributeIfValue(sourceTag, _src_, getData(sourceTag, settings.data_src));
});
setAttributeIfValue(element, "poster", getData(element, settings.data_poster));
setAttributeIfValue(element, "src", getData(element, settings.data_src));
setAttributeIfValue(element, _poster_, getData(element, settings.data_poster));
setAttributeIfValue(element, _src_, getData(element, settings.data_src));
element.load();

@@ -257,13 +324,2 @@ };

};
var setSources = function setSources(element, settings, instance) {
var 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
};
var setBackground = function setBackground(element, settings, instance) {

@@ -275,3 +331,3 @@ var bg1xValue = getData(element, settings.data_bg);

element.style.backgroundImage = "url(\"".concat(bgDataValue, "\")");
getTempImage(element).setAttribute("src", bgDataValue); // Annotate and notify loading
getTempImage(element).setAttribute(_src_, bgDataValue); // Annotate and notify loading

@@ -296,5 +352,18 @@ increaseLoadingCount(instance);

setStatus(element, statusApplied);
unobserve(element, settings, instance); // Unobserve here because we can't do it on load
safeCallback(settings.callback_applied, element, instance);
};
var setSources = function setSources(element, settings, instance) {
var 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
};
var genericLoadEventName = "load";

@@ -307,3 +376,3 @@ var mediaLoadEventName = "loadeddata";

};
var decreaseLoadingCount = function decreaseLoadingCount(settings, instance) {
var decreaseLoadingCount = function decreaseLoadingCount(instance) {
if (!instance) return;

@@ -318,2 +387,3 @@ instance.loadingCount -= 1;

element.addEventListener(eventName, handler);
element.llEvLisnrs[eventName] = handler;
};

@@ -323,16 +393,28 @@ var removeEventListener = function removeEventListener(element, eventName, handler) {

};
var hasEventListeners = function hasEventListeners(element) {
return !!element.llEvLisnrs;
};
var addEventListeners = function addEventListeners(element, loadHandler, errorHandler) {
if (!hasEventListeners(element)) element.llEvLisnrs = {};
addEventListener(element, genericLoadEventName, loadHandler);
addEventListener(element, errorEventName, errorHandler);
if (element.tagName !== "VIDEO") return;
addEventListener(element, mediaLoadEventName, loadHandler);
addEventListener(element, errorEventName, errorHandler);
};
var removeEventListeners = function removeEventListeners(element, loadHandler, errorHandler) {
removeEventListener(element, genericLoadEventName, loadHandler);
removeEventListener(element, mediaLoadEventName, loadHandler);
removeEventListener(element, errorEventName, errorHandler);
var removeEventListeners = function removeEventListeners(element) {
if (!hasEventListeners(element)) return;
var eventListeners = element.llEvLisnrs;
for (var eventName in eventListeners) {
var handler = eventListeners[eventName];
removeEventListener(element, eventName, handler);
}
delete element.llEvLisnrs;
};
var doneHandler = function doneHandler(element, settings, instance) {
deleteTempImage(element);
decreaseLoadingCount(settings, instance);
decreaseLoadingCount(instance);
removeClass(element, settings.class_loading);
unobserve(element, settings, instance);
};

@@ -355,6 +437,7 @@ var loadHandler = function loadHandler(event, element, settings, instance) {

var elementToListenTo = getTempImage(element) || element;
if (hasEventListeners(elementToListenTo)) return; // <- when retry loading, e.g. with cancel_on_exit
var _loadHandler = function _loadHandler(event) {
loadHandler(event, element, settings, instance);
removeEventListeners(elementToListenTo, _loadHandler, _errorHandler);
removeEventListeners(elementToListenTo);
};

@@ -364,3 +447,3 @@

errorHandler(event, element, settings, instance);
removeEventListeners(elementToListenTo, _loadHandler, _errorHandler);
removeEventListeners(elementToListenTo);
};

@@ -371,13 +454,9 @@

var decreaseToLoadCount = function decreaseToLoadCount(settings, instance) {
var decreaseToLoadCount = function decreaseToLoadCount(instance) {
if (!instance) return;
instance.toLoadCount -= 1;
};
var unobserve = function unobserve(element, instance) {
var increaseToLoadCount = function increaseToLoadCount(instance) {
if (!instance) return;
var observer = instance._observer;
if (observer && instance._settings.auto_unobserve) {
observer.unobserve(element);
}
instance.toLoadCount += 1;
};

@@ -404,4 +483,3 @@

decreaseToLoadCount(settings, instance);
unobserve(element, instance);
decreaseToLoadCount(instance);
checkFinish(settings, instance);

@@ -412,3 +490,3 @@ };

setSources(element, settings, instance);
decreaseToLoadCount(settings, instance);
decreaseToLoadCount(instance);
setStatus(element, statusNative);

@@ -425,2 +503,7 @@ checkFinish(settings, instance);

if (hasStatusDelayed(element)) {
// iffing because status could also be "loading"
resetStatus(element);
}
clearTimeout(timeoutId);

@@ -441,25 +524,44 @@ setTimeoutData(element, null);

}, loadDelay);
setStatus(element, statusDelayed);
setTimeoutData(element, timeoutId);
};
var onEnter = function onEnter(element, entry, instance) {
var settings = instance._settings;
var cancelIfLoading = function cancelIfLoading(element, entry, settings, instance) {
if (element.tagName !== "IMG") return;
removeEventListeners(element);
resetSourcesImg(element);
restoreOriginalAttributesImg(element);
removeClass(element, settings.class_loading);
decreaseLoadingCount(instance);
safeCallback(settings.callback_cancel, element, entry, instance); // setTimeout is needed because the "callback_cancel" implementation
// could be out of the main thread, e.g. `img.setAttribute("src", "")`
setTimeout(function () {
instance.resetElementStatus(element, instance);
}, 0);
};
var onIntersecting = function onIntersecting(element, entry, settings, instance) {
safeCallback(settings.callback_enter, element, entry, instance);
if (hasStatusAfterLoading(element)) return; //Prevent loading it again, e.g. on !auto_unobserve
if (!settings.load_delay) {
load(element, settings, instance);
if (settings.load_delay) {
delayLoad(element, settings, instance);
return;
}
delayLoad(element, settings, instance);
load(element, settings, instance);
};
var onExit = function onExit(element, entry, instance) {
var settings = instance._settings;
var onNotIntersecting = function onNotIntersecting(element, entry, settings, instance) {
if (hasEmptyStatus(element)) return; //Ignore the first pass at landing
if (settings.cancel_on_exit && hasStatusLoading(element)) {
cancelIfLoading(element, entry, settings, instance);
}
safeCallback(settings.callback_exit, element, entry, instance);
if (!settings.load_delay) {
return;
if (settings.load_delay && hasStatusDelayed(element)) {
cancelDelayLoad(element);
}
cancelDelayLoad(element);
};

@@ -478,3 +580,4 @@

element.setAttribute(loadingString, "lazy");
element.setAttribute(loadingString, "lazy"); //TODO: Move inside the loadNative method
loadNative(element, settings, instance);

@@ -496,9 +599,11 @@ });

var resetObserver = function resetObserver(observer) {
observer.disconnect();
var intersectionHandler = function intersectionHandler(entries, settings, instance) {
entries.forEach(function (entry) {
return isIntersecting(entry) ? onIntersecting(entry.target, entry, settings, instance) : onNotIntersecting(entry.target, entry, settings, instance);
});
};
var observeElements = function observeElements(observer, elements) {
elements.forEach(function (element) {
observer.observe(element);
setStatus(element, statusObserved);
});

@@ -511,2 +616,4 @@ };

var setObserver = function setObserver(instance) {
var settings = instance._settings;
if (!supportsIntersectionObserver || shouldUseNative(instance._settings)) {

@@ -517,6 +624,4 @@ return;

instance._observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
return isIntersecting(entry) ? onEnter(entry.target, entry, instance) : onExit(entry.target, entry, instance);
});
}, getObserverSettings(instance._settings));
intersectionHandler(entries, settings, instance);
}, getObserverSettings(settings));
};

@@ -530,7 +635,4 @@

};
var isToManage = function isToManage(element) {
return !hasAnyStatus(element) || hasStatusObserved(element);
};
var excludeManagedElements = function excludeManagedElements(elements) {
return toArray(elements).filter(isToManage);
return toArray(elements).filter(hasEmptyStatus);
};

@@ -566,2 +668,10 @@ var hasError = function hasError(element) {

var resetElementStatus = function resetElementStatus(element, instance) {
if (hasStatusAfterLoading(element)) {
increaseToLoadCount(instance);
}
setStatus(element, null);
};
var LazyLoad = function LazyLoad(customSettings, elements) {

@@ -613,2 +723,5 @@ this._settings = getExtendedSettings(customSettings);

},
resetElementStatus: function resetElementStatus$1(element) {
resetElementStatus(element, this);
},
// DEPRECATED

@@ -624,4 +737,3 @@ load: function load$1(element) {

load(element, settings);
};
/* Automatic instances creation if required (useful for async script loading) */
}; // Automatic instances creation if required (useful for async script loading)

@@ -628,0 +740,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 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=n&&window.devicePixelRatio>1,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_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",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},l=function(n){return t({},r,n)},c=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)},s=function(t,n){return t.getAttribute("data-"+n)},u=function(t,n,e){var a="data-"+n;null!==e?t.setAttribute(a,e):t.removeAttribute(a)},d=function(t,n){return u(t,"ll-status",n)},f=function(t,n){return u(t,"ll-timeout",n)},_=function(t){return s(t,"ll-timeout")},g=function(t,n,e,a){t&&(void 0===a?void 0===e?t(n):t(n,e):t(n,e,a))},v=function(t,n){o?t.classList.add(n):t.className+=(t.className?" ":"")+n},b=function(t,n){o?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},h=function(t){return t.llTempImage},p=function(t){t&&(t.loadingCount+=1)},m=function(t){for(var n,e=[],a=0;n=t.children[a];a+=1)"SOURCE"===n.tagName&&e.push(n);return e},E=function(t,n,e){e&&t.setAttribute(n,e)},y=function(t,n){E(t,"sizes",s(t,n.data_sizes)),E(t,"srcset",s(t,n.data_srcset)),E(t,"src",s(t,n.data_src))},w={IMG:function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&m(e).forEach((function(t){y(t,n)}));y(t,n)},IFRAME:function(t,n){E(t,"src",s(t,n.data_src))},VIDEO:function(t,n){m(t).forEach((function(t){E(t,"src",s(t,n.data_src))})),E(t,"poster",s(t,n.data_poster)),E(t,"src",s(t,n.data_src)),t.load()}},I=function(t,n,e){var a=w[t.tagName];a&&(a(t,n),p(e),v(t,n.class_loading),d(t,"loading"),g(n.callback_loading,t,e),g(n.callback_reveal,t,e))},k=["IMG","IFRAME","VIDEO"],L=function(t,n){!n||n.toLoadCount||n.loadingCount||g(t.callback_finish,n)},C=function(t,n,e){t.addEventListener(n,e)},A=function(t,n,e){t.removeEventListener(n,e)},z=function(t,n,e){A(t,"load",n),A(t,"loadeddata",n),A(t,"error",e)},O=function(t,n,e){!function(t){delete t.llTempImage}(t),function(t,n){n&&(n.loadingCount-=1)}(0,e),b(t,n.class_loading)},N=function(t,n,e){var a=h(t)||t,o=function o(r){!function(t,n,e,a){O(n,e,a),v(n,e.class_loaded),d(n,"loaded"),g(e.callback_loaded,n,a),L(e,a)}(0,t,n,e),z(a,o,i)},i=function i(r){!function(t,n,e,a){O(n,e,a),v(n,e.class_error),d(n,"error"),g(e.callback_error,n,a),L(e,a)}(0,t,n,e),z(a,o,i)};!function(t,n,e){C(t,"load",n),C(t,"loadeddata",n),C(t,"error",e)}(a,o,i)},M=function(t,n){n&&(n.toLoadCount-=1)},R=function(t,n,e){!function(t){t.llTempImage=document.createElement("img")}(t),N(t,n,e),function(t,n,e){var a=s(t,n.data_bg),o=s(t,n.data_bg_hidpi),r=i&&o?o:a;r&&(t.style.backgroundImage='url("'.concat(r,'")'),h(t).setAttribute("src",r),p(e),v(t,n.class_loading),d(t,"loading"),g(n.callback_loading,t,e),g(n.callback_reveal,t,e))}(t,n,e),function(t,n,e){var a=s(t,n.data_bg_multi),o=s(t,n.data_bg_multi_hidpi),r=i&&o?o:a;r&&(t.style.backgroundImage=r,v(t,n.class_applied),d(t,"applied"),g(n.callback_applied,t,e))}(t,n,e)},x=function(t,n,e){!function(t){return k.indexOf(t.tagName)>-1}(t)?R(t,n,e):function(t,n,e){N(t,n,e),I(t,n,e)}(t,n,e),M(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=_(t);n&&(clearTimeout(n),f(t,null))},F=function(t,n,e){var a=e._settings;g(a.callback_enter,t,n,e),a.load_delay?function(t,n,e){var a=n.load_delay,o=_(t);o||(o=setTimeout((function(){x(t,n,e),T(t)}),a),f(t,o))}(t,a,e):x(t,a,e)},G=["IMG","IFRAME"],P=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},j=function(t,n,e){t.forEach((function(t){-1!==G.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){N(t,n,e),I(t,n,e),M(0,e),d(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),d(n,"observed")}))}(t,n)},S=function(t){var n;a&&!P(t._settings)&&(t._observer=new IntersectionObserver((function(n){n.forEach((function(n){return function(t){return t.isIntersecting||t.intersectionRatio>0}(n)?F(n.target,n,t):function(t,n,e){var a=e._settings;g(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"}))},U=function(t){return Array.prototype.slice.call(t)},V=function(t){return t.container.querySelectorAll(t.elements_selector)},$=function(t){return!function(t){return null!==s(t,"ll-status")}(t)||function(t){return"observed"===s(t,"ll-status")}(t)},q=function(t){return function(t){return"error"===s(t,"ll-status")}(t)},H=function(t,n){return function(t){return U(t).filter($)}(t||V(n))},B=function(t){var n,e=t._settings;(n=V(e),U(n).filter(q)).forEach((function(t){b(t,e.class_error),function(t){u(t,"ll-status",null)}(t)})),t.update()},J=function(t,e){var a;this._settings=l(t),this.loadingCount=0,S(this),a=this,n&&window.addEventListener("online",(function(t){B(a)})),this.update(e)};return J.prototype={update:function(t){var n=this._settings,o=H(t,n);this.toLoadCount=o.length,!e&&a?P(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;H(t,e).forEach((function(t){x(t,e,n)}))},load:function(t){x(t,this._settings,this)}},J.load=function(t,n){var e=l(n);x(t,e)},n&&function(t,n){if(n)if(n.length)for(var e,a=0;e=n[a];a+=1)c(t,e);else c(t,n)}(J,window.lazyLoadOptions),J}();
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 i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}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),i=n&&"IntersectionObserver"in window,a=n&&"classList"in document.createElement("p"),o=n&&window.devicePixelRatio>1,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_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,cancel_on_exit:!1,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(n){return t({},r,n)},l=function(t,n){var e,i=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(e)},s=function(t,n){return t.getAttribute("data-"+n)},u=function(t,n,e){var i="data-"+n;null!==e?t.setAttribute(i,e):t.removeAttribute(i)},d=function(t){return s(t,"ll-status")},f=function(t,n){return u(t,"ll-status",n)},_=function(t){return f(t,null)},g=function(t){return null===d(t)},v=function(t){return"delayed"===d(t)},b=["loading","applied","loaded","error"],p=function(t){return b.indexOf(d(t))>-1},h=function(t,n){return u(t,"ll-timeout",n)},m=function(t){return s(t,"ll-timeout")},E=function(t,n,e,i){t&&(void 0===i?void 0===e?t(n):t(n,e):t(n,e,i))},y=function(t,n){a?t.classList.add(n):t.className+=(t.className?" ":"")+n},L=function(t,n){a?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},I=function(t){return t.llTempImage},k=function(t,n,e){if(e){var i=e._observer;i&&n.auto_unobserve&&i.unobserve(t)}},A=function(t){t&&(t.loadingCount+=1)},w=function(t){for(var n,e=[],i=0;n=t.children[i];i+=1)"SOURCE"===n.tagName&&e.push(n);return e},z=function(t,n,e){e&&t.setAttribute(n,e)},C=function(t,n){t.removeAttribute(n)},O=function(t){return!!t.llOriginalAttrs},N=function(t){if(!O(t)){var n={};n.src=t.getAttribute("src"),n.srcset=t.getAttribute("srcset"),n.sizes=t.getAttribute("sizes"),t.llOriginalAttrs=n}},x=function(t){if(O(t)){var n=t.llOriginalAttrs;z(t,"src",n.src),z(t,"srcset",n.srcset),z(t,"sizes",n.sizes)}},M=function(t,n){z(t,"sizes",s(t,n.data_sizes)),z(t,"srcset",s(t,n.data_srcset)),z(t,"src",s(t,n.data_src))},R=function(t){C(t,"src"),C(t,"srcset"),C(t,"sizes")},T=function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&w(e).forEach(n)},G={IMG:function(t,n){T(t,(function(t){N(t),M(t,n)})),N(t),M(t,n)},IFRAME:function(t,n){z(t,"src",s(t,n.data_src))},VIDEO:function(t,n){w(t).forEach((function(t){z(t,"src",s(t,n.data_src))})),z(t,"poster",s(t,n.data_poster)),z(t,"src",s(t,n.data_src)),t.load()}},S=function(t,n,e){var i=G[t.tagName];i&&(i(t,n),A(e),y(t,n.class_loading),f(t,"loading"),E(n.callback_loading,t,e),E(n.callback_reveal,t,e))},D=["IMG","IFRAME","VIDEO"],F=function(t){t&&(t.loadingCount-=1)},P=function(t,n){!n||n.toLoadCount||n.loadingCount||E(t.callback_finish,n)},V=function(t,n,e){t.addEventListener(n,e),t.llEvLisnrs[n]=e},j=function(t,n,e){t.removeEventListener(n,e)},U=function(t){return!!t.llEvLisnrs},$=function(t){if(U(t)){var n=t.llEvLisnrs;for(var e in n){var i=n[e];j(t,e,i)}delete t.llEvLisnrs}},q=function(t,n,e){!function(t){delete t.llTempImage}(t),F(e),L(t,n.class_loading),k(t,n,e)},H=function(t,n,e){var i=I(t)||t;if(!U(i)){!function(t,n,e){U(t)||(t.llEvLisnrs={}),V(t,"load",n),V(t,"error",e),"VIDEO"===t.tagName&&V(t,"loadeddata",n)}(i,(function(a){!function(t,n,e,i){q(n,e,i),y(n,e.class_loaded),f(n,"loaded"),E(e.callback_loaded,n,i),P(e,i)}(0,t,n,e),$(i)}),(function(a){!function(t,n,e,i){q(n,e,i),y(n,e.class_error),f(n,"error"),E(e.callback_error,n,i),P(e,i)}(0,t,n,e),$(i)}))}},B=function(t){t&&(t.toLoadCount-=1)},J=function(t,n,e){!function(t){t.llTempImage=document.createElement("img")}(t),H(t,n,e),function(t,n,e){var i=s(t,n.data_bg),a=s(t,n.data_bg_hidpi),r=o&&a?a:i;r&&(t.style.backgroundImage='url("'.concat(r,'")'),I(t).setAttribute("src",r),A(e),y(t,n.class_loading),f(t,"loading"),E(n.callback_loading,t,e),E(n.callback_reveal,t,e))}(t,n,e),function(t,n,e){var i=s(t,n.data_bg_multi),a=s(t,n.data_bg_multi_hidpi),r=o&&a?a:i;r&&(t.style.backgroundImage=r,y(t,n.class_applied),f(t,"applied"),k(t,n,e),E(n.callback_applied,t,e))}(t,n,e)},K=function(t,n,e){!function(t){return D.indexOf(t.tagName)>-1}(t)?J(t,n,e):function(t,n,e){H(t,n,e),S(t,n,e)}(t,n,e),B(e),P(n,e)},Q=function(t){var n=m(t);n&&(v(t)&&_(t),clearTimeout(n),h(t,null))},W=function(t,n,e,i){"IMG"===t.tagName&&($(t),function(t){T(t,(function(t){R(t)})),R(t)}(t),function(t){T(t,(function(t){x(t)})),x(t)}(t),L(t,e.class_loading),F(i),E(e.callback_cancel,t,n,i),setTimeout((function(){i.resetElementStatus(t,i)}),0))},X=function(t,n,e,i){E(e.callback_enter,t,n,i),p(t)||(e.load_delay?function(t,n,e){var i=n.load_delay,a=m(t);a||(a=setTimeout((function(){K(t,n,e),Q(t)}),i),f(t,"delayed"),h(t,a))}(t,e,i):K(t,e,i))},Y=function(t,n,e,i){g(t)||(e.cancel_on_exit&&function(t){return"loading"===d(t)}(t)&&W(t,n,e,i),E(e.callback_exit,t,n,i),e.load_delay&&v(t)&&Q(t))},Z=["IMG","IFRAME"],tt=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},nt=function(t,n,e){t.forEach((function(t){-1!==Z.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){H(t,n,e),S(t,n,e),B(e),f(t,"native"),P(n,e)}(t,n,e))})),e.toLoadCount=0},et=function(t){var n=t._settings;i&&!tt(t._settings)&&(t._observer=new IntersectionObserver((function(e){!function(t,n,e){t.forEach((function(t){return function(t){return t.isIntersecting||t.intersectionRatio>0}(t)?X(t.target,t,n,e):Y(t.target,t,n,e)}))}(e,n,t)}),function(t){return{root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}}(n)))},it=function(t){return Array.prototype.slice.call(t)},at=function(t){return t.container.querySelectorAll(t.elements_selector)},ot=function(t){return function(t){return"error"===d(t)}(t)},rt=function(t,n){return function(t){return it(t).filter(g)}(t||at(n))},ct=function(t){var n,e=t._settings;(n=at(e),it(n).filter(ot)).forEach((function(t){L(t,e.class_error),_(t)})),t.update()},lt=function(t,e){var i;this._settings=c(t),this.loadingCount=0,et(this),i=this,n&&window.addEventListener("online",(function(t){ct(i)})),this.update(e)};return lt.prototype={update:function(t){var n,a,o=this._settings,r=rt(t,o);(this.toLoadCount=r.length,!e&&i)?tt(o)?nt(r,o,this):(n=this._observer,a=r,function(t){t.disconnect()}(n),function(t,n){n.forEach((function(n){t.observe(n)}))}(n,a)):this.loadAll(r)},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;rt(t,e).forEach((function(t){K(t,e,n)}))},resetElementStatus:function(t){!function(t,n){p(t)&&function(t){t&&(t.toLoadCount+=1)}(n),f(t,null)}(t,this)},load:function(t){K(t,this._settings,this)}},lt.load=function(t,n){var e=c(n);K(t,e)},n&&function(t,n){if(n)if(n.length)for(var e,i=0;e=n[i];i+=1)l(t,e);else l(t,n)}(lt,window.lazyLoadOptions),lt}();

274

dist/lazyload.js

@@ -50,2 +50,3 @@ (function (global, factory) {

auto_unobserve: true,
cancel_on_exit: false,
callback_enter: null,

@@ -58,2 +59,3 @@ callback_exit: null,

callback_finish: null,
callback_cancel: null,
use_native: false

@@ -108,6 +110,6 @@ };

var statusObserved = "observed";
var statusApplied = "applied";
var statusDelayed = "delayed";
var statusLoading = "loading";
var statusLoaded = "loaded";
var statusApplied = "applied";
var statusError = "error";

@@ -132,4 +134,4 @@ var statusNative = "native";

};
var resetStatus = function resetStatus(element) {
return setData(element, statusDataName, null);
var getStatus = function getStatus(element) {
return getData(element, statusDataName);
};

@@ -139,11 +141,21 @@ var setStatus = function setStatus(element, status) {

};
var hasAnyStatus = function hasAnyStatus(element) {
return getData(element, statusDataName) !== null;
var resetStatus = function resetStatus(element) {
return setStatus(element, null);
};
var hasStatusObserved = function hasStatusObserved(element) {
return getData(element, statusDataName) === statusObserved;
var hasEmptyStatus = function hasEmptyStatus(element) {
return getStatus(element) === null;
};
var hasStatusLoading = function hasStatusLoading(element) {
return getStatus(element) === statusLoading;
};
var hasStatusError = function hasStatusError(element) {
return getData(element, statusDataName) === statusError;
return getStatus(element) === statusError;
};
var hasStatusDelayed = function hasStatusDelayed(element) {
return getStatus(element) === statusDelayed;
};
var statusesAfterLoading = [statusLoading, statusApplied, statusLoaded, statusError];
var hasStatusAfterLoading = function hasStatusAfterLoading(element) {
return statusesAfterLoading.indexOf(getStatus(element)) > -1;
};
var setTimeoutData = function setTimeoutData(element, value) {

@@ -201,2 +213,17 @@ return setData(element, timeoutDataName, value);

var unobserve = function unobserve(element, settings, instance) {
if (!instance) return;
var observer = instance._observer;
if (!observer || !settings.auto_unobserve) return;
observer.unobserve(element);
};
var resetObserver = function resetObserver(observer) {
observer.disconnect();
};
var _src_ = "src";
var _srcset_ = "srcset";
var _sizes_ = "sizes";
var _poster_ = "poster";
var _PICTURE_ = "PICTURE";
var increaseLoadingCount = function increaseLoadingCount(instance) {

@@ -224,21 +251,61 @@ if (!instance) return;

};
var resetAttribute = function resetAttribute(element, attrName) {
element.removeAttribute(attrName);
};
var hasOriginalAttributes = function hasOriginalAttributes(element) {
return !!element.llOriginalAttrs;
};
var saveOriginalImageAttributes = function saveOriginalImageAttributes(element) {
if (hasOriginalAttributes(element)) return;
var originalAttributes = {};
originalAttributes[_src_] = element.getAttribute(_src_);
originalAttributes[_srcset_] = element.getAttribute(_srcset_);
originalAttributes[_sizes_] = element.getAttribute(_sizes_);
element.llOriginalAttrs = originalAttributes;
};
var restoreOriginalImageAttributes = function restoreOriginalImageAttributes(element) {
if (!hasOriginalAttributes(element)) return;
var originalAttributes = element.llOriginalAttrs;
setAttributeIfValue(element, _src_, originalAttributes[_src_]);
setAttributeIfValue(element, _srcset_, originalAttributes[_srcset_]);
setAttributeIfValue(element, _sizes_, originalAttributes[_sizes_]);
};
var setImageAttributes = function setImageAttributes(element, settings) {
setAttributeIfValue(element, "sizes", getData(element, settings.data_sizes));
setAttributeIfValue(element, "srcset", getData(element, settings.data_srcset));
setAttributeIfValue(element, "src", getData(element, settings.data_src));
setAttributeIfValue(element, _sizes_, getData(element, settings.data_sizes));
setAttributeIfValue(element, _srcset_, getData(element, settings.data_srcset));
setAttributeIfValue(element, _src_, getData(element, settings.data_src));
};
var resetImageAttributes = function resetImageAttributes(element) {
resetAttribute(element, _src_);
resetAttribute(element, _srcset_);
resetAttribute(element, _sizes_);
};
var forEachPictureSource = function forEachPictureSource(element, fn) {
var parent = element.parentNode;
if (!parent || parent.tagName !== _PICTURE_) return;
var sourceTags = getSourceTags(parent);
sourceTags.forEach(fn);
};
var restoreOriginalAttributesImg = function restoreOriginalAttributesImg(element) {
forEachPictureSource(element, function (sourceTag) {
restoreOriginalImageAttributes(sourceTag);
});
restoreOriginalImageAttributes(element);
};
var setSourcesImg = function setSourcesImg(element, settings) {
var parent = element.parentNode;
if (parent && parent.tagName === "PICTURE") {
var sourceTags = getSourceTags(parent);
sourceTags.forEach(function (sourceTag) {
setImageAttributes(sourceTag, settings);
});
}
forEachPictureSource(element, function (sourceTag) {
saveOriginalImageAttributes(sourceTag);
setImageAttributes(sourceTag, settings);
});
saveOriginalImageAttributes(element);
setImageAttributes(element, settings);
};
var resetSourcesImg = function resetSourcesImg(element) {
forEachPictureSource(element, function (sourceTag) {
resetImageAttributes(sourceTag);
});
resetImageAttributes(element);
};
var setSourcesIframe = function setSourcesIframe(element, settings) {
setAttributeIfValue(element, "src", getData(element, settings.data_src));
setAttributeIfValue(element, _src_, getData(element, settings.data_src));
};

@@ -248,6 +315,6 @@ var setSourcesVideo = function setSourcesVideo(element, settings) {

sourceTags.forEach(function (sourceTag) {
setAttributeIfValue(sourceTag, "src", getData(sourceTag, settings.data_src));
setAttributeIfValue(sourceTag, _src_, getData(sourceTag, settings.data_src));
});
setAttributeIfValue(element, "poster", getData(element, settings.data_poster));
setAttributeIfValue(element, "src", getData(element, settings.data_src));
setAttributeIfValue(element, _poster_, getData(element, settings.data_poster));
setAttributeIfValue(element, _src_, getData(element, settings.data_src));
element.load();

@@ -260,13 +327,2 @@ };

};
var setSources = function setSources(element, settings, instance) {
var 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
};
var setBackground = function setBackground(element, settings, instance) {

@@ -278,3 +334,3 @@ var bg1xValue = getData(element, settings.data_bg);

element.style.backgroundImage = "url(\"".concat(bgDataValue, "\")");
getTempImage(element).setAttribute("src", bgDataValue); // Annotate and notify loading
getTempImage(element).setAttribute(_src_, bgDataValue); // Annotate and notify loading

@@ -299,5 +355,18 @@ increaseLoadingCount(instance);

setStatus(element, statusApplied);
unobserve(element, settings, instance); // Unobserve here because we can't do it on load
safeCallback(settings.callback_applied, element, instance);
};
var setSources = function setSources(element, settings, instance) {
var 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
};
var genericLoadEventName = "load";

@@ -310,3 +379,3 @@ var mediaLoadEventName = "loadeddata";

};
var decreaseLoadingCount = function decreaseLoadingCount(settings, instance) {
var decreaseLoadingCount = function decreaseLoadingCount(instance) {
if (!instance) return;

@@ -321,2 +390,3 @@ instance.loadingCount -= 1;

element.addEventListener(eventName, handler);
element.llEvLisnrs[eventName] = handler;
};

@@ -326,16 +396,28 @@ var removeEventListener = function removeEventListener(element, eventName, handler) {

};
var hasEventListeners = function hasEventListeners(element) {
return !!element.llEvLisnrs;
};
var addEventListeners = function addEventListeners(element, loadHandler, errorHandler) {
if (!hasEventListeners(element)) element.llEvLisnrs = {};
addEventListener(element, genericLoadEventName, loadHandler);
addEventListener(element, errorEventName, errorHandler);
if (element.tagName !== "VIDEO") return;
addEventListener(element, mediaLoadEventName, loadHandler);
addEventListener(element, errorEventName, errorHandler);
};
var removeEventListeners = function removeEventListeners(element, loadHandler, errorHandler) {
removeEventListener(element, genericLoadEventName, loadHandler);
removeEventListener(element, mediaLoadEventName, loadHandler);
removeEventListener(element, errorEventName, errorHandler);
var removeEventListeners = function removeEventListeners(element) {
if (!hasEventListeners(element)) return;
var eventListeners = element.llEvLisnrs;
for (var eventName in eventListeners) {
var handler = eventListeners[eventName];
removeEventListener(element, eventName, handler);
}
delete element.llEvLisnrs;
};
var doneHandler = function doneHandler(element, settings, instance) {
deleteTempImage(element);
decreaseLoadingCount(settings, instance);
decreaseLoadingCount(instance);
removeClass(element, settings.class_loading);
unobserve(element, settings, instance);
};

@@ -358,6 +440,7 @@ var loadHandler = function loadHandler(event, element, settings, instance) {

var elementToListenTo = getTempImage(element) || element;
if (hasEventListeners(elementToListenTo)) return; // <- when retry loading, e.g. with cancel_on_exit
var _loadHandler = function _loadHandler(event) {
loadHandler(event, element, settings, instance);
removeEventListeners(elementToListenTo, _loadHandler, _errorHandler);
removeEventListeners(elementToListenTo);
};

@@ -367,3 +450,3 @@

errorHandler(event, element, settings, instance);
removeEventListeners(elementToListenTo, _loadHandler, _errorHandler);
removeEventListeners(elementToListenTo);
};

@@ -374,13 +457,9 @@

var decreaseToLoadCount = function decreaseToLoadCount(settings, instance) {
var decreaseToLoadCount = function decreaseToLoadCount(instance) {
if (!instance) return;
instance.toLoadCount -= 1;
};
var unobserve = function unobserve(element, instance) {
var increaseToLoadCount = function increaseToLoadCount(instance) {
if (!instance) return;
var observer = instance._observer;
if (observer && instance._settings.auto_unobserve) {
observer.unobserve(element);
}
instance.toLoadCount += 1;
};

@@ -407,4 +486,3 @@

decreaseToLoadCount(settings, instance);
unobserve(element, instance);
decreaseToLoadCount(instance);
checkFinish(settings, instance);

@@ -415,3 +493,3 @@ };

setSources(element, settings, instance);
decreaseToLoadCount(settings, instance);
decreaseToLoadCount(instance);
setStatus(element, statusNative);

@@ -428,2 +506,7 @@ checkFinish(settings, instance);

if (hasStatusDelayed(element)) {
// iffing because status could also be "loading"
resetStatus(element);
}
clearTimeout(timeoutId);

@@ -444,25 +527,44 @@ setTimeoutData(element, null);

}, loadDelay);
setStatus(element, statusDelayed);
setTimeoutData(element, timeoutId);
};
var onEnter = function onEnter(element, entry, instance) {
var settings = instance._settings;
var cancelIfLoading = function cancelIfLoading(element, entry, settings, instance) {
if (element.tagName !== "IMG") return;
removeEventListeners(element);
resetSourcesImg(element);
restoreOriginalAttributesImg(element);
removeClass(element, settings.class_loading);
decreaseLoadingCount(instance);
safeCallback(settings.callback_cancel, element, entry, instance); // setTimeout is needed because the "callback_cancel" implementation
// could be out of the main thread, e.g. `img.setAttribute("src", "")`
setTimeout(function () {
instance.resetElementStatus(element, instance);
}, 0);
};
var onIntersecting = function onIntersecting(element, entry, settings, instance) {
safeCallback(settings.callback_enter, element, entry, instance);
if (hasStatusAfterLoading(element)) return; //Prevent loading it again, e.g. on !auto_unobserve
if (!settings.load_delay) {
load(element, settings, instance);
if (settings.load_delay) {
delayLoad(element, settings, instance);
return;
}
delayLoad(element, settings, instance);
load(element, settings, instance);
};
var onExit = function onExit(element, entry, instance) {
var settings = instance._settings;
var onNotIntersecting = function onNotIntersecting(element, entry, settings, instance) {
if (hasEmptyStatus(element)) return; //Ignore the first pass at landing
if (settings.cancel_on_exit && hasStatusLoading(element)) {
cancelIfLoading(element, entry, settings, instance);
}
safeCallback(settings.callback_exit, element, entry, instance);
if (!settings.load_delay) {
return;
if (settings.load_delay && hasStatusDelayed(element)) {
cancelDelayLoad(element);
}
cancelDelayLoad(element);
};

@@ -481,3 +583,4 @@

element.setAttribute(loadingString, "lazy");
element.setAttribute(loadingString, "lazy"); //TODO: Move inside the loadNative method
loadNative(element, settings, instance);

@@ -499,9 +602,11 @@ });

var resetObserver = function resetObserver(observer) {
observer.disconnect();
var intersectionHandler = function intersectionHandler(entries, settings, instance) {
entries.forEach(function (entry) {
return isIntersecting(entry) ? onIntersecting(entry.target, entry, settings, instance) : onNotIntersecting(entry.target, entry, settings, instance);
});
};
var observeElements = function observeElements(observer, elements) {
elements.forEach(function (element) {
observer.observe(element);
setStatus(element, statusObserved);
});

@@ -514,2 +619,4 @@ };

var setObserver = function setObserver(instance) {
var settings = instance._settings;
if (!supportsIntersectionObserver || shouldUseNative(instance._settings)) {

@@ -520,6 +627,4 @@ return;

instance._observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
return isIntersecting(entry) ? onEnter(entry.target, entry, instance) : onExit(entry.target, entry, instance);
});
}, getObserverSettings(instance._settings));
intersectionHandler(entries, settings, instance);
}, getObserverSettings(settings));
};

@@ -533,7 +638,4 @@

};
var isToManage = function isToManage(element) {
return !hasAnyStatus(element) || hasStatusObserved(element);
};
var excludeManagedElements = function excludeManagedElements(elements) {
return toArray(elements).filter(isToManage);
return toArray(elements).filter(hasEmptyStatus);
};

@@ -569,2 +671,10 @@ var hasError = function hasError(element) {

var resetElementStatus = function resetElementStatus(element, instance) {
if (hasStatusAfterLoading(element)) {
increaseToLoadCount(instance);
}
setStatus(element, null);
};
var LazyLoad = function LazyLoad(customSettings, elements) {

@@ -616,2 +726,5 @@ this._settings = getExtendedSettings(customSettings);

},
resetElementStatus: function resetElementStatus$1(element) {
resetElementStatus(element, this);
},
// DEPRECATED

@@ -627,4 +740,3 @@ load: function load$1(element) {

load(element, settings);
};
/* Automatic instances creation if required (useful for async script loading) */
}; // Automatic instances creation if required (useful for async script loading)

@@ -631,0 +743,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 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=n&&window.devicePixelRatio>1,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_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",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},l=function(n){return t({},r,n)},c=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)},s=function(t,n){return t.getAttribute("data-"+n)},u=function(t,n,e){var a="data-"+n;null!==e?t.setAttribute(a,e):t.removeAttribute(a)},d=function(t,n){return u(t,"ll-status",n)},f=function(t,n){return u(t,"ll-timeout",n)},_=function(t){return s(t,"ll-timeout")},g=function(t,n,e,a){t&&(void 0===a?void 0===e?t(n):t(n,e):t(n,e,a))},v=function(t,n){o?t.classList.add(n):t.className+=(t.className?" ":"")+n},p=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)},m=function(t){for(var n,e=[],a=0;n=t.children[a];a+=1)"SOURCE"===n.tagName&&e.push(n);return e},y=function(t,n,e){e&&t.setAttribute(n,e)},E=function(t,n){y(t,"sizes",s(t,n.data_sizes)),y(t,"srcset",s(t,n.data_srcset)),y(t,"src",s(t,n.data_src))},w={IMG:function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&m(e).forEach((function(t){E(t,n)}));E(t,n)},IFRAME:function(t,n){y(t,"src",s(t,n.data_src))},VIDEO:function(t,n){m(t).forEach((function(t){y(t,"src",s(t,n.data_src))})),y(t,"poster",s(t,n.data_poster)),y(t,"src",s(t,n.data_src)),t.load()}},I=function(t,n,e){var a=w[t.tagName];a&&(a(t,n),h(e),v(t,n.class_loading),d(t,"loading"),g(n.callback_loading,t,e),g(n.callback_reveal,t,e))},k=["IMG","IFRAME","VIDEO"],L=function(t,n){!n||n.toLoadCount||n.loadingCount||g(t.callback_finish,n)},C=function(t,n,e){t.addEventListener(n,e)},A=function(t,n,e){t.removeEventListener(n,e)},z=function(t,n,e){A(t,"load",n),A(t,"loadeddata",n),A(t,"error",e)},O=function(t,n,e){!function(t){delete t.llTempImage}(t),function(t,n){n&&(n.loadingCount-=1)}(0,e),p(t,n.class_loading)},N=function(t,n,e){var a=b(t)||t,o=function o(r){!function(t,n,e,a){O(n,e,a),v(n,e.class_loaded),d(n,"loaded"),g(e.callback_loaded,n,a),L(e,a)}(0,t,n,e),z(a,o,i)},i=function i(r){!function(t,n,e,a){O(n,e,a),v(n,e.class_error),d(n,"error"),g(e.callback_error,n,a),L(e,a)}(0,t,n,e),z(a,o,i)};!function(t,n,e){C(t,"load",n),C(t,"loadeddata",n),C(t,"error",e)}(a,o,i)},x=function(t,n){n&&(n.toLoadCount-=1)},M=function(t,n,e){!function(t){t.llTempImage=document.createElement("img")}(t),N(t,n,e),function(t,n,e){var a=s(t,n.data_bg),o=s(t,n.data_bg_hidpi),r=i&&o?o:a;r&&(t.style.backgroundImage='url("'.concat(r,'")'),b(t).setAttribute("src",r),h(e),v(t,n.class_loading),d(t,"loading"),g(n.callback_loading,t,e),g(n.callback_reveal,t,e))}(t,n,e),function(t,n,e){var a=s(t,n.data_bg_multi),o=s(t,n.data_bg_multi_hidpi),r=i&&o?o:a;r&&(t.style.backgroundImage=r,v(t,n.class_applied),d(t,"applied"),g(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){N(t,n,e),I(t,n,e)}(t,n,e),x(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=_(t);n&&(clearTimeout(n),f(t,null))},j=function(t,n,e){var a=e._settings;g(a.callback_enter,t,n,e),a.load_delay?function(t,n,e){var a=n.load_delay,o=_(t);o||(o=setTimeout((function(){R(t,n,e),T(t)}),a),f(t,o))}(t,a,e):R(t,a,e)},F=["IMG","IFRAME"],G=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},P=function(t,n,e){t.forEach((function(t){-1!==F.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){N(t,n,e),I(t,n,e),x(0,e),d(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),d(n,"observed")}))}(t,n)},S=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)?j(n.target,n,t):function(t,n,e){var a=e._settings;g(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"}))},U=function(t){return Array.prototype.slice.call(t)},V=function(t){return t.container.querySelectorAll(t.elements_selector)},$=function(t){return!function(t){return null!==s(t,"ll-status")}(t)||function(t){return"observed"===s(t,"ll-status")}(t)},q=function(t){return function(t){return"error"===s(t,"ll-status")}(t)},H=function(t,n){return function(t){return U(t).filter($)}(t||V(n))},B=function(t){var n,e=t._settings;(n=V(e),U(n).filter(q)).forEach((function(t){p(t,e.class_error),function(t){u(t,"ll-status",null)}(t)})),t.update()},J=function(t,e){var a;this._settings=l(t),this.loadingCount=0,S(this),a=this,n&&window.addEventListener("online",(function(t){B(a)})),this.update(e)};return J.prototype={update:function(t){var n=this._settings,o=H(t,n);this.toLoadCount=o.length,!e&&a?G(n)?P(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;H(t,e).forEach((function(t){R(t,e,n)}))},load:function(t){R(t,this._settings,this)}},J.load=function(t,n){var e=l(n);R(t,e)},n&&function(t,n){if(n)if(n.length)for(var e,a=0;e=n[a];a+=1)c(t,e);else c(t,n)}(J,window.lazyLoadOptions),J}));
!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 i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}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),i=n&&"IntersectionObserver"in window,o=n&&"classList"in document.createElement("p"),a=n&&window.devicePixelRatio>1,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_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,cancel_on_exit:!1,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(n){return t({},r,n)},l=function(t,n){var e,i=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(e)},s=function(t,n){return t.getAttribute("data-"+n)},u=function(t,n,e){var i="data-"+n;null!==e?t.setAttribute(i,e):t.removeAttribute(i)},d=function(t){return s(t,"ll-status")},f=function(t,n){return u(t,"ll-status",n)},_=function(t){return f(t,null)},g=function(t){return null===d(t)},v=function(t){return"delayed"===d(t)},b=["loading","applied","loaded","error"],p=function(t){return b.indexOf(d(t))>-1},m=function(t,n){return u(t,"ll-timeout",n)},h=function(t){return s(t,"ll-timeout")},E=function(t,n,e,i){t&&(void 0===i?void 0===e?t(n):t(n,e):t(n,e,i))},y=function(t,n){o?t.classList.add(n):t.className+=(t.className?" ":"")+n},L=function(t,n){o?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},I=function(t){return t.llTempImage},k=function(t,n,e){if(e){var i=e._observer;i&&n.auto_unobserve&&i.unobserve(t)}},A=function(t){t&&(t.loadingCount+=1)},w=function(t){for(var n,e=[],i=0;n=t.children[i];i+=1)"SOURCE"===n.tagName&&e.push(n);return e},z=function(t,n,e){e&&t.setAttribute(n,e)},C=function(t,n){t.removeAttribute(n)},O=function(t){return!!t.llOriginalAttrs},x=function(t){if(!O(t)){var n={};n.src=t.getAttribute("src"),n.srcset=t.getAttribute("srcset"),n.sizes=t.getAttribute("sizes"),t.llOriginalAttrs=n}},N=function(t){if(O(t)){var n=t.llOriginalAttrs;z(t,"src",n.src),z(t,"srcset",n.srcset),z(t,"sizes",n.sizes)}},M=function(t,n){z(t,"sizes",s(t,n.data_sizes)),z(t,"srcset",s(t,n.data_srcset)),z(t,"src",s(t,n.data_src))},R=function(t){C(t,"src"),C(t,"srcset"),C(t,"sizes")},T=function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&w(e).forEach(n)},G={IMG:function(t,n){T(t,(function(t){x(t),M(t,n)})),x(t),M(t,n)},IFRAME:function(t,n){z(t,"src",s(t,n.data_src))},VIDEO:function(t,n){w(t).forEach((function(t){z(t,"src",s(t,n.data_src))})),z(t,"poster",s(t,n.data_poster)),z(t,"src",s(t,n.data_src)),t.load()}},S=function(t,n,e){var i=G[t.tagName];i&&(i(t,n),A(e),y(t,n.class_loading),f(t,"loading"),E(n.callback_loading,t,e),E(n.callback_reveal,t,e))},j=["IMG","IFRAME","VIDEO"],D=function(t){t&&(t.loadingCount-=1)},F=function(t,n){!n||n.toLoadCount||n.loadingCount||E(t.callback_finish,n)},P=function(t,n,e){t.addEventListener(n,e),t.llEvLisnrs[n]=e},V=function(t,n,e){t.removeEventListener(n,e)},U=function(t){return!!t.llEvLisnrs},$=function(t){if(U(t)){var n=t.llEvLisnrs;for(var e in n){var i=n[e];V(t,e,i)}delete t.llEvLisnrs}},q=function(t,n,e){!function(t){delete t.llTempImage}(t),D(e),L(t,n.class_loading),k(t,n,e)},H=function(t,n,e){var i=I(t)||t;if(!U(i)){!function(t,n,e){U(t)||(t.llEvLisnrs={}),P(t,"load",n),P(t,"error",e),"VIDEO"===t.tagName&&P(t,"loadeddata",n)}(i,(function(o){!function(t,n,e,i){q(n,e,i),y(n,e.class_loaded),f(n,"loaded"),E(e.callback_loaded,n,i),F(e,i)}(0,t,n,e),$(i)}),(function(o){!function(t,n,e,i){q(n,e,i),y(n,e.class_error),f(n,"error"),E(e.callback_error,n,i),F(e,i)}(0,t,n,e),$(i)}))}},B=function(t){t&&(t.toLoadCount-=1)},J=function(t,n,e){!function(t){t.llTempImage=document.createElement("img")}(t),H(t,n,e),function(t,n,e){var i=s(t,n.data_bg),o=s(t,n.data_bg_hidpi),r=a&&o?o:i;r&&(t.style.backgroundImage='url("'.concat(r,'")'),I(t).setAttribute("src",r),A(e),y(t,n.class_loading),f(t,"loading"),E(n.callback_loading,t,e),E(n.callback_reveal,t,e))}(t,n,e),function(t,n,e){var i=s(t,n.data_bg_multi),o=s(t,n.data_bg_multi_hidpi),r=a&&o?o:i;r&&(t.style.backgroundImage=r,y(t,n.class_applied),f(t,"applied"),k(t,n,e),E(n.callback_applied,t,e))}(t,n,e)},K=function(t,n,e){!function(t){return j.indexOf(t.tagName)>-1}(t)?J(t,n,e):function(t,n,e){H(t,n,e),S(t,n,e)}(t,n,e),B(e),F(n,e)},Q=function(t){var n=h(t);n&&(v(t)&&_(t),clearTimeout(n),m(t,null))},W=function(t,n,e,i){"IMG"===t.tagName&&($(t),function(t){T(t,(function(t){R(t)})),R(t)}(t),function(t){T(t,(function(t){N(t)})),N(t)}(t),L(t,e.class_loading),D(i),E(e.callback_cancel,t,n,i),setTimeout((function(){i.resetElementStatus(t,i)}),0))},X=function(t,n,e,i){E(e.callback_enter,t,n,i),p(t)||(e.load_delay?function(t,n,e){var i=n.load_delay,o=h(t);o||(o=setTimeout((function(){K(t,n,e),Q(t)}),i),f(t,"delayed"),m(t,o))}(t,e,i):K(t,e,i))},Y=function(t,n,e,i){g(t)||(e.cancel_on_exit&&function(t){return"loading"===d(t)}(t)&&W(t,n,e,i),E(e.callback_exit,t,n,i),e.load_delay&&v(t)&&Q(t))},Z=["IMG","IFRAME"],tt=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},nt=function(t,n,e){t.forEach((function(t){-1!==Z.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){H(t,n,e),S(t,n,e),B(e),f(t,"native"),F(n,e)}(t,n,e))})),e.toLoadCount=0},et=function(t){var n=t._settings;i&&!tt(t._settings)&&(t._observer=new IntersectionObserver((function(e){!function(t,n,e){t.forEach((function(t){return function(t){return t.isIntersecting||t.intersectionRatio>0}(t)?X(t.target,t,n,e):Y(t.target,t,n,e)}))}(e,n,t)}),function(t){return{root:t.container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}}(n)))},it=function(t){return Array.prototype.slice.call(t)},ot=function(t){return t.container.querySelectorAll(t.elements_selector)},at=function(t){return function(t){return"error"===d(t)}(t)},rt=function(t,n){return function(t){return it(t).filter(g)}(t||ot(n))},ct=function(t){var n,e=t._settings;(n=ot(e),it(n).filter(at)).forEach((function(t){L(t,e.class_error),_(t)})),t.update()},lt=function(t,e){var i;this._settings=c(t),this.loadingCount=0,et(this),i=this,n&&window.addEventListener("online",(function(t){ct(i)})),this.update(e)};return lt.prototype={update:function(t){var n,o,a=this._settings,r=rt(t,a);(this.toLoadCount=r.length,!e&&i)?tt(a)?nt(r,a,this):(n=this._observer,o=r,function(t){t.disconnect()}(n),function(t,n){n.forEach((function(n){t.observe(n)}))}(n,o)):this.loadAll(r)},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;rt(t,e).forEach((function(t){K(t,e,n)}))},resetElementStatus:function(t){!function(t,n){p(t)&&function(t){t&&(t.toLoadCount+=1)}(n),f(t,null)}(t,this)},load:function(t){K(t,this._settings,this)}},lt.load=function(t,n){var e=c(n);K(t,e)},n&&function(t,n){if(n)if(n.length)for(var e,i=0;e=n[i];i+=1)l(t,e);else l(t,n)}(lt,window.lazyLoadOptions),lt}));

6

package.json
{
"name": "vanilla-lazyload",
"version": "15.1.1",
"description": "A fast, lightweight script to load images as they enter the viewport. SEO friendly, it supports responsive images (both srcset + sizes and picture) and progressive JPEG",
"version": "15.2.0",
"description": "LazyLoad is a lightweight and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, videos and iframes to when they will enter the viewport. It's written in plain \"vanilla\" JavaScript, it leverages the IntersectionObserver API, it supports responsive images and enables native lazy loading.",
"main": "dist/lazyload.min.js",

@@ -62,4 +62,4 @@ "module": "dist/lazyload.esm.js",

"type": "individual",
"url": "https://www.buymeacoffee.com/verlok"
"url": "https://ko-fi.com/verlok"
}
}

153

README.md

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

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.
LazyLoad is a lightweight and flexible script that **speeds up your web application** by deferring the loading of your below-the-fold images, videos and iframes to **when they will 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 supports [responsive images](https://alistapart.com/article/responsive-images-in-practice) and enables native lazy loading. See [notable features](#-notable-features) for more.
[![vanilla-lazyload (latest)](https://img.shields.io/npm/v/vanilla-lazyload/latest.svg)](https://www.npmjs.com/package/vanilla-lazyload)
[![vanilla-lazyload (downloads)](http://img.shields.io/npm/dy/vanilla-lazyload.svg)](https://www.npmjs.com/package/vanilla-lazyload)
[![vanilla-lazyload (downloads)](https://img.shields.io/npm/dy/vanilla-lazyload.svg)](https://www.npmjs.com/package/vanilla-lazyload)
[![](https://data.jsdelivr.com/v1/package/npm/vanilla-lazyload/badge)](https://www.jsdelivr.com/package/npm/vanilla-lazyload)

@@ -11,3 +11,3 @@

**Like this project? 👍☕ [Buy me a coffee!](https://www.buymeacoffee.com/verlok)**
**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**

@@ -81,4 +81,6 @@ ---

Single background
⚠ **IMPORTANT NOTE**: To display content images on your pages, always use the `img` tag. This would benefit the SEO and the accessibility of your website. To understand if your images are content or background, ask yourself: "would my website user like to see those images when printing out the page?". If the answer is "yes", then your images are content images and you should avoid using background images to display them.
Single background image:
```html

@@ -88,3 +90,3 @@ <div class="lazy" data-bg="lazy.jpg"></div>

Single background, HiDPI screen support
Single background, with HiDPI screen support:

@@ -95,3 +97,3 @@ ```html

Multiple backgrounds
Multiple backgrounds:

@@ -107,4 +109,6 @@ ```html

Multiple backgrounds, HiDPI screen support
ℹ Please note that you must use `url()` to wrap the URLs in your `data-bg-multi` attributes.
Multiple backgrounds, HiDPI screen support:
```html

@@ -120,7 +124,4 @@ <div

Notes:
ℹ Please note that you must use `url()` to wrap the URLs in your `data-bg-multi-hidpi` attributes.
- ⚠ you shouldn't use background images to load content images, they're bad for SEO and for accessibility
- you need to use `url()` in the values of your `data-bg-multi` and `data-bg-multi-hidpi` attributes
#### Lazy video

@@ -146,3 +147,3 @@

**Like this project? 👍☕ [Buy me a coffee!](https://www.buymeacoffee.com/verlok)**
**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**

@@ -153,3 +154,3 @@ ---

The latest, recommended version of LazyLoad is **15.1.1**.
The latest, recommended version of LazyLoad is **15.2.0**.

@@ -171,3 +172,3 @@ Quickly understand how to upgrade from a previous version reading the [practical upgrade guide](UPGRADE.md).

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

@@ -179,3 +180,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@15.1.1/dist/lazyload.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.2.0/dist/lazyload.min.js"></script>
```

@@ -213,3 +214,3 @@

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

@@ -260,3 +261,3 @@

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

@@ -281,3 +282,3 @@ ```

"LazyLoad::Initialized",
function(event) {
function (event) {
window.lazyLoadInstance = event.detail.instance;

@@ -295,3 +296,3 @@ },

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

@@ -311,3 +312,3 @@ ```

// CustomEvent micro-polyfill for Internet Explorer
(function() {
(function () {
if (typeof window.CustomEvent === "function") {

@@ -381,3 +382,3 @@ return false;

**Like this project? 👍☕ [Buy me a coffee!](https://www.buymeacoffee.com/verlok)**
**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**

@@ -408,2 +409,31 @@ ---

### Mixed native and JS-based lazy loading
> 💡 **Use case**: you want to use the `use_native` option to delegate the loading of images to the browsers engine where supported, but you also want to lazily load backgroud images or videos.
HTML
```html
<img class="lazy" alt="A lazy image" data-src="lazy.jpg" />
<iframe class="lazy" data-src="lazyFrame.html"></iframe>
<video class="lazy" controls data-src="lazy.mp4" data-poster="lazy.jpg">...</video>
<div class="lazy" data-bg="lazy.jpg"></div>
```
Javascript
```js
// Instance using native lazy loading
const lazyContent = new LazyLoad({
elements_selector: "img.lazy",
use_native: true // <-- there you go
});
// Instance without native lazy loading
const lazyBackground = new LazyLoad({
elements_selector: "iframe.lazy, video.lazy, div.lazy"
// DON'T PASS use_native: true HERE
});
```
### Scrolling panel(s)

@@ -457,5 +487,26 @@

### Optimize for slower connections
> 💡 **Use case**: to cancel the loading of images that exited the viewport, in order to reserve bandwidth for the new images that entered the viewport.
HTML
```html
<img class="lazy" alt="A lazy image" data-src="lazy.jpg" width="220" height="280" />
```
Javascript
```js
var myLazyLoad = new LazyLoad({
elements_selector: ".lazy",
cancel_on_exit: true
});
```
[DEMO](https://verlok.github.io/lazyload/demos/cancel_on_exit.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/cancel_on_exit.html) | [API](#-api)
### Delay loading
> 💡 **Use case**: if a your scrolls fast over your images, you might wait a short time before the images start loading. This is how.
> 💡 **Use case**: to start loading elements that stayed inside the viewport for a given amount of time.

@@ -523,3 +574,3 @@ HTML

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

@@ -542,3 +593,3 @@ var oneLL = new LazyLoad({

**Like this project? 👍☕ [Buy me a coffee!](https://www.buymeacoffee.com/verlok)**
**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**

@@ -575,2 +626,3 @@ ---

| Settings | Delay loading of lazy images | [Code](demos/delay.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/delay.html) |
| Settings | Cancel downloads on exit, optimizing for slow connections | [Code](demos/cancel_on_exit.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/cancel_on_exit.html) |
| Methods | How to `destroy()` LazyLoad | [Code](demos/destroy.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/destroy.html) |

@@ -590,3 +642,3 @@ | Methods | Adding dynamic content, then `update()` LazyLoad | [Code](demos/dynamic_content.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/dynamic_content.html) |

**Like this project? 👍☕ [Buy me a coffee!](https://www.buymeacoffee.com/verlok)**
**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**

@@ -645,3 +697,3 @@ ---

**Like this project? 👍☕ [Buy me a coffee!](https://www.buymeacoffee.com/verlok)**
**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**

@@ -704,2 +756,3 @@ ---

| `class_error` | The class applied to the elements when the element causes an error. | `"error"` | `"lazy-error"` |
| `cancel_on_exit` | A boolean that defines whether or not to cancel the download of the images that exit the viewport while they are still loading, eventually restoring the original attributes. It applies only to images so to the `img` (and `picture`) tags, so it doesn't apply to background images, `iframe`s nor `video`s. | `false` | `true` |
| `load_delay` | The time (in milliseconds) each image needs to stay inside the viewport before its loading begins. | `0` | `300` |

@@ -709,9 +762,10 @@ | `auto_unobserve` | A boolean that defines whether or not to automatically unobserve elements that was already revealed | `true` | `false` |

| `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)}` |
| `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)}` |
| `callback_cancel` | A callback function which is called whenever an element loading is canceled while loading, as for `cancel_on_exit: true`. | `null` | `(el)=>{console.log("Cancelled", el)}` |
| `callback_loaded` | A callback function which is called whenever an element finishes loading. Note that, in version older than 11.0.0, this option went under the name `callback_load`. Arguments: DOM element, lazyload instance. | `null` | `(el)=>{console.log("Loaded", el)}` |
| `callback_error` | A callback function which is called whenever an element triggers an error. Arguments: DOM element, lazyload instance. | `null` | `(el)=>{console.log("Error", 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_finish` | A callback function which is called when there are no more elements to load _and_ all elements have been downloaded. Arguments: lazyload instance. | `null` | `()=>{console.log("Finish")}` |
| `use_native` | This boolean sets whether or not to use [native lazy loading](https://addyosmani.com/blog/lazy-loading/). On browsers that supports it, LazyLoad will set the `loading="lazy"` attribute on images and iframes, and delegate their loading to the browser. | `false` | `true` |
| `use_native` | This boolean sets whether or not to use [native lazy loading](https://addyosmani.com/blog/lazy-loading/) to do [hybrid lazy loading](https://www.smashingmagazine.com/2019/05/hybrid-lazy-loading-progressive-migration-native/). On browsers that support it, LazyLoad will set the `loading="lazy"` attribute on images and iframes, and delegate their loading to the browser. | `false` | `true` |

@@ -724,8 +778,9 @@ ### Methods

| Method name | Effect |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `update()` | Make LazyLoad to re-check the DOM for `elements_selector` elements inside its `container`. |
| `loadAll()` | Loads all the lazy images right away, no matter if they are inside or outside the viewport. |
| `load(element)` | **⚠ DEPRECATED, use the static method instead**. Immediately loads any lazy `element`, even if it isn't selectable by the `elements_selector` option. |
| `destroy()` | Destroys the instance, unsetting instance variables and removing listeners. |
| Method name | Effect | Use case |
| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `update()` | Make LazyLoad to re-check the DOM for `elements_selector` elements inside its `container`. | Update LazyLoad after you added or removed DOM elements to the page. |
| `loadAll()` | Loads all the lazy images right away, no matter if they are inside or outside the viewport. | To load all the remaining elements in advance |
| `load(element)` | **⚠ DEPRECATED, use the static method instead**. Immediately loads any lazy `element`, even if it isn't selectable by the `elements_selector` option. | To load an element at mouseover or any other event different than "entering the viewport" |
| `destroy()` | Destroys the instance, unsetting instance variables and removing listeners. | Free up some memory. Especially useful for Single Page Applications. |
| `resetElementStatus(element)` | Resets the internal status of the given `element`. | To tell LazyLoad to consider this `element` again, for example if you changed the `data-src` attribute after the previous `data-src` was loaded, call this method, then call `update()`. |

@@ -736,5 +791,5 @@ **Static methods**

| Method name | Effect |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `load(element, settings)` | Immediately loads the lazy `element`. You can pass your custom options in the `settings` parameter. Note that the `elements_selector` option has no effect, since you are passing the element as a parameter. Also note that this method has effect only once on a specific `element`, unless you _manually_ remove the `data-ll-status` attribute from it. |
| Method name | Effect | Use case |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| `load(element, settings)` | Immediately loads the lazy `element`. You can pass your custom options in the `settings` parameter. Note that the `elements_selector` option has no effect, since you are passing the element as a parameter. Also note that this method has effect only once on a specific `element`. | To load an `element` at mouseover or at any other event different than "entering the viewport" |

@@ -752,3 +807,3 @@ ### Properties

**Like this project? 👍☕ [Buy me a coffee!](https://www.buymeacoffee.com/verlok)**
**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**

@@ -767,2 +822,14 @@ ---

### SEO friendly
_LazyLoad_ **doesn't hide your images from search engines**, even if you don't specify any initial `src` for your image.
### Flaky connections supported
If your users lose the internet connection causing errors on images loading, this script tries and loads those images again when the connection is restored.
### Optimize for slow connections
Activating the `cancel_on_exit` option, you can tell LazyLoad to optimize for slow connection by cancelling the download of images when they exit the viewport.
### Support for responsive images

@@ -772,10 +839,6 @@

### SEO friendly
### Support for single and background images, and HiDPI displays
LazyLoad **doesn't hide your images from search engines**, even if you don't specify any initial `src` for your image.
_LazyLoad_ supports single and multiple lazy background images, with standard resolution or HiDPI (retina) displays.
### Flaky connections supported
Starting from version 12.2, if your users lose the internet connection causing errors on images loading, this script tries and loads those images again when the connection is restored.
### Tested on real browsers

@@ -789,4 +852,4 @@

**Like this project? 👍☕ [Buy me a coffee!](https://www.buymeacoffee.com/verlok)**
**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**
---
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