vanilla-lazyload - npm Package Compare versions

Comparing version 16.0.0 to 16.1.0

CHANGELOG.md

@@ -5,2 +5,15 @@ # CHANGELOG
 
+#### 16.1.0
+
+Improved speed, cleaning DOM, better working destroy, and also fixed 2 bugs.
+
+-   Cleaning up `data` attributes from the DOM when finished using them (mainly when elements have finished loading)
+-   Improved `destroy` method, which now also removes lazyload's additions to the DOM elements
+-   Video elements are now only listening to the `loadeddata` event, no longer to `load`
+-   Removed constants containing strings. I thought it would produced shorter minified code, but discovered that terser expands them to strings.
+-   Bugfix: when lazily loading videos, the error `_poster_ is undefined` was thrown
+-   Bugfix: when selecting native lazy loading, the `loading` class was added without knowing whether or not the loading had started
+
+#### 16.0.0
+
 Functional changes:
@@ -7,0 +20,0 @@

dist/lazyload.amd.js

@@ -28,3 +28,3 @@ define(function () { 'use strict';
   var defaultSettings = {
-    elements_selector: "img",
+    elements_selector: "IMG",
     container: isBot || runningOnBrowser ? document : null,
@@ -144,6 +144,8 @@ threshold: 300,
   };
-  var statusesAfterLoading = [statusLoading, statusApplied, statusLoaded, statusError];
-  var hasStatusAfterLoading = function hasStatusAfterLoading(element) {
-    return statusesAfterLoading.indexOf(getStatus(element)) > -1;
+  var hasStatusNative = function hasStatusNative(element) {
+    return getStatus(element) === statusNative;
   };
+  var hadStartedLoading = function hadStartedLoading(element) {
+    return !hasEmptyStatus(element);
+  };
 
@@ -186,3 +188,3 @@ var safeCallback = function safeCallback(callback, arg1, arg2, arg3) {
   var addTempImage = function addTempImage(element) {
-    element.llTempImage = document.createElement("img");
+    element.llTempImage = document.createElement("IMG");
   };
@@ -205,2 +207,5 @@ var deleteTempImage = function deleteTempImage(element) {
   };
+  var unobserveIfRequired = function unobserveIfRequired(element, settings, instance) {
+    if (settings.unobserve_entered) unobserve(element, instance);
+  };
 
@@ -226,7 +231,2 @@ var updateLoadingCount = function updateLoadingCount(instance, delta) {
 
-  var _src_ = "src";
-  var _srcset_ = "srcset";
-  var _sizes_ = "sizes";
-  var _poster_ = "poster";
-  var _PICTURE_ = "PICTURE";
   var getSourceTags = function getSourceTags(parentTag) {
@@ -262,5 +262,5 @@ var sourceTags = [];
     var originalAttributes = {};
-    originalAttributes[_src_] = element.getAttribute(_src_);
-    originalAttributes[_srcset_] = element.getAttribute(_srcset_);
-    originalAttributes[_sizes_] = element.getAttribute(_sizes_);
+    originalAttributes["src"] = element.getAttribute("src");
+    originalAttributes["srcset"] = element.getAttribute("srcset");
+    originalAttributes["sizes"] = element.getAttribute("sizes");
     element.llOriginalAttrs = originalAttributes;
@@ -274,15 +274,15 @@ };
     var originalAttributes = element.llOriginalAttrs;
-    setAttributeIfValue(element, _src_, originalAttributes[_src_]);
-    setAttributeIfValue(element, _srcset_, originalAttributes[_srcset_]);
-    setAttributeIfValue(element, _sizes_, originalAttributes[_sizes_]);
+    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_);
+    resetAttribute(element, "src");
+    resetAttribute(element, "srcset");
+    resetAttribute(element, "sizes");
   };
@@ -292,3 +292,3 @@ var forEachPictureSource = function forEachPictureSource(element, fn) {
 
-    if (!parent || parent.tagName !== _PICTURE_) {
+    if (!parent || parent.tagName !== "PICTURE") {
       return;
@@ -300,2 +300,6 @@ }
   };
+  var forEachVideoSource = function forEachVideoSource(element, fn) {
+    var sourceTags = getSourceTags(element);
+    sourceTags.forEach(fn);
+  };
   var restoreOriginalAttributesImg = function restoreOriginalAttributesImg(element) {
@@ -322,11 +326,10 @@ forEachPictureSource(element, function (sourceTag) {
   var setSourcesIframe = function setSourcesIframe(element, settings) {
-    setAttributeIfValue(element, _src_, getData(element, settings.data_src));
+    setAttributeIfValue(element, "src", getData(element, settings.data_src));
   };
   var setSourcesVideo = function setSourcesVideo(element, settings) {
-    var sourceTags = getSourceTags(element);
-    sourceTags.forEach(function (sourceTag) {
-      setAttributeIfValue(sourceTag, _src_, getData(sourceTag, settings.data_src));
+    forEachVideoSource(element, function (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();
@@ -345,8 +348,4 @@ };
     element.style.backgroundImage = "url(\"".concat(bgDataValue, "\")");
-    getTempImage(element).setAttribute(_src_, bgDataValue); // Annotate and notify loading
-
-    updateLoadingCount(instance, +1);
-    addClass(element, settings.class_loading);
-    setStatus(element, statusLoading);
-    safeCallback(settings.callback_loading, element, instance);
+    getTempImage(element).setAttribute("src", bgDataValue);
+    manageLoading(element, settings, instance);
   }; // NOTE: THE TEMP IMAGE TRICK CANNOT BE DONE WITH data-multi-bg
@@ -365,7 +364,18 @@ // BECAUSE INSIDE ITS VALUES MUST BE WRAPPED WITH URL() AND ONE OF THEM
 
-    element.style.backgroundImage = bgDataValue; // Annotate and notify applied
+    element.style.backgroundImage = bgDataValue;
+    manageApplied(element, settings, instance);
+  };
+  var setSources = function setSources(element, settings) {
+    var setSourcesFunction = setSourcesFunctions[element.tagName];
 
+    if (!setSourcesFunction) {
+      return;
+    }
+
+    setSourcesFunction(element, settings);
+  };
+  var manageApplied = function manageApplied(element, settings, instance) {
     addClass(element, settings.class_applied);
     setStatus(element, statusApplied);
-    safeCallback(settings.callback_applied, element, instance);
+    removeDataMultiBackground(element, settings);
 
@@ -376,12 +386,6 @@ if (settings.unobserve_completed) {
     }
+
+    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
-
+  var manageLoading = function manageLoading(element, settings, instance) {
     updateLoadingCount(instance, +1);
@@ -391,7 +395,47 @@ addClass(element, settings.class_loading);
     safeCallback(settings.callback_loading, element, instance);
+  }; // REMOVE DATA ATTRIBUTES --------------
+
+  var removeDataImg = function removeDataImg(element, settings) {
+    setData(element, settings.data_src, null);
+    setData(element, settings.data_srcset, null);
+    setData(element, settings.data_sizes, null);
+    forEachPictureSource(element, function (sourceTag) {
+      setData(sourceTag, settings.data_srcset, null);
+      setData(sourceTag, settings.data_sizes, null);
+    });
   };
+  var removeDataIframe = function removeDataIframe(element, settings) {
+    setData(element, settings.data_src, null);
+  };
+  var removeDataVideo = function removeDataVideo(element, settings) {
+    setData(element, settings.data_src, null);
+    setData(element, settings.data_poster, null);
+    forEachVideoSource(element, function (sourceTag) {
+      setData(sourceTag, settings.data_src, null);
+    });
+  };
+  var removeDataFunctions = {
+    IMG: removeDataImg,
+    IFRAME: removeDataIframe,
+    VIDEO: removeDataVideo
+  };
+  var removeDataBackground = function removeDataBackground(element, settings) {
+    setData(element, settings.data_bg, null);
+    setData(element, settings.data_bg_hidpi, null);
+  };
+  var removeDataMultiBackground = function removeDataMultiBackground(element, settings) {
+    setData(element, settings.data_bg_multi, null);
+    setData(element, settings.data_bg_multi_hidpi, null);
+  };
+  var removeDataAttributes = function removeDataAttributes(element, settings) {
+    var removeDataFunction = removeDataFunctions[element.tagName];
 
-  var genericLoadEventName = "load";
-  var mediaLoadEventName = "loadeddata";
-  var errorEventName = "error";
+    if (removeDataFunction) {
+      removeDataFunction(element, settings);
+      return;
+    }
+
+    removeDataBackground(element, settings);
+  };
+
   var elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"];
@@ -418,8 +462,5 @@ var hasLoadEvent = function hasLoadEvent(element) {
     if (!hasEventListeners(element)) element.llEvLisnrs = {};
-    addEventListener(element, genericLoadEventName, loadHandler);
-    addEventListener(element, errorEventName, errorHandler);
-
-    if (element.tagName === "VIDEO") {
-      addEventListener(element, mediaLoadEventName, loadHandler);
-    }
+    var loadEventName = element.tagName === "VIDEO" ? "loadeddata" : "load";
+    addEventListener(element, loadEventName, loadHandler);
+    addEventListener(element, "error", errorHandler);
   };
@@ -451,9 +492,12 @@ var removeEventListeners = function removeEventListeners(element) {
   var loadHandler = function loadHandler(event, element, settings, instance) {
+    var goingNative = hasStatusNative(element);
     doneHandler(element, settings, instance);
     addClass(element, settings.class_loaded);
     setStatus(element, statusLoaded);
+    removeDataAttributes(element, settings);
     safeCallback(settings.callback_loaded, element, instance);
-    checkFinish(settings, instance);
+    if (!goingNative) checkFinish(settings, instance);
   };
   var errorHandler = function errorHandler(event, element, settings, instance) {
+    var goingNative = hasStatusNative(element);
     doneHandler(element, settings, instance);
@@ -463,3 +507,3 @@ addClass(element, settings.class_error);
     safeCallback(settings.callback_error, element, instance);
-    checkFinish(settings, instance);
+    if (!goingNative) checkFinish(settings, instance);
   };
@@ -496,3 +540,4 @@ var addOneShotEventListeners = function addOneShotEventListeners(element, settings, instance) {
     addOneShotEventListeners(element, settings, instance);
-    setSources(element, settings, instance);
+    setSources(element, settings);
+    manageLoading(element, settings, instance);
   };
@@ -506,17 +551,14 @@
     }
-
-    checkFinish(settings, instance);
   };
   var loadNative = function loadNative(element, settings, instance) {
     addOneShotEventListeners(element, settings, instance);
-    setSources(element, settings, instance);
+    setSources(element, settings);
+    removeDataAttributes(element, settings);
     setStatus(element, statusNative);
-    checkFinish(settings, instance);
   };
 
-  var cancelIfLoading = function cancelIfLoading(element, entry, settings, instance) {
-    if (element.tagName !== "IMG") {
-      // Can't cancel loading on anything but images
-      return;
-    }
+  var cancelLoadingIfRequired = function cancelLoadingIfRequired(element, entry, settings, instance) {
+    if (!settings.cancel_on_exit) return;
+    if (!hasStatusLoading(element)) return;
+    if (element.tagName !== "IMG") return; //Works only on images
 
@@ -528,8 +570,4 @@ removeEventListeners(element);
     updateLoadingCount(instance, -1);
-    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 () {
-      resetStatus(element);
-    }, 0);
+    resetStatus(element);
+    safeCallback(settings.callback_cancel, element, entry, instance);
   };
@@ -539,37 +577,25 @@
     safeCallback(settings.callback_enter, element, entry, instance);
+    unobserveIfRequired(element, settings, instance);
+    if (hadStartedLoading(element)) return; //Prevent loading it again
 
-    if (hasStatusAfterLoading(element)) {
-      return; //Prevent loading it again
-    }
-
-    if (settings.unobserve_entered) {
-      unobserve(element, instance);
-    }
-
     load(element, settings, instance);
   };
   var onExit = function onExit(element, entry, settings, instance) {
-    if (hasEmptyStatus(element)) {
-      return; //Ignore the first pass, at landing
-    }
+    if (hasEmptyStatus(element)) return; //Ignore the first pass, at landing
 
-    if (settings.cancel_on_exit && hasStatusLoading(element)) {
-      cancelIfLoading(element, entry, settings, instance);
-    }
-
+    cancelLoadingIfRequired(element, entry, settings, instance);
     safeCallback(settings.callback_exit, element, entry, instance);
   };
 
-  var nativeLazyTags = ["IMG", "IFRAME"];
-  var loadingString = "loading";
+  var tagsWithNativeLazy = ["IMG", "IFRAME"];
   var shouldUseNative = function shouldUseNative(settings) {
-    return settings.use_native && loadingString in HTMLImageElement.prototype;
+    return settings.use_native && "loading" in HTMLImageElement.prototype;
   };
   var loadAllNative = function loadAllNative(elements, settings, instance) {
     elements.forEach(function (element) {
-      if (nativeLazyTags.indexOf(element.tagName) === -1) {
+      if (tagsWithNativeLazy.indexOf(element.tagName) === -1) {
         return;
       }
 
-      element.setAttribute(loadingString, "lazy"); //TODO: Move inside the loadNative method
+      element.setAttribute("loading", "lazy"); //TODO: Move inside the loadNative method
 
@@ -685,4 +711,9 @@ loadNative(element, settings, instance);
         this._observer.disconnect();
-      }
+      } // Clean custom attributes on elements
 
+
+      queryElements(this._settings).forEach(function (element) {
+        delete element.llOriginalAttrs;
+      }); // Delete all internal props
+
       delete this._observer;
@@ -689,0 +720,0 @@ delete this._settings;

dist/lazyload.amd.min.js

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

dist/lazyload.esm.js

@@ -14,3 +14,3 @@ const runningOnBrowser = typeof window !== "undefined";
 const defaultSettings = {
-    elements_selector: "img",
+    elements_selector: "IMG",
     container: isBot || runningOnBrowser ? document : null,
@@ -45,3 +45,3 @@ threshold: 300,
 
-const getExtendedSettings = customSettings => {
+const getExtendedSettings = (customSettings) => {
     return Object.assign({}, defaultSettings, customSettings);
@@ -112,7 +112,5 @@ };
 const hasStatusError = (element) => getStatus(element) === statusError;
+const hasStatusNative = (element) => getStatus(element) === statusNative;
+const hadStartedLoading = (element) => !hasEmptyStatus(element);
 
-const statusesAfterLoading = [statusLoading, statusApplied, statusLoaded, statusError];
-const hasStatusAfterLoading = (element) =>
-    statusesAfterLoading.indexOf(getStatus(element)) > -1;
-
 const safeCallback = (callback, arg1, arg2, arg3) => {
@@ -153,11 +151,11 @@ if (!callback) {
 
-const addTempImage = element => {
-    element.llTempImage = document.createElement("img");
+const addTempImage = (element) => {
+    element.llTempImage = document.createElement("IMG");
 };
 
-const deleteTempImage = element => {
+const deleteTempImage = (element) => {
     delete element.llTempImage;
 };
 
-const getTempImage = element => element.llTempImage;
+const getTempImage = (element) => element.llTempImage;
 
@@ -175,2 +173,6 @@ const unobserve = (element, instance) => {
 
+const unobserveIfRequired = (element, settings, instance) => {
+    if (settings.unobserve_entered) unobserve(element, instance);
+};
+
 const updateLoadingCount = (instance, delta) => {
@@ -195,8 +197,2 @@ if (!instance) return;
 
-const _src_ = "src";
-const _srcset_ = "srcset";
-const _sizes_ = "sizes";
-const _poster_ = "poster";
-const _PICTURE_ = "PICTURE";
-
 const getSourceTags = (parentTag) => {
@@ -232,5 +228,5 @@ let sourceTags = [];
     const originalAttributes = {};
-    originalAttributes[_src_] = element.getAttribute(_src_);
-    originalAttributes[_srcset_] = element.getAttribute(_srcset_);
-    originalAttributes[_sizes_] = element.getAttribute(_sizes_);
+    originalAttributes["src"] = element.getAttribute("src");
+    originalAttributes["srcset"] = element.getAttribute("srcset");
+    originalAttributes["sizes"] = element.getAttribute("sizes");
     element.llOriginalAttrs = originalAttributes;
@@ -244,17 +240,17 @@ };
     const originalAttributes = element.llOriginalAttrs;
-    setAttributeIfValue(element, _src_, originalAttributes[_src_]);
-    setAttributeIfValue(element, _srcset_, originalAttributes[_srcset_]);
-    setAttributeIfValue(element, _sizes_, originalAttributes[_sizes_]);
+    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 resetImageAttributes = (element) => {
-    resetAttribute(element, _src_);
-    resetAttribute(element, _srcset_);
-    resetAttribute(element, _sizes_);
+    resetAttribute(element, "src");
+    resetAttribute(element, "srcset");
+    resetAttribute(element, "sizes");
 };
@@ -264,3 +260,3 @@
     const parent = element.parentNode;
-    if (!parent || parent.tagName !== _PICTURE_) {
+    if (!parent || parent.tagName !== "PICTURE") {
         return;
@@ -272,2 +268,7 @@ }
 
+const forEachVideoSource = (element, fn) => {
+    let sourceTags = getSourceTags(element);
+    sourceTags.forEach(fn);
+};
+
 const restoreOriginalAttributesImg = (element) => {
@@ -297,12 +298,11 @@ forEachPictureSource(element, (sourceTag) => {
 const setSourcesIframe = (element, settings) => {
-    setAttributeIfValue(element, _src_, getData(element, settings.data_src));
+    setAttributeIfValue(element, "src", getData(element, settings.data_src));
 };
 
 const setSourcesVideo = (element, settings) => {
-    let sourceTags = getSourceTags(element);
-    sourceTags.forEach((sourceTag) => {
-        setAttributeIfValue(sourceTag, _src_, getData(sourceTag, settings.data_src));
+    forEachVideoSource(element, (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();
@@ -323,8 +323,4 @@ };
     element.style.backgroundImage = `url("${bgDataValue}")`;
-    getTempImage(element).setAttribute(_src_, bgDataValue);
-    // Annotate and notify loading
-    updateLoadingCount(instance, +1);
-    addClass(element, settings.class_loading);
-    setStatus(element, statusLoading);
-    safeCallback(settings.callback_loading, element, instance);
+    getTempImage(element).setAttribute("src", bgDataValue);
+    manageLoading(element, settings, instance);
 };
@@ -343,6 +339,17 @@
     element.style.backgroundImage = bgDataValue;
-    // Annotate and notify applied
+    manageApplied(element, settings, instance);
+};
+
+const setSources = (element, settings) => {
+    const setSourcesFunction = setSourcesFunctions[element.tagName];
+    if (!setSourcesFunction) {
+        return;
+    }
+    setSourcesFunction(element, settings);
+};
+
+const manageApplied = (element, settings, instance) => {
     addClass(element, settings.class_applied);
     setStatus(element, statusApplied);
-    safeCallback(settings.callback_applied, element, instance);
+    removeDataMultiBackground(element, settings);
     if (settings.unobserve_completed) {
@@ -352,11 +359,6 @@ // Unobserve now 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
+const manageLoading = (element, settings, instance) => {
     updateLoadingCount(instance, +1);
@@ -368,6 +370,51 @@ addClass(element, settings.class_loading);
 
-const genericLoadEventName = "load";
-const mediaLoadEventName = "loadeddata";
-const errorEventName = "error";
+// REMOVE DATA ATTRIBUTES --------------
 
+const removeDataImg = (element, settings) => {
+    setData(element, settings.data_src, null);
+    setData(element, settings.data_srcset, null);
+    setData(element, settings.data_sizes, null);
+    forEachPictureSource(element, (sourceTag) => {
+        setData(sourceTag, settings.data_srcset, null);
+        setData(sourceTag, settings.data_sizes, null);
+    });
+};
+
+const removeDataIframe = (element, settings) => {
+    setData(element, settings.data_src, null);
+};
+
+const removeDataVideo = (element, settings) => {
+    setData(element, settings.data_src, null);
+    setData(element, settings.data_poster, null);
+    forEachVideoSource(element, (sourceTag) => {
+        setData(sourceTag, settings.data_src, null);
+    });
+};
+
+const removeDataFunctions = {
+    IMG: removeDataImg,
+    IFRAME: removeDataIframe,
+    VIDEO: removeDataVideo
+};
+
+const removeDataBackground = (element, settings) => {
+    setData(element, settings.data_bg, null);
+    setData(element, settings.data_bg_hidpi, null);
+};
+
+const removeDataMultiBackground = (element, settings) => {
+    setData(element, settings.data_bg_multi, null);
+    setData(element, settings.data_bg_multi_hidpi, null);
+};
+
+const removeDataAttributes = (element, settings) => {
+    const removeDataFunction = removeDataFunctions[element.tagName];
+    if (removeDataFunction) {
+        removeDataFunction(element, settings);
+        return;
+    }
+    removeDataBackground(element, settings);
+};
+
 const elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"];
@@ -397,7 +444,5 @@ const hasLoadEvent = (element) => elementsWithLoadEvent.indexOf(element.tagName) > -1;
     if (!hasEventListeners(element)) element.llEvLisnrs = {};
-    addEventListener(element, genericLoadEventName, loadHandler);
-    addEventListener(element, errorEventName, errorHandler);
-    if (element.tagName === "VIDEO") {
-        addEventListener(element, mediaLoadEventName, loadHandler);
-    }
+    const loadEventName = element.tagName === "VIDEO" ? "loadeddata" : "load";
+    addEventListener(element, loadEventName, loadHandler);
+    addEventListener(element, "error", errorHandler);
 };
@@ -428,10 +473,13 @@
 const loadHandler = (event, element, settings, instance) => {
+    const goingNative = hasStatusNative(element);
     doneHandler(element, settings, instance);
     addClass(element, settings.class_loaded);
     setStatus(element, statusLoaded);
+    removeDataAttributes(element, settings);
     safeCallback(settings.callback_loaded, element, instance);
-    checkFinish(settings, instance);
+    if (!goingNative) checkFinish(settings, instance);
 };
 
 const errorHandler = (event, element, settings, instance) => {
+    const goingNative = hasStatusNative(element);
     doneHandler(element, settings, instance);
@@ -441,3 +489,3 @@ addClass(element, settings.class_error);
     safeCallback(settings.callback_error, element, instance);
-    checkFinish(settings, instance);
+    if (!goingNative) checkFinish(settings, instance);
 };
@@ -471,3 +519,4 @@
     addOneShotEventListeners(element, settings, instance);
-    setSources(element, settings, instance);
+    setSources(element, settings);
+    manageLoading(element, settings, instance);
 };
@@ -481,3 +530,2 @@
     }
-    checkFinish(settings, instance);
 };
@@ -487,23 +535,18 @@
     addOneShotEventListeners(element, settings, instance);
-    setSources(element, settings, instance);
+    setSources(element, settings);
+    removeDataAttributes(element, settings);
     setStatus(element, statusNative);
-    checkFinish(settings, instance);
 };
 
-const cancelIfLoading = (element, entry, settings, instance) => {
-	if (element.tagName !== "IMG") {
-		// Can't cancel loading on anything but images
-		return;
-	}
-	removeEventListeners(element);
-	resetSourcesImg(element);
-	restoreOriginalAttributesImg(element);
-	removeClass(element, settings.class_loading);
-	updateLoadingCount(instance, -1);
-	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(() => {
-		resetStatus(element);
-	}, 0);
+const cancelLoadingIfRequired = (element, entry, settings, instance) => {
+    if (!settings.cancel_on_exit) return;
+    if (!hasStatusLoading(element)) return;
+    if (element.tagName !== "IMG") return; //Works only on images
+    removeEventListeners(element);
+    resetSourcesImg(element);
+    restoreOriginalAttributesImg(element);
+    removeClass(element, settings.class_loading);
+    updateLoadingCount(instance, -1);
+    resetStatus(element);
+    safeCallback(settings.callback_cancel, element, entry, instance);
 };
@@ -513,8 +556,4 @@
     safeCallback(settings.callback_enter, element, entry, instance);
-    if (hasStatusAfterLoading(element)) {
-        return; //Prevent loading it again
-    }
-    if (settings.unobserve_entered) {
-        unobserve(element, instance);
-    }
+    unobserveIfRequired(element, settings, instance);
+    if (hadStartedLoading(element)) return; //Prevent loading it again
     load(element, settings, instance);
@@ -524,23 +563,18 @@ };
 const onExit = (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);
-    }
+    if (hasEmptyStatus(element)) return; //Ignore the first pass, at landing
+    cancelLoadingIfRequired(element, entry, settings, instance);
     safeCallback(settings.callback_exit, element, entry, instance);
 };
 
-const nativeLazyTags = ["IMG", "IFRAME"];
-const loadingString = "loading";
+const tagsWithNativeLazy = ["IMG", "IFRAME"];
 
-const shouldUseNative = settings =>
-    settings.use_native && loadingString in HTMLImageElement.prototype;
+const shouldUseNative = (settings) =>
+    settings.use_native && "loading" in HTMLImageElement.prototype;
 
 const loadAllNative = (elements, settings, instance) => {
-    elements.forEach(element => {
-        if (nativeLazyTags.indexOf(element.tagName) === -1) {
+    elements.forEach((element) => {
+        if (tagsWithNativeLazy.indexOf(element.tagName) === -1) {
             return;
         }
-        element.setAttribute(loadingString, "lazy"); //TODO: Move inside the loadNative method
+        element.setAttribute("loading", "lazy"); //TODO: Move inside the loadNative method
         loadNative(element, settings, instance);
@@ -649,2 +683,7 @@ });
         }
+        // Clean custom attributes on elements
+        queryElements(this._settings).forEach((element) => {
+            delete element.llOriginalAttrs;
+        });
+        // Delete all internal props
         delete this._observer;
@@ -651,0 +690,0 @@ delete this._settings;

dist/lazyload.esm.min.js

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

dist/lazyload.iife.js

@@ -29,3 +29,3 @@ var LazyLoad = (function () {
   var defaultSettings = {
-    elements_selector: "img",
+    elements_selector: "IMG",
     container: isBot || runningOnBrowser ? document : null,
@@ -145,6 +145,8 @@ threshold: 300,
   };
-  var statusesAfterLoading = [statusLoading, statusApplied, statusLoaded, statusError];
-  var hasStatusAfterLoading = function hasStatusAfterLoading(element) {
-    return statusesAfterLoading.indexOf(getStatus(element)) > -1;
+  var hasStatusNative = function hasStatusNative(element) {
+    return getStatus(element) === statusNative;
   };
+  var hadStartedLoading = function hadStartedLoading(element) {
+    return !hasEmptyStatus(element);
+  };
 
@@ -187,3 +189,3 @@ var safeCallback = function safeCallback(callback, arg1, arg2, arg3) {
   var addTempImage = function addTempImage(element) {
-    element.llTempImage = document.createElement("img");
+    element.llTempImage = document.createElement("IMG");
   };
@@ -206,2 +208,5 @@ var deleteTempImage = function deleteTempImage(element) {
   };
+  var unobserveIfRequired = function unobserveIfRequired(element, settings, instance) {
+    if (settings.unobserve_entered) unobserve(element, instance);
+  };
 
@@ -227,7 +232,2 @@ var updateLoadingCount = function updateLoadingCount(instance, delta) {
 
-  var _src_ = "src";
-  var _srcset_ = "srcset";
-  var _sizes_ = "sizes";
-  var _poster_ = "poster";
-  var _PICTURE_ = "PICTURE";
   var getSourceTags = function getSourceTags(parentTag) {
@@ -263,5 +263,5 @@ var sourceTags = [];
     var originalAttributes = {};
-    originalAttributes[_src_] = element.getAttribute(_src_);
-    originalAttributes[_srcset_] = element.getAttribute(_srcset_);
-    originalAttributes[_sizes_] = element.getAttribute(_sizes_);
+    originalAttributes["src"] = element.getAttribute("src");
+    originalAttributes["srcset"] = element.getAttribute("srcset");
+    originalAttributes["sizes"] = element.getAttribute("sizes");
     element.llOriginalAttrs = originalAttributes;
@@ -275,15 +275,15 @@ };
     var originalAttributes = element.llOriginalAttrs;
-    setAttributeIfValue(element, _src_, originalAttributes[_src_]);
-    setAttributeIfValue(element, _srcset_, originalAttributes[_srcset_]);
-    setAttributeIfValue(element, _sizes_, originalAttributes[_sizes_]);
+    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_);
+    resetAttribute(element, "src");
+    resetAttribute(element, "srcset");
+    resetAttribute(element, "sizes");
   };
@@ -293,3 +293,3 @@ var forEachPictureSource = function forEachPictureSource(element, fn) {
 
-    if (!parent || parent.tagName !== _PICTURE_) {
+    if (!parent || parent.tagName !== "PICTURE") {
       return;
@@ -301,2 +301,6 @@ }
   };
+  var forEachVideoSource = function forEachVideoSource(element, fn) {
+    var sourceTags = getSourceTags(element);
+    sourceTags.forEach(fn);
+  };
   var restoreOriginalAttributesImg = function restoreOriginalAttributesImg(element) {
@@ -323,11 +327,10 @@ forEachPictureSource(element, function (sourceTag) {
   var setSourcesIframe = function setSourcesIframe(element, settings) {
-    setAttributeIfValue(element, _src_, getData(element, settings.data_src));
+    setAttributeIfValue(element, "src", getData(element, settings.data_src));
   };
   var setSourcesVideo = function setSourcesVideo(element, settings) {
-    var sourceTags = getSourceTags(element);
-    sourceTags.forEach(function (sourceTag) {
-      setAttributeIfValue(sourceTag, _src_, getData(sourceTag, settings.data_src));
+    forEachVideoSource(element, function (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();
@@ -346,8 +349,4 @@ };
     element.style.backgroundImage = "url(\"".concat(bgDataValue, "\")");
-    getTempImage(element).setAttribute(_src_, bgDataValue); // Annotate and notify loading
-
-    updateLoadingCount(instance, +1);
-    addClass(element, settings.class_loading);
-    setStatus(element, statusLoading);
-    safeCallback(settings.callback_loading, element, instance);
+    getTempImage(element).setAttribute("src", bgDataValue);
+    manageLoading(element, settings, instance);
   }; // NOTE: THE TEMP IMAGE TRICK CANNOT BE DONE WITH data-multi-bg
@@ -366,7 +365,18 @@ // BECAUSE INSIDE ITS VALUES MUST BE WRAPPED WITH URL() AND ONE OF THEM
 
-    element.style.backgroundImage = bgDataValue; // Annotate and notify applied
+    element.style.backgroundImage = bgDataValue;
+    manageApplied(element, settings, instance);
+  };
+  var setSources = function setSources(element, settings) {
+    var setSourcesFunction = setSourcesFunctions[element.tagName];
 
+    if (!setSourcesFunction) {
+      return;
+    }
+
+    setSourcesFunction(element, settings);
+  };
+  var manageApplied = function manageApplied(element, settings, instance) {
     addClass(element, settings.class_applied);
     setStatus(element, statusApplied);
-    safeCallback(settings.callback_applied, element, instance);
+    removeDataMultiBackground(element, settings);
 
@@ -377,12 +387,6 @@ if (settings.unobserve_completed) {
     }
+
+    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
-
+  var manageLoading = function manageLoading(element, settings, instance) {
     updateLoadingCount(instance, +1);
@@ -392,7 +396,47 @@ addClass(element, settings.class_loading);
     safeCallback(settings.callback_loading, element, instance);
+  }; // REMOVE DATA ATTRIBUTES --------------
+
+  var removeDataImg = function removeDataImg(element, settings) {
+    setData(element, settings.data_src, null);
+    setData(element, settings.data_srcset, null);
+    setData(element, settings.data_sizes, null);
+    forEachPictureSource(element, function (sourceTag) {
+      setData(sourceTag, settings.data_srcset, null);
+      setData(sourceTag, settings.data_sizes, null);
+    });
   };
+  var removeDataIframe = function removeDataIframe(element, settings) {
+    setData(element, settings.data_src, null);
+  };
+  var removeDataVideo = function removeDataVideo(element, settings) {
+    setData(element, settings.data_src, null);
+    setData(element, settings.data_poster, null);
+    forEachVideoSource(element, function (sourceTag) {
+      setData(sourceTag, settings.data_src, null);
+    });
+  };
+  var removeDataFunctions = {
+    IMG: removeDataImg,
+    IFRAME: removeDataIframe,
+    VIDEO: removeDataVideo
+  };
+  var removeDataBackground = function removeDataBackground(element, settings) {
+    setData(element, settings.data_bg, null);
+    setData(element, settings.data_bg_hidpi, null);
+  };
+  var removeDataMultiBackground = function removeDataMultiBackground(element, settings) {
+    setData(element, settings.data_bg_multi, null);
+    setData(element, settings.data_bg_multi_hidpi, null);
+  };
+  var removeDataAttributes = function removeDataAttributes(element, settings) {
+    var removeDataFunction = removeDataFunctions[element.tagName];
 
-  var genericLoadEventName = "load";
-  var mediaLoadEventName = "loadeddata";
-  var errorEventName = "error";
+    if (removeDataFunction) {
+      removeDataFunction(element, settings);
+      return;
+    }
+
+    removeDataBackground(element, settings);
+  };
+
   var elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"];
@@ -419,8 +463,5 @@ var hasLoadEvent = function hasLoadEvent(element) {
     if (!hasEventListeners(element)) element.llEvLisnrs = {};
-    addEventListener(element, genericLoadEventName, loadHandler);
-    addEventListener(element, errorEventName, errorHandler);
-
-    if (element.tagName === "VIDEO") {
-      addEventListener(element, mediaLoadEventName, loadHandler);
-    }
+    var loadEventName = element.tagName === "VIDEO" ? "loadeddata" : "load";
+    addEventListener(element, loadEventName, loadHandler);
+    addEventListener(element, "error", errorHandler);
   };
@@ -452,9 +493,12 @@ var removeEventListeners = function removeEventListeners(element) {
   var loadHandler = function loadHandler(event, element, settings, instance) {
+    var goingNative = hasStatusNative(element);
     doneHandler(element, settings, instance);
     addClass(element, settings.class_loaded);
     setStatus(element, statusLoaded);
+    removeDataAttributes(element, settings);
     safeCallback(settings.callback_loaded, element, instance);
-    checkFinish(settings, instance);
+    if (!goingNative) checkFinish(settings, instance);
   };
   var errorHandler = function errorHandler(event, element, settings, instance) {
+    var goingNative = hasStatusNative(element);
     doneHandler(element, settings, instance);
@@ -464,3 +508,3 @@ addClass(element, settings.class_error);
     safeCallback(settings.callback_error, element, instance);
-    checkFinish(settings, instance);
+    if (!goingNative) checkFinish(settings, instance);
   };
@@ -497,3 +541,4 @@ var addOneShotEventListeners = function addOneShotEventListeners(element, settings, instance) {
     addOneShotEventListeners(element, settings, instance);
-    setSources(element, settings, instance);
+    setSources(element, settings);
+    manageLoading(element, settings, instance);
   };
@@ -507,17 +552,14 @@
     }
-
-    checkFinish(settings, instance);
   };
   var loadNative = function loadNative(element, settings, instance) {
     addOneShotEventListeners(element, settings, instance);
-    setSources(element, settings, instance);
+    setSources(element, settings);
+    removeDataAttributes(element, settings);
     setStatus(element, statusNative);
-    checkFinish(settings, instance);
   };
 
-  var cancelIfLoading = function cancelIfLoading(element, entry, settings, instance) {
-    if (element.tagName !== "IMG") {
-      // Can't cancel loading on anything but images
-      return;
-    }
+  var cancelLoadingIfRequired = function cancelLoadingIfRequired(element, entry, settings, instance) {
+    if (!settings.cancel_on_exit) return;
+    if (!hasStatusLoading(element)) return;
+    if (element.tagName !== "IMG") return; //Works only on images
 
@@ -529,8 +571,4 @@ removeEventListeners(element);
     updateLoadingCount(instance, -1);
-    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 () {
-      resetStatus(element);
-    }, 0);
+    resetStatus(element);
+    safeCallback(settings.callback_cancel, element, entry, instance);
   };
@@ -540,37 +578,25 @@
     safeCallback(settings.callback_enter, element, entry, instance);
+    unobserveIfRequired(element, settings, instance);
+    if (hadStartedLoading(element)) return; //Prevent loading it again
 
-    if (hasStatusAfterLoading(element)) {
-      return; //Prevent loading it again
-    }
-
-    if (settings.unobserve_entered) {
-      unobserve(element, instance);
-    }
-
     load(element, settings, instance);
   };
   var onExit = function onExit(element, entry, settings, instance) {
-    if (hasEmptyStatus(element)) {
-      return; //Ignore the first pass, at landing
-    }
+    if (hasEmptyStatus(element)) return; //Ignore the first pass, at landing
 
-    if (settings.cancel_on_exit && hasStatusLoading(element)) {
-      cancelIfLoading(element, entry, settings, instance);
-    }
-
+    cancelLoadingIfRequired(element, entry, settings, instance);
     safeCallback(settings.callback_exit, element, entry, instance);
   };
 
-  var nativeLazyTags = ["IMG", "IFRAME"];
-  var loadingString = "loading";
+  var tagsWithNativeLazy = ["IMG", "IFRAME"];
   var shouldUseNative = function shouldUseNative(settings) {
-    return settings.use_native && loadingString in HTMLImageElement.prototype;
+    return settings.use_native && "loading" in HTMLImageElement.prototype;
   };
   var loadAllNative = function loadAllNative(elements, settings, instance) {
     elements.forEach(function (element) {
-      if (nativeLazyTags.indexOf(element.tagName) === -1) {
+      if (tagsWithNativeLazy.indexOf(element.tagName) === -1) {
         return;
       }
 
-      element.setAttribute(loadingString, "lazy"); //TODO: Move inside the loadNative method
+      element.setAttribute("loading", "lazy"); //TODO: Move inside the loadNative method
 
@@ -686,4 +712,9 @@ loadNative(element, settings, instance);
         this._observer.disconnect();
-      }
+      } // Clean custom attributes on elements
 
+
+      queryElements(this._settings).forEach(function (element) {
+        delete element.llOriginalAttrs;
+      }); // Delete all internal props
+
       delete this._observer;
@@ -690,0 +721,0 @@ delete this._settings;

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

dist/lazyload.js

@@ -32,3 +32,3 @@ (function (global, factory) {
   var defaultSettings = {
-    elements_selector: "img",
+    elements_selector: "IMG",
     container: isBot || runningOnBrowser ? document : null,
@@ -148,6 +148,8 @@ threshold: 300,
   };
-  var statusesAfterLoading = [statusLoading, statusApplied, statusLoaded, statusError];
-  var hasStatusAfterLoading = function hasStatusAfterLoading(element) {
-    return statusesAfterLoading.indexOf(getStatus(element)) > -1;
+  var hasStatusNative = function hasStatusNative(element) {
+    return getStatus(element) === statusNative;
   };
+  var hadStartedLoading = function hadStartedLoading(element) {
+    return !hasEmptyStatus(element);
+  };
 
@@ -190,3 +192,3 @@ var safeCallback = function safeCallback(callback, arg1, arg2, arg3) {
   var addTempImage = function addTempImage(element) {
-    element.llTempImage = document.createElement("img");
+    element.llTempImage = document.createElement("IMG");
   };
@@ -209,2 +211,5 @@ var deleteTempImage = function deleteTempImage(element) {
   };
+  var unobserveIfRequired = function unobserveIfRequired(element, settings, instance) {
+    if (settings.unobserve_entered) unobserve(element, instance);
+  };
 
@@ -230,7 +235,2 @@ var updateLoadingCount = function updateLoadingCount(instance, delta) {
 
-  var _src_ = "src";
-  var _srcset_ = "srcset";
-  var _sizes_ = "sizes";
-  var _poster_ = "poster";
-  var _PICTURE_ = "PICTURE";
   var getSourceTags = function getSourceTags(parentTag) {
@@ -266,5 +266,5 @@ var sourceTags = [];
     var originalAttributes = {};
-    originalAttributes[_src_] = element.getAttribute(_src_);
-    originalAttributes[_srcset_] = element.getAttribute(_srcset_);
-    originalAttributes[_sizes_] = element.getAttribute(_sizes_);
+    originalAttributes["src"] = element.getAttribute("src");
+    originalAttributes["srcset"] = element.getAttribute("srcset");
+    originalAttributes["sizes"] = element.getAttribute("sizes");
     element.llOriginalAttrs = originalAttributes;
@@ -278,15 +278,15 @@ };
     var originalAttributes = element.llOriginalAttrs;
-    setAttributeIfValue(element, _src_, originalAttributes[_src_]);
-    setAttributeIfValue(element, _srcset_, originalAttributes[_srcset_]);
-    setAttributeIfValue(element, _sizes_, originalAttributes[_sizes_]);
+    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_);
+    resetAttribute(element, "src");
+    resetAttribute(element, "srcset");
+    resetAttribute(element, "sizes");
   };
@@ -296,3 +296,3 @@ var forEachPictureSource = function forEachPictureSource(element, fn) {
 
-    if (!parent || parent.tagName !== _PICTURE_) {
+    if (!parent || parent.tagName !== "PICTURE") {
       return;
@@ -304,2 +304,6 @@ }
   };
+  var forEachVideoSource = function forEachVideoSource(element, fn) {
+    var sourceTags = getSourceTags(element);
+    sourceTags.forEach(fn);
+  };
   var restoreOriginalAttributesImg = function restoreOriginalAttributesImg(element) {
@@ -326,11 +330,10 @@ forEachPictureSource(element, function (sourceTag) {
   var setSourcesIframe = function setSourcesIframe(element, settings) {
-    setAttributeIfValue(element, _src_, getData(element, settings.data_src));
+    setAttributeIfValue(element, "src", getData(element, settings.data_src));
   };
   var setSourcesVideo = function setSourcesVideo(element, settings) {
-    var sourceTags = getSourceTags(element);
-    sourceTags.forEach(function (sourceTag) {
-      setAttributeIfValue(sourceTag, _src_, getData(sourceTag, settings.data_src));
+    forEachVideoSource(element, function (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();
@@ -349,8 +352,4 @@ };
     element.style.backgroundImage = "url(\"".concat(bgDataValue, "\")");
-    getTempImage(element).setAttribute(_src_, bgDataValue); // Annotate and notify loading
-
-    updateLoadingCount(instance, +1);
-    addClass(element, settings.class_loading);
-    setStatus(element, statusLoading);
-    safeCallback(settings.callback_loading, element, instance);
+    getTempImage(element).setAttribute("src", bgDataValue);
+    manageLoading(element, settings, instance);
   }; // NOTE: THE TEMP IMAGE TRICK CANNOT BE DONE WITH data-multi-bg
@@ -369,7 +368,18 @@ // BECAUSE INSIDE ITS VALUES MUST BE WRAPPED WITH URL() AND ONE OF THEM
 
-    element.style.backgroundImage = bgDataValue; // Annotate and notify applied
+    element.style.backgroundImage = bgDataValue;
+    manageApplied(element, settings, instance);
+  };
+  var setSources = function setSources(element, settings) {
+    var setSourcesFunction = setSourcesFunctions[element.tagName];
 
+    if (!setSourcesFunction) {
+      return;
+    }
+
+    setSourcesFunction(element, settings);
+  };
+  var manageApplied = function manageApplied(element, settings, instance) {
     addClass(element, settings.class_applied);
     setStatus(element, statusApplied);
-    safeCallback(settings.callback_applied, element, instance);
+    removeDataMultiBackground(element, settings);
 
@@ -380,12 +390,6 @@ if (settings.unobserve_completed) {
     }
+
+    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
-
+  var manageLoading = function manageLoading(element, settings, instance) {
     updateLoadingCount(instance, +1);
@@ -395,7 +399,47 @@ addClass(element, settings.class_loading);
     safeCallback(settings.callback_loading, element, instance);
+  }; // REMOVE DATA ATTRIBUTES --------------
+
+  var removeDataImg = function removeDataImg(element, settings) {
+    setData(element, settings.data_src, null);
+    setData(element, settings.data_srcset, null);
+    setData(element, settings.data_sizes, null);
+    forEachPictureSource(element, function (sourceTag) {
+      setData(sourceTag, settings.data_srcset, null);
+      setData(sourceTag, settings.data_sizes, null);
+    });
   };
+  var removeDataIframe = function removeDataIframe(element, settings) {
+    setData(element, settings.data_src, null);
+  };
+  var removeDataVideo = function removeDataVideo(element, settings) {
+    setData(element, settings.data_src, null);
+    setData(element, settings.data_poster, null);
+    forEachVideoSource(element, function (sourceTag) {
+      setData(sourceTag, settings.data_src, null);
+    });
+  };
+  var removeDataFunctions = {
+    IMG: removeDataImg,
+    IFRAME: removeDataIframe,
+    VIDEO: removeDataVideo
+  };
+  var removeDataBackground = function removeDataBackground(element, settings) {
+    setData(element, settings.data_bg, null);
+    setData(element, settings.data_bg_hidpi, null);
+  };
+  var removeDataMultiBackground = function removeDataMultiBackground(element, settings) {
+    setData(element, settings.data_bg_multi, null);
+    setData(element, settings.data_bg_multi_hidpi, null);
+  };
+  var removeDataAttributes = function removeDataAttributes(element, settings) {
+    var removeDataFunction = removeDataFunctions[element.tagName];
 
-  var genericLoadEventName = "load";
-  var mediaLoadEventName = "loadeddata";
-  var errorEventName = "error";
+    if (removeDataFunction) {
+      removeDataFunction(element, settings);
+      return;
+    }
+
+    removeDataBackground(element, settings);
+  };
+
   var elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"];
@@ -422,8 +466,5 @@ var hasLoadEvent = function hasLoadEvent(element) {
     if (!hasEventListeners(element)) element.llEvLisnrs = {};
-    addEventListener(element, genericLoadEventName, loadHandler);
-    addEventListener(element, errorEventName, errorHandler);
-
-    if (element.tagName === "VIDEO") {
-      addEventListener(element, mediaLoadEventName, loadHandler);
-    }
+    var loadEventName = element.tagName === "VIDEO" ? "loadeddata" : "load";
+    addEventListener(element, loadEventName, loadHandler);
+    addEventListener(element, "error", errorHandler);
   };
@@ -455,9 +496,12 @@ var removeEventListeners = function removeEventListeners(element) {
   var loadHandler = function loadHandler(event, element, settings, instance) {
+    var goingNative = hasStatusNative(element);
     doneHandler(element, settings, instance);
     addClass(element, settings.class_loaded);
     setStatus(element, statusLoaded);
+    removeDataAttributes(element, settings);
     safeCallback(settings.callback_loaded, element, instance);
-    checkFinish(settings, instance);
+    if (!goingNative) checkFinish(settings, instance);
   };
   var errorHandler = function errorHandler(event, element, settings, instance) {
+    var goingNative = hasStatusNative(element);
     doneHandler(element, settings, instance);
@@ -467,3 +511,3 @@ addClass(element, settings.class_error);
     safeCallback(settings.callback_error, element, instance);
-    checkFinish(settings, instance);
+    if (!goingNative) checkFinish(settings, instance);
   };
@@ -500,3 +544,4 @@ var addOneShotEventListeners = function addOneShotEventListeners(element, settings, instance) {
     addOneShotEventListeners(element, settings, instance);
-    setSources(element, settings, instance);
+    setSources(element, settings);
+    manageLoading(element, settings, instance);
   };
@@ -510,17 +555,14 @@
     }
-
-    checkFinish(settings, instance);
   };
   var loadNative = function loadNative(element, settings, instance) {
     addOneShotEventListeners(element, settings, instance);
-    setSources(element, settings, instance);
+    setSources(element, settings);
+    removeDataAttributes(element, settings);
     setStatus(element, statusNative);
-    checkFinish(settings, instance);
   };
 
-  var cancelIfLoading = function cancelIfLoading(element, entry, settings, instance) {
-    if (element.tagName !== "IMG") {
-      // Can't cancel loading on anything but images
-      return;
-    }
+  var cancelLoadingIfRequired = function cancelLoadingIfRequired(element, entry, settings, instance) {
+    if (!settings.cancel_on_exit) return;
+    if (!hasStatusLoading(element)) return;
+    if (element.tagName !== "IMG") return; //Works only on images
 
@@ -532,8 +574,4 @@ removeEventListeners(element);
     updateLoadingCount(instance, -1);
-    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 () {
-      resetStatus(element);
-    }, 0);
+    resetStatus(element);
+    safeCallback(settings.callback_cancel, element, entry, instance);
   };
@@ -543,37 +581,25 @@
     safeCallback(settings.callback_enter, element, entry, instance);
+    unobserveIfRequired(element, settings, instance);
+    if (hadStartedLoading(element)) return; //Prevent loading it again
 
-    if (hasStatusAfterLoading(element)) {
-      return; //Prevent loading it again
-    }
-
-    if (settings.unobserve_entered) {
-      unobserve(element, instance);
-    }
-
     load(element, settings, instance);
   };
   var onExit = function onExit(element, entry, settings, instance) {
-    if (hasEmptyStatus(element)) {
-      return; //Ignore the first pass, at landing
-    }
+    if (hasEmptyStatus(element)) return; //Ignore the first pass, at landing
 
-    if (settings.cancel_on_exit && hasStatusLoading(element)) {
-      cancelIfLoading(element, entry, settings, instance);
-    }
-
+    cancelLoadingIfRequired(element, entry, settings, instance);
     safeCallback(settings.callback_exit, element, entry, instance);
   };
 
-  var nativeLazyTags = ["IMG", "IFRAME"];
-  var loadingString = "loading";
+  var tagsWithNativeLazy = ["IMG", "IFRAME"];
   var shouldUseNative = function shouldUseNative(settings) {
-    return settings.use_native && loadingString in HTMLImageElement.prototype;
+    return settings.use_native && "loading" in HTMLImageElement.prototype;
   };
   var loadAllNative = function loadAllNative(elements, settings, instance) {
     elements.forEach(function (element) {
-      if (nativeLazyTags.indexOf(element.tagName) === -1) {
+      if (tagsWithNativeLazy.indexOf(element.tagName) === -1) {
         return;
       }
 
-      element.setAttribute(loadingString, "lazy"); //TODO: Move inside the loadNative method
+      element.setAttribute("loading", "lazy"); //TODO: Move inside the loadNative method
 
@@ -689,4 +715,9 @@ loadNative(element, settings, instance);
         this._observer.disconnect();
-      }
+      } // Clean custom attributes on elements
 
+
+      queryElements(this._settings).forEach(function (element) {
+        delete element.llOriginalAttrs;
+      }); // Delete all internal props
+
       delete this._observer;
@@ -693,0 +724,0 @@ delete this._settings;

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

package.json

 {
     "name": "vanilla-lazyload",
-    "version": "16.0.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.",
+    "version": "16.1.0",
+    "description": "LazyLoad is a lightweight (2.4 kB), flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain \"vanilla\" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.",
     "main": "dist/lazyload.min.js",
@@ -11,7 +11,7 @@ "module": "dist/lazyload.esm.js",
     "devDependencies": {
-        "@babel/core": "^7.9.0",
+        "@babel/core": "^7.9.6",
         "@babel/plugin-transform-object-assign": "^7.8.3",
-        "@babel/preset-env": "^7.9.0",
-        "@rollup/plugin-node-resolve": "^7.1.1",
-        "jest": "^25.1.0",
+        "@babel/preset-env": "^7.9.6",
+        "@rollup/plugin-node-resolve": "^7.1.3",
+        "jest": "^25.5.4",
         "rollup": "^1.32.1",
@@ -42,5 +42,6 @@ "rollup-plugin-babel": "^4.4.0",
         "srcset",
+        "sizes",
+        "native",
         "SEO",
         "intersectionObserver",
-        "sizes",
         "progressive",
@@ -47,0 +48,0 @@ "performance",

README.md

@@ -1,2 +0,2 @@
-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.
+LazyLoad is a lightweight (2.4 kB) 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.
 
@@ -147,3 +147,3 @@ [![vanilla-lazyload (latest)](https://img.shields.io/npm/v/vanilla-lazyload/latest.svg)](https://www.npmjs.com/package/vanilla-lazyload)
 
-The latest, recommended version of LazyLoad is **16.0.0**.
+The latest, recommended version of LazyLoad is **16.1.0**.
 
@@ -165,3 +165,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@16.0.0/dist/lazyload.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@16.1.0/dist/lazyload.min.js"></script>
 ```
@@ -173,3 +173,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@16.0.0/dist/lazyload.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@16.1.0/dist/lazyload.min.js"></script>
 ```
@@ -207,3 +207,3 @@
 ```js
-var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@16.0.0/dist/lazyload.amd.min.js";
+var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@16.1.0/dist/lazyload.amd.min.js";
 var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/intersection-observer-amd@2.0.1/intersection-observer-amd.js";
@@ -254,3 +254,3 @@
     async
-    src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@16.0.0/dist/lazyload.min.js"
+    src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@16.1.0/dist/lazyload.min.js"
 ></script>
@@ -288,3 +288,3 @@ ```
     async
-    src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@16.0.0/dist/lazyload.min.js"
+    src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@16.1.0/dist/lazyload.min.js"
 ></script>
@@ -497,23 +497,2 @@ ```
 
-### Delay loading
-
-> 💡 **Use case**: to start loading elements that stayed inside the viewport for a given amount of time.
-
-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",
-    load_delay: 300 //adjust according to use case
-});
-```
-
-[DEMO](https://verlok.github.io/lazyload/demos/delay.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/delay.html) | [API](#-api)
-
 ### Lazy functions
@@ -520,0 +499,0 @@

No alert changes

Improved metrics

Total package byte prevSize

216303

increased by4.4%

Lines of code

2674

increased by5.48%

Worsened metrics

Number of lines in readme file

864

decreased by-2.37%

No dependency changes