vanilla-lazyload - npm Package Compare versions

Comparing version 13.0.1 to 14.0.0

CHANGELOG.md

 # CHANGELOG
 
+## Version 14
+
+#### 14.0.0
+
+Major refactoring and performance improvement!
+File size stays tiny: only 2.07 KB gZipped
+
+**Settings**
+
+-   `callback_loading` is called when an element started loading
+-   `callback_reveal` is now **⚠ DEPRECATED, use `callback_loading` instead** (it's the same thing, it was just renamed). `callback_reveal` will be removed and will stop working in version 15.
+
+**Instance methods**
+
+-   `update()` method now **also unobserves deleted elements**, instead of just looking for and observing new elements
+-   `destroy()` **destroys better** than it did before, `delete`-ing properties instead of setting their values to `null`
+-   `load()` method (as an instance method) is now **⚠ DEPRECATED, use the static method instead**. If you were using `aLazyLoadInstance.load(element)` you should change it to `LazyLoad.load(element, settings)`.
+
+**Static methods**
+
+-   `load()` was added as a static method. Note that if you need to use custom settings, you need to pass them in the `settings` parameter.
+
+**Instance properties**
+
+-   Added `toLoadCount`. It's the counter of the elements that haven't been lazyloaded yet.
+
+**DOM**
+
+-   Removed the `data-was-processed` attribute, that was added to mark lazy DOM elements as "already managed". If you were manually handling that attribute to obtain some goal, this is a potentially breaking change. You should now refer to the `data-ll-status` instead.
+-   Added the `data-ll-status` attribute, which is now used to mark the status of a lazy DOM element. The values it can take are: `observing` (not loaded yet), `loading` (loading started), `loaded` (load completed), `error` (an error has occured), `native` (similar to `observing`, but managed by native lazy loading).
+
 ## Version 13
@@ -227,3 +258,3 @@
 
-Added a public `load` method to force loading any element.
+Added a public `load` method to lazyload any element.
 
@@ -237,3 +268,3 @@ #### 10.9.0
 
-Added a public `loadAll` method to force loading all the images, as asked in #193.
+Added a public `loadAll` method to loading all the images at once, as asked in #193.
 
@@ -381,3 +412,3 @@ #### 10.7.0
 
-Added a public `load` method to force loading any element.
+Added a public `load` method to lazyload any element.
 
@@ -391,3 +422,3 @@ #### 8.10.0
 
-Added a public `loadAll` method to force loading all the images, as asked in #193.
+Added a public `loadAll` method to load all the images, as asked in #193.
 
@@ -394,0 +425,0 @@ #### 8.8.0

dist/lazyload.amd.js

@@ -43,3 +43,3 @@ define(function () { 'use strict';
     callback_exit: null,
-    callback_reveal: null,
+    callback_loading: null,
     callback_loaded: null,
@@ -50,3 +50,3 @@ callback_error: null,
   };
-  var getInstanceSettings = function getInstanceSettings(customSettings) {
+  var getExtendedSettings = function getExtendedSettings(customSettings) {
     return _extends({}, defaultSettings, customSettings);
@@ -98,6 +98,11 @@ };
 
+  var statusObserved = "observed";
+  var statusLoading = "loading";
+  var statusLoaded = "loaded";
+  var statusError = "error";
+  var statusNative = "native";
+
   var dataPrefix = "data-";
-  var processedDataName = "was-processed";
+  var statusDataName = "ll-status";
   var timeoutDataName = "ll-timeout";
-  var trueString = "true";
   var getData = function getData(element, attribute) {
@@ -116,11 +121,17 @@ return element.getAttribute(dataPrefix + attribute);
   };
-  var resetWasProcessedData = function resetWasProcessedData(element) {
-    return setData(element, processedDataName, null);
+  var resetStatus = function resetStatus(element) {
+    return setData(element, statusDataName, null);
   };
-  var setWasProcessedData = function setWasProcessedData(element) {
-    return setData(element, processedDataName, trueString);
+  var setStatus = function setStatus(element, status) {
+    return setData(element, statusDataName, status);
   };
-  var getWasProcessedData = function getWasProcessedData(element) {
-    return getData(element, processedDataName) === trueString;
+  var hasAnyStatus = function hasAnyStatus(element) {
+    return getData(element, statusDataName) !== null;
   };
+  var hasStatusObserved = function hasStatusObserved(element) {
+    return getData(element, statusDataName) === statusObserved;
+  };
+  var hasStatusError = function hasStatusError(element) {
+    return getData(element, statusDataName) === statusError;
+  };
   var setTimeoutData = function setTimeoutData(element, value) {
@@ -133,13 +144,6 @@ return setData(element, timeoutDataName, value);
 
-  var purgeProcessedElements = function purgeProcessedElements(elements) {
-    return elements.filter(function (element) {
-      return !getWasProcessedData(element);
-    });
+  var increaseLoadingCount = function increaseLoadingCount(instance) {
+    if (!instance) return;
+    instance.loadingCount += 1;
   };
-  var purgeOneElement = function purgeOneElement(elements, elementToPurge) {
-    return elements.filter(function (element) {
-      return element !== elementToPurge;
-    });
-  };
-
   var getSourceTags = function getSourceTags(parentTag) {
@@ -209,4 +213,3 @@ var sourceTags = [];
   };
-  var setSources = function setSources(element, instance) {
-    var settings = instance._settings;
+  var setSources = function setSources(element, settings, instance) {
     var tagName = element.tagName;
@@ -217,8 +220,6 @@ var setSourcesFunction = setSourcesFunctions[tagName];
       setSourcesFunction(element, settings);
-      instance.loadingCount += 1;
-      instance._elements = purgeOneElement(instance._elements, element);
-      return;
+      increaseLoadingCount(instance);
+    } else {
+      setSourcesBgImage(element, settings);
     }
-
-    setSourcesBgImage(element, settings);
   };
@@ -264,11 +265,17 @@
   var errorEventName = "error";
-
+  var decreaseLoadingCount = function decreaseLoadingCount(settings, instance) {
+    if (!instance) return;
+    instance.loadingCount -= 1;
+    checkFinish(settings, instance);
+  };
+  var checkFinish = function checkFinish(settings, instance) {
+    if (instance.toLoadCount || instance.loadingCount) return;
+    safeCallback(settings.callback_finish, instance);
+  };
   var addEventListener = function addEventListener(element, eventName, handler) {
     element.addEventListener(eventName, handler);
   };
-
   var removeEventListener = function removeEventListener(element, eventName, handler) {
     element.removeEventListener(eventName, handler);
   };
-
   var addEventListeners = function addEventListeners(element, loadHandler, errorHandler) {
@@ -279,3 +286,2 @@ addEventListener(element, genericLoadEventName, loadHandler);
   };
-
   var removeEventListeners = function removeEventListeners(element, loadHandler, errorHandler) {
@@ -286,36 +292,41 @@ removeEventListener(element, genericLoadEventName, loadHandler);
   };
-
-  var eventHandler = function eventHandler(event, success, instance) {
-    var settings = instance._settings;
-    var className = success ? settings.class_loaded : settings.class_error;
-    var callback = success ? settings.callback_loaded : settings.callback_error;
+  var loadHandler = function loadHandler(event, settings, instance) {
     var element = event.target;
+    setStatus(element, statusLoaded);
     removeClass(element, settings.class_loading);
-    addClass(element, className);
-    safeCallback(callback, element, instance);
-    instance.loadingCount -= 1;
-
-    if (instance._elements.length === 0 && instance.loadingCount === 0) {
-      safeCallback(settings.callback_finish, instance);
-    }
+    addClass(element, settings.class_loaded);
+    safeCallback(settings.callback_loaded, element, instance);
+    decreaseLoadingCount(settings, instance);
   };
-
-  var addOneShotEventListeners = function addOneShotEventListeners(element, instance) {
-    var loadHandler = function loadHandler(event) {
-      eventHandler(event, true, instance);
-      removeEventListeners(element, loadHandler, errorHandler);
+  var errorHandler = function errorHandler(event, settings, instance) {
+    var element = event.target;
+    setStatus(element, statusError);
+    removeClass(element, settings.class_loading);
+    addClass(element, settings.class_error);
+    safeCallback(settings.callback_error, element, instance);
+    decreaseLoadingCount(settings, instance);
+  };
+  var addOneShotEventListeners = function addOneShotEventListeners(element, settings, instance) {
+    var _loadHandler = function _loadHandler(event) {
+      loadHandler(event, settings, instance);
+      removeEventListeners(element, _loadHandler, _errorHandler);
     };
 
-    var errorHandler = function errorHandler(event) {
-      eventHandler(event, false, instance);
-      removeEventListeners(element, loadHandler, errorHandler);
+    var _errorHandler = function _errorHandler(event) {
+      errorHandler(event, settings, instance);
+      removeEventListeners(element, _loadHandler, _errorHandler);
     };
 
-    addEventListeners(element, loadHandler, errorHandler);
+    addEventListeners(element, _loadHandler, _errorHandler);
   };
 
-  var managedTags = ["IMG", "IFRAME", "VIDEO"];
-  var revealAndUnobserve = function revealAndUnobserve(element, instance) {
+  var manageableTags = ["IMG", "IFRAME", "VIDEO"];
+  var decreaseToLoadCount = function decreaseToLoadCount(settings, instance) {
+    if (!instance) return;
+    instance.toLoadCount -= 1;
+    checkFinish(settings, instance);
+  };
+  var unobserve = function unobserve(element, instance) {
+    if (!instance) return;
     var observer = instance._observer;
-    revealElement(element, instance);
 
@@ -326,18 +337,27 @@ if (observer && instance._settings.auto_unobserve) {
   };
-  var revealElement = function revealElement(element, instance, force) {
-    var settings = instance._settings;
-
-    if (!force && getWasProcessedData(element)) {
-      return; // element has already been processed and force wasn't true
-    }
-
-    if (managedTags.indexOf(element.tagName) > -1) {
-      addOneShotEventListeners(element, instance);
+  var isManageableTag = function isManageableTag(element) {
+    return manageableTags.indexOf(element.tagName) > -1;
+  };
+  var enableLoading = function enableLoading(element, settings, instance) {
+    if (isManageableTag(element)) {
+      addOneShotEventListeners(element, settings, instance);
       addClass(element, settings.class_loading);
     }
 
-    setSources(element, instance);
-    setWasProcessedData(element);
+    setSources(element, settings, instance);
+    decreaseToLoadCount(settings, instance);
+  };
+  var load = function load(element, settings, instance) {
+    enableLoading(element, settings, instance);
+    setStatus(element, statusLoading);
+    safeCallback(settings.callback_loading, element, instance);
+    /* DEPRECATED, REMOVE IN V.15 => */
+
     safeCallback(settings.callback_reveal, element, instance);
+    unobserve(element, instance);
   };
+  var loadNative = function loadNative(element, settings, instance) {
+    enableLoading(element, settings, instance);
+    setStatus(element, statusNative);
+  };
 
@@ -354,4 +374,4 @@ var cancelDelayLoad = function cancelDelayLoad(element) {
   };
-  var delayLoad = function delayLoad(element, instance) {
-    var loadDelay = instance._settings.load_delay;
+  var delayLoad = function delayLoad(element, settings, instance) {
+    var loadDelay = settings.load_delay;
     var timeoutId = getTimeoutData(element);
@@ -364,3 +384,3 @@
     timeoutId = setTimeout(function () {
-      revealAndUnobserve(element, instance);
+      load(element, settings, instance);
       cancelDelayLoad(element);
@@ -376,7 +396,7 @@ }, loadDelay);
     if (!settings.load_delay) {
-      revealAndUnobserve(element, instance);
+      load(element, settings, instance);
       return;
     }
 
-    delayLoad(element, instance);
+    delayLoad(element, settings, instance);
   };
@@ -394,2 +414,19 @@ var onExit = function onExit(element, entry, instance) {
 
+  var nativeLazyTags = ["IMG", "IFRAME"];
+  var loadingString = "loading";
+  var shouldUseNative = function shouldUseNative(settings) {
+    return settings.use_native && loadingString in HTMLImageElement.prototype;
+  };
+  var loadAllNative = function loadAllNative(elements, settings, instance) {
+    elements.forEach(function (element) {
+      if (nativeLazyTags.indexOf(element.tagName) === -1) {
+        return;
+      }
+
+      element.setAttribute(loadingString, "lazy");
+      loadNative(element, settings, instance);
+    });
+    instance.toLoadCount = 0;
+  };
+
   var isIntersecting = function isIntersecting(entry) {
@@ -406,5 +443,18 @@ return entry.isIntersecting || entry.intersectionRatio > 0;
 
+  var resetObserver = function resetObserver(observer) {
+    observer.disconnect();
+  };
+  var observeElements = function observeElements(observer, elements) {
+    elements.forEach(function (element) {
+      observer.observe(element);
+      setStatus(element, statusObserved);
+    });
+  };
+  var updateObserver = function updateObserver(observer, elementsToObserve) {
+    resetObserver(observer);
+    observeElements(observer, elementsToObserve);
+  };
   var setObserver = function setObserver(instance) {
-    if (!supportsIntersectionObserver) {
-      return false;
+    if (!supportsIntersectionObserver || shouldUseNative(instance._settings)) {
+      return;
     }
@@ -417,37 +467,32 @@
     }, getObserverSettings(instance._settings));
-    return true;
   };
 
-  var nativeLazyTags = ["IMG", "IFRAME"];
-  var shouldUseNative = function shouldUseNative(settings) {
-    return settings.use_native && "loading" in HTMLImageElement.prototype;
+  var toArray = function toArray(nodeSet) {
+    return Array.prototype.slice.call(nodeSet);
   };
-  var loadAllNative = function loadAllNative(instance) {
-    instance._elements.forEach(function (element) {
-      if (nativeLazyTags.indexOf(element.tagName) === -1) {
-        return;
-      }
-
-      element.setAttribute("loading", "lazy");
-      revealElement(element, instance);
-    });
-  };
-
   var queryElements = function queryElements(settings) {
     return settings.container.querySelectorAll(settings.elements_selector);
   };
-
-  var nodeSetToArray = function nodeSetToArray(nodeSet) {
-    return Array.prototype.slice.call(nodeSet);
+  var isToManage = function isToManage(element) {
+    return !hasAnyStatus(element) || hasStatusObserved(element);
   };
-  var getElements = function getElements(elements, settings) {
-    return purgeProcessedElements(nodeSetToArray(elements || queryElements(settings)));
+  var excludeManagedElements = function excludeManagedElements(elements) {
+    return toArray(elements).filter(isToManage);
   };
+  var hasError = function hasError(element) {
+    return hasStatusError(element);
+  };
+  var filterErrorElements = function filterErrorElements(elements) {
+    return toArray(elements).filter(hasError);
+  };
+  var getElementsToLoad = function getElementsToLoad(elements, settings) {
+    return excludeManagedElements(elements || queryElements(settings));
+  };
 
   var retryLazyLoad = function retryLazyLoad(instance) {
     var settings = instance._settings;
-    var errorElements = settings.container.querySelectorAll("." + settings.class_error);
-    nodeSetToArray(errorElements).forEach(function (element) {
+    var errorElements = filterErrorElements(queryElements(settings));
+    errorElements.forEach(function (element) {
       removeClass(element, settings.class_error);
-      resetWasProcessedData(element);
+      resetStatus(element);
     });
@@ -467,18 +512,17 @@ instance.update();
   var LazyLoad = function LazyLoad(customSettings, elements) {
-    this._settings = getInstanceSettings(customSettings);
+    this._settings = getExtendedSettings(customSettings);
     this.loadingCount = 0;
     setObserver(this);
+    setOnlineCheck(this);
     this.update(elements);
-    setOnlineCheck(this);
   };
 
   LazyLoad.prototype = {
-    update: function update(elements) {
-      var _this = this;
-
+    update: function update(givenNodeset) {
       var settings = this._settings;
-      this._elements = getElements(elements, settings);
+      var elementsToLoad = getElementsToLoad(givenNodeset, settings);
+      this.toLoadCount = elementsToLoad.length;
 
-      if (isBot || !this._observer) {
-        this.loadAll();
+      if (isBot || !supportsIntersectionObserver) {
+        this.loadAll(elementsToLoad);
         return;
@@ -488,37 +532,42 @@ }
       if (shouldUseNative(settings)) {
-        loadAllNative(this);
-        this._elements = getElements(elements, settings);
+        loadAllNative(elementsToLoad, settings, this);
+        return;
       }
 
-      this._elements.forEach(function (element) {
-        _this._observer.observe(element);
-      });
+      updateObserver(this._observer, elementsToLoad);
     },
     destroy: function destroy() {
-      var _this2 = this;
-
+      // Observer
       if (this._observer) {
-        this._elements.forEach(function (element) {
-          _this2._observer.unobserve(element);
-        });
-
-        this._observer = null;
+        this._observer.disconnect();
       }
 
-      this._elements = null;
-      this._settings = null;
+      delete this._observer;
+      delete this._settings;
+      delete this.loadingCount;
+      delete this.toLoadCount;
     },
-    load: function load(element, force) {
-      revealElement(element, this, force);
-    },
-    loadAll: function loadAll() {
-      var _this3 = this;
+    loadAll: function loadAll(elements) {
+      var _this = this;
 
-      this._elements.forEach(function (element) {
-        revealAndUnobserve(element, _this3);
+      var settings = this._settings;
+      var elementsToLoad = getElementsToLoad(elements, settings);
+      elementsToLoad.forEach(function (element) {
+        load(element, settings, _this);
       });
+    },
+    load: function load$1(element) {
+      /* DEPRECATED, REMOVE IN V.15 */
+      load(element, this._settings, this);
     }
   };
+
+  LazyLoad.load = function (element, customSettings) {
+    var settings = getExtendedSettings(customSettings);
+
+    load(element, settings);
+  };
   /* Automatic instances creation if required (useful for async script loading) */
 
+
   if (runningOnBrowser) {
@@ -525,0 +574,0 @@ autoInitialize(LazyLoad, window.lazyLoadOptions);

dist/lazyload.amd.min.js

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

dist/lazyload.esm.js

@@ -31,3 +31,3 @@ const runningOnBrowser = typeof window !== "undefined";
     callback_exit: null,
-    callback_reveal: null,
+    callback_loading: null,
     callback_loaded: null,
@@ -39,3 +39,3 @@ callback_error: null,
 
-const getInstanceSettings = customSettings => {
+const getExtendedSettings = customSettings => {
     return Object.assign({}, defaultSettings, customSettings);
@@ -77,42 +77,44 @@ };
 
+const statusObserved = "observed";
+const statusLoading = "loading";
+const statusLoaded = "loaded";
+const statusError = "error";
+const statusNative = "native";
+
 const dataPrefix = "data-";
-const processedDataName = "was-processed";
+const statusDataName = "ll-status";
 const timeoutDataName = "ll-timeout";
-const trueString = "true";
 
 const getData = (element, attribute) => {
-	return element.getAttribute(dataPrefix + attribute);
+    return element.getAttribute(dataPrefix + attribute);
 };
 
 const setData = (element, attribute, value) => {
-	var attrName = dataPrefix + attribute;
-	if (value === null) {
-		element.removeAttribute(attrName);
-		return;
-	}
-	element.setAttribute(attrName, value);
+    var attrName = dataPrefix + attribute;
+    if (value === null) {
+        element.removeAttribute(attrName);
+        return;
+    }
+    element.setAttribute(attrName, value);
 };
 
-const resetWasProcessedData = element =>
-	setData(element, processedDataName, null);
+const resetStatus = element => setData(element, statusDataName, null);
 
-const setWasProcessedData = element =>
-	setData(element, processedDataName, trueString);
+const setStatus = (element, status) => setData(element, statusDataName, status);
 
-const getWasProcessedData = element =>
-	getData(element, processedDataName) === trueString;
+const hasAnyStatus = element => getData(element, statusDataName) !== null;
 
-const setTimeoutData = (element, value) =>
-	setData(element, timeoutDataName, value);
+const hasStatusObserved = element => getData(element, statusDataName) === statusObserved;
 
+const hasStatusError = element => getData(element, statusDataName) === statusError;
+
+const setTimeoutData = (element, value) => setData(element, timeoutDataName, value);
+
 const getTimeoutData = element => getData(element, timeoutDataName);
 
-const purgeProcessedElements = elements => {
-	return elements.filter(element => !getWasProcessedData(element));
+const increaseLoadingCount = instance => {
+    if (!instance) return;
+    instance.loadingCount += 1;
 };
 
-const purgeOneElement = (elements, elementToPurge) => {
-	return elements.filter(element => element !== elementToPurge);
-};
-
 const getSourceTags = parentTag => {
@@ -187,4 +189,3 @@ let sourceTags = [];
 
-const setSources = (element, instance) => {
-    const settings = instance._settings;
+const setSources = (element, settings, instance) => {
     const tagName = element.tagName;
@@ -194,7 +195,6 @@ const setSourcesFunction = setSourcesFunctions[tagName];
         setSourcesFunction(element, settings);
-        instance.loadingCount += 1;
-        instance._elements = purgeOneElement(instance._elements, element);
-        return;
+        increaseLoadingCount(instance);
+    } else {
+        setSourcesBgImage(element, settings);
     }
-    setSourcesBgImage(element, settings);
 };
@@ -241,2 +241,13 @@
 
+const decreaseLoadingCount = (settings, instance) => {
+    if (!instance) return;
+    instance.loadingCount -= 1;
+    checkFinish(settings, instance);
+};
+
+const checkFinish = (settings, instance) => {
+    if (instance.toLoadCount || instance.loadingCount) return;
+    safeCallback(settings.callback_finish, instance);
+};
+
 const addEventListener = (element, eventName, handler) => {
@@ -262,36 +273,43 @@ element.addEventListener(eventName, handler);
 
-const eventHandler = function(event, success, instance) {
-    var settings = instance._settings;
-    const className = success ? settings.class_loaded : settings.class_error;
-    const callback = success ? settings.callback_loaded : settings.callback_error;
+const loadHandler = (event, settings, instance) => {
     const element = event.target;
+    setStatus(element, statusLoaded);
+    removeClass(element, settings.class_loading);
+    addClass(element, settings.class_loaded);
+    safeCallback(settings.callback_loaded, element, instance);
+    decreaseLoadingCount(settings, instance);
+};
 
+const errorHandler = (event, settings, instance) => {
+    const element = event.target;
+    setStatus(element, statusError);
     removeClass(element, settings.class_loading);
-    addClass(element, className);
-    safeCallback(callback, element, instance);
-
-    instance.loadingCount -= 1;
-
-    if (instance._elements.length === 0 && instance.loadingCount === 0) {
-        safeCallback(settings.callback_finish, instance);
-    }
+    addClass(element, settings.class_error);
+    safeCallback(settings.callback_error, element, instance);
+    decreaseLoadingCount(settings, instance);
 };
 
-const addOneShotEventListeners = (element, instance) => {
-    const loadHandler = event => {
-        eventHandler(event, true, instance);
-        removeEventListeners(element, loadHandler, errorHandler);
+const addOneShotEventListeners = (element, settings, instance) => {
+    const _loadHandler = event => {
+        loadHandler(event, settings, instance);
+        removeEventListeners(element, _loadHandler, _errorHandler);
     };
-    const errorHandler = event => {
-        eventHandler(event, false, instance);
-        removeEventListeners(element, loadHandler, errorHandler);
+    const _errorHandler = event => {
+        errorHandler(event, settings, instance);
+        removeEventListeners(element, _loadHandler, _errorHandler);
     };
-    addEventListeners(element, loadHandler, errorHandler);
+    addEventListeners(element, _loadHandler, _errorHandler);
 };
 
-const managedTags = ["IMG", "IFRAME", "VIDEO"];
+const manageableTags = ["IMG", "IFRAME", "VIDEO"];
 
-const revealAndUnobserve = (element, instance) => {
-    var observer = instance._observer;
-    revealElement(element, instance);
+const decreaseToLoadCount = (settings, instance) => {
+    if (!instance) return;
+    instance.toLoadCount -= 1;
+    checkFinish(settings, instance);
+};
+
+const unobserve = (element, instance) => {
+    if (!instance) return;
+    const observer = instance._observer;
     if (observer && instance._settings.auto_unobserve) {
@@ -302,16 +320,26 @@ observer.unobserve(element);
 
-const revealElement = (element, instance, force) => {
-    var settings = instance._settings;
-    if (!force && getWasProcessedData(element)) {
-        return; // element has already been processed and force wasn't true
-    }
-    if (managedTags.indexOf(element.tagName) > -1) {
-        addOneShotEventListeners(element, instance);
+const isManageableTag = element => manageableTags.indexOf(element.tagName) > -1;
+
+const enableLoading = (element, settings, instance) => {
+    if (isManageableTag(element)) {
+        addOneShotEventListeners(element, settings, instance);
         addClass(element, settings.class_loading);
     }
-    setSources(element, instance);
-    setWasProcessedData(element);
-    safeCallback(settings.callback_reveal, element, instance);
+    setSources(element, settings, instance);
+    decreaseToLoadCount(settings, instance);
 };
 
+const load = (element, settings, instance) => {
+    enableLoading(element, settings, instance);
+    setStatus(element, statusLoading);
+    safeCallback(settings.callback_loading, element, instance);
+    /* DEPRECATED, REMOVE IN V.15 => */ safeCallback(settings.callback_reveal, element, instance);
+    unobserve(element, instance);
+};
+
+const loadNative = (element, settings, instance) => {
+    enableLoading(element, settings, instance);
+    setStatus(element, statusNative);
+};
+
 const cancelDelayLoad = element => {
@@ -326,5 +354,5 @@ var timeoutId = getTimeoutData(element);
 
-const delayLoad = (element, instance) => {
-    var loadDelay = instance._settings.load_delay;
-    var timeoutId = getTimeoutData(element);
+const delayLoad = (element, settings, instance) => {
+    const loadDelay = settings.load_delay;
+    let timeoutId = getTimeoutData(element);
     if (timeoutId) {
@@ -334,3 +362,3 @@ return; // do nothing if timeout already set
     timeoutId = setTimeout(function() {
-        revealAndUnobserve(element, instance);
+        load(element, settings, instance);
         cancelDelayLoad(element);
@@ -345,6 +373,6 @@ }, loadDelay);
     if (!settings.load_delay) {
-        revealAndUnobserve(element, instance);
+        load(element, settings, instance);
         return;
     }
-    delayLoad(element, instance);
+    delayLoad(element, settings, instance);
 };
@@ -361,2 +389,19 @@
 
+const nativeLazyTags = ["IMG", "IFRAME"];
+const loadingString = "loading";
+
+const shouldUseNative = settings =>
+    settings.use_native && loadingString in HTMLImageElement.prototype;
+
+const loadAllNative = (elements, settings, instance) => {
+    elements.forEach(element => {
+        if (nativeLazyTags.indexOf(element.tagName) === -1) {
+            return;
+        }
+        element.setAttribute(loadingString, "lazy");
+        loadNative(element, settings, instance);
+    });
+    instance.toLoadCount = 0;
+};
+
 const isIntersecting = entry => entry.isIntersecting || entry.intersectionRatio > 0;
@@ -369,5 +414,21 @@
 
+const resetObserver = observer => {
+    observer.disconnect();
+};
+
+const observeElements = (observer, elements) => {
+    elements.forEach(element => {
+        observer.observe(element);
+        setStatus(element, statusObserved);
+    });
+};
+
+const updateObserver = (observer, elementsToObserve) => {
+    resetObserver(observer);
+    observeElements(observer, elementsToObserve);
+};
+
 const setObserver = instance => {
-    if (!supportsIntersectionObserver) {
-        return false;
+    if (!supportsIntersectionObserver || shouldUseNative(instance._settings)) {
+        return;
     }
@@ -381,33 +442,24 @@ instance._observer = new IntersectionObserver(entries => {
     }, getObserverSettings(instance._settings));
-    return true;
 };
 
-const nativeLazyTags = ["IMG", "IFRAME"];
+const toArray = nodeSet => Array.prototype.slice.call(nodeSet);
 
-const shouldUseNative = settings =>
-	settings.use_native && "loading" in HTMLImageElement.prototype;
+const queryElements = settings =>
+    settings.container.querySelectorAll(settings.elements_selector);
 
-const loadAllNative = instance => {
-	instance._elements.forEach(element => {
-		if (nativeLazyTags.indexOf(element.tagName) === -1) {
-			return;
-		}
-		element.setAttribute("loading", "lazy");
-		revealElement(element, instance);
-	});
-};
+const isToManage = element => !hasAnyStatus(element) || hasStatusObserved(element);
+const excludeManagedElements = elements => toArray(elements).filter(isToManage);
 
-const queryElements = settings => settings.container.querySelectorAll(settings.elements_selector);
+const hasError = element => hasStatusError(element);
+const filterErrorElements = elements => toArray(elements).filter(hasError);
 
-const nodeSetToArray = nodeSet => Array.prototype.slice.call(nodeSet);
+const getElementsToLoad = (elements, settings) =>
+    excludeManagedElements(elements || queryElements(settings));
 
-const getElements = (elements, settings) =>
-    purgeProcessedElements(nodeSetToArray(elements || queryElements(settings)));
-
 const retryLazyLoad = instance => {
-    var settings = instance._settings;
-    var errorElements = settings.container.querySelectorAll("." + settings.class_error);
-    nodeSetToArray(errorElements).forEach(element => {
+    const settings = instance._settings;
+    const errorElements = filterErrorElements(queryElements(settings));
+    errorElements.forEach(element => {
         removeClass(element, settings.class_error);
-        resetWasProcessedData(element);
+        resetStatus(element);
     });
@@ -427,48 +479,57 @@ instance.update();
 const LazyLoad = function(customSettings, elements) {
-    this._settings = getInstanceSettings(customSettings);
+    this._settings = getExtendedSettings(customSettings);
     this.loadingCount = 0;
     setObserver(this);
+    setOnlineCheck(this);
     this.update(elements);
-    setOnlineCheck(this);
 };
 
 LazyLoad.prototype = {
-    update: function(elements) {
-        var settings = this._settings;
-        this._elements = getElements(elements, settings);
-        if (isBot || !this._observer) {
-            this.loadAll();
+    update: function(givenNodeset) {
+        const settings = this._settings;
+        const elementsToLoad = getElementsToLoad(givenNodeset, settings);
+        this.toLoadCount = elementsToLoad.length;
+
+        if (isBot || !supportsIntersectionObserver) {
+            this.loadAll(elementsToLoad);
             return;
         }
         if (shouldUseNative(settings)) {
-            loadAllNative(this);
-            this._elements = getElements(elements, settings);
+            loadAllNative(elementsToLoad, settings, this);
+            return;
         }
-        this._elements.forEach(element => {
-            this._observer.observe(element);
-        });
+
+        updateObserver(this._observer, elementsToLoad);
     },
 
     destroy: function() {
+        // Observer
         if (this._observer) {
-            this._elements.forEach(element => {
-                this._observer.unobserve(element);
-            });
-            this._observer = null;
+            this._observer.disconnect();
         }
-        this._elements = null;
-        this._settings = null;
+        delete this._observer;
+        delete this._settings;
+        delete this.loadingCount;
+        delete this.toLoadCount;
     },
 
-    load: function(element, force) {
-        revealElement(element, this, force);
+    loadAll: function(elements) {
+        const settings = this._settings;
+        const elementsToLoad = getElementsToLoad(elements, settings);
+        elementsToLoad.forEach(element => {
+            load(element, settings, this);
+        });
     },
 
-    loadAll: function() {
-        this._elements.forEach(element => {
-            revealAndUnobserve(element, this);
-        });
+    load: function(element) {
+        /* DEPRECATED, REMOVE IN V.15 */
+        load(element, this._settings, this);
     }
 };
 
+LazyLoad.load = (element, customSettings) => {
+    const settings = getExtendedSettings(customSettings);
+    load(element, settings);
+};
+
 /* Automatic instances creation if required (useful for async script loading) */
@@ -475,0 +536,0 @@ if (runningOnBrowser) {

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

dist/lazyload.iife.js

@@ -44,3 +44,3 @@ var LazyLoad = (function () {
     callback_exit: null,
-    callback_reveal: null,
+    callback_loading: null,
     callback_loaded: null,
@@ -51,3 +51,3 @@ callback_error: null,
   };
-  var getInstanceSettings = function getInstanceSettings(customSettings) {
+  var getExtendedSettings = function getExtendedSettings(customSettings) {
     return _extends({}, defaultSettings, customSettings);
@@ -99,6 +99,11 @@ };
 
+  var statusObserved = "observed";
+  var statusLoading = "loading";
+  var statusLoaded = "loaded";
+  var statusError = "error";
+  var statusNative = "native";
+
   var dataPrefix = "data-";
-  var processedDataName = "was-processed";
+  var statusDataName = "ll-status";
   var timeoutDataName = "ll-timeout";
-  var trueString = "true";
   var getData = function getData(element, attribute) {
@@ -117,11 +122,17 @@ return element.getAttribute(dataPrefix + attribute);
   };
-  var resetWasProcessedData = function resetWasProcessedData(element) {
-    return setData(element, processedDataName, null);
+  var resetStatus = function resetStatus(element) {
+    return setData(element, statusDataName, null);
   };
-  var setWasProcessedData = function setWasProcessedData(element) {
-    return setData(element, processedDataName, trueString);
+  var setStatus = function setStatus(element, status) {
+    return setData(element, statusDataName, status);
   };
-  var getWasProcessedData = function getWasProcessedData(element) {
-    return getData(element, processedDataName) === trueString;
+  var hasAnyStatus = function hasAnyStatus(element) {
+    return getData(element, statusDataName) !== null;
   };
+  var hasStatusObserved = function hasStatusObserved(element) {
+    return getData(element, statusDataName) === statusObserved;
+  };
+  var hasStatusError = function hasStatusError(element) {
+    return getData(element, statusDataName) === statusError;
+  };
   var setTimeoutData = function setTimeoutData(element, value) {
@@ -134,13 +145,6 @@ return setData(element, timeoutDataName, value);
 
-  var purgeProcessedElements = function purgeProcessedElements(elements) {
-    return elements.filter(function (element) {
-      return !getWasProcessedData(element);
-    });
+  var increaseLoadingCount = function increaseLoadingCount(instance) {
+    if (!instance) return;
+    instance.loadingCount += 1;
   };
-  var purgeOneElement = function purgeOneElement(elements, elementToPurge) {
-    return elements.filter(function (element) {
-      return element !== elementToPurge;
-    });
-  };
-
   var getSourceTags = function getSourceTags(parentTag) {
@@ -210,4 +214,3 @@ var sourceTags = [];
   };
-  var setSources = function setSources(element, instance) {
-    var settings = instance._settings;
+  var setSources = function setSources(element, settings, instance) {
     var tagName = element.tagName;
@@ -218,8 +221,6 @@ var setSourcesFunction = setSourcesFunctions[tagName];
       setSourcesFunction(element, settings);
-      instance.loadingCount += 1;
-      instance._elements = purgeOneElement(instance._elements, element);
-      return;
+      increaseLoadingCount(instance);
+    } else {
+      setSourcesBgImage(element, settings);
     }
-
-    setSourcesBgImage(element, settings);
   };
@@ -265,11 +266,17 @@
   var errorEventName = "error";
-
+  var decreaseLoadingCount = function decreaseLoadingCount(settings, instance) {
+    if (!instance) return;
+    instance.loadingCount -= 1;
+    checkFinish(settings, instance);
+  };
+  var checkFinish = function checkFinish(settings, instance) {
+    if (instance.toLoadCount || instance.loadingCount) return;
+    safeCallback(settings.callback_finish, instance);
+  };
   var addEventListener = function addEventListener(element, eventName, handler) {
     element.addEventListener(eventName, handler);
   };
-
   var removeEventListener = function removeEventListener(element, eventName, handler) {
     element.removeEventListener(eventName, handler);
   };
-
   var addEventListeners = function addEventListeners(element, loadHandler, errorHandler) {
@@ -280,3 +287,2 @@ addEventListener(element, genericLoadEventName, loadHandler);
   };
-
   var removeEventListeners = function removeEventListeners(element, loadHandler, errorHandler) {
@@ -287,36 +293,41 @@ removeEventListener(element, genericLoadEventName, loadHandler);
   };
-
-  var eventHandler = function eventHandler(event, success, instance) {
-    var settings = instance._settings;
-    var className = success ? settings.class_loaded : settings.class_error;
-    var callback = success ? settings.callback_loaded : settings.callback_error;
+  var loadHandler = function loadHandler(event, settings, instance) {
     var element = event.target;
+    setStatus(element, statusLoaded);
     removeClass(element, settings.class_loading);
-    addClass(element, className);
-    safeCallback(callback, element, instance);
-    instance.loadingCount -= 1;
-
-    if (instance._elements.length === 0 && instance.loadingCount === 0) {
-      safeCallback(settings.callback_finish, instance);
-    }
+    addClass(element, settings.class_loaded);
+    safeCallback(settings.callback_loaded, element, instance);
+    decreaseLoadingCount(settings, instance);
   };
-
-  var addOneShotEventListeners = function addOneShotEventListeners(element, instance) {
-    var loadHandler = function loadHandler(event) {
-      eventHandler(event, true, instance);
-      removeEventListeners(element, loadHandler, errorHandler);
+  var errorHandler = function errorHandler(event, settings, instance) {
+    var element = event.target;
+    setStatus(element, statusError);
+    removeClass(element, settings.class_loading);
+    addClass(element, settings.class_error);
+    safeCallback(settings.callback_error, element, instance);
+    decreaseLoadingCount(settings, instance);
+  };
+  var addOneShotEventListeners = function addOneShotEventListeners(element, settings, instance) {
+    var _loadHandler = function _loadHandler(event) {
+      loadHandler(event, settings, instance);
+      removeEventListeners(element, _loadHandler, _errorHandler);
     };
 
-    var errorHandler = function errorHandler(event) {
-      eventHandler(event, false, instance);
-      removeEventListeners(element, loadHandler, errorHandler);
+    var _errorHandler = function _errorHandler(event) {
+      errorHandler(event, settings, instance);
+      removeEventListeners(element, _loadHandler, _errorHandler);
     };
 
-    addEventListeners(element, loadHandler, errorHandler);
+    addEventListeners(element, _loadHandler, _errorHandler);
   };
 
-  var managedTags = ["IMG", "IFRAME", "VIDEO"];
-  var revealAndUnobserve = function revealAndUnobserve(element, instance) {
+  var manageableTags = ["IMG", "IFRAME", "VIDEO"];
+  var decreaseToLoadCount = function decreaseToLoadCount(settings, instance) {
+    if (!instance) return;
+    instance.toLoadCount -= 1;
+    checkFinish(settings, instance);
+  };
+  var unobserve = function unobserve(element, instance) {
+    if (!instance) return;
     var observer = instance._observer;
-    revealElement(element, instance);
 
@@ -327,18 +338,27 @@ if (observer && instance._settings.auto_unobserve) {
   };
-  var revealElement = function revealElement(element, instance, force) {
-    var settings = instance._settings;
-
-    if (!force && getWasProcessedData(element)) {
-      return; // element has already been processed and force wasn't true
-    }
-
-    if (managedTags.indexOf(element.tagName) > -1) {
-      addOneShotEventListeners(element, instance);
+  var isManageableTag = function isManageableTag(element) {
+    return manageableTags.indexOf(element.tagName) > -1;
+  };
+  var enableLoading = function enableLoading(element, settings, instance) {
+    if (isManageableTag(element)) {
+      addOneShotEventListeners(element, settings, instance);
       addClass(element, settings.class_loading);
     }
 
-    setSources(element, instance);
-    setWasProcessedData(element);
+    setSources(element, settings, instance);
+    decreaseToLoadCount(settings, instance);
+  };
+  var load = function load(element, settings, instance) {
+    enableLoading(element, settings, instance);
+    setStatus(element, statusLoading);
+    safeCallback(settings.callback_loading, element, instance);
+    /* DEPRECATED, REMOVE IN V.15 => */
+
     safeCallback(settings.callback_reveal, element, instance);
+    unobserve(element, instance);
   };
+  var loadNative = function loadNative(element, settings, instance) {
+    enableLoading(element, settings, instance);
+    setStatus(element, statusNative);
+  };
 
@@ -355,4 +375,4 @@ var cancelDelayLoad = function cancelDelayLoad(element) {
   };
-  var delayLoad = function delayLoad(element, instance) {
-    var loadDelay = instance._settings.load_delay;
+  var delayLoad = function delayLoad(element, settings, instance) {
+    var loadDelay = settings.load_delay;
     var timeoutId = getTimeoutData(element);
@@ -365,3 +385,3 @@
     timeoutId = setTimeout(function () {
-      revealAndUnobserve(element, instance);
+      load(element, settings, instance);
       cancelDelayLoad(element);
@@ -377,7 +397,7 @@ }, loadDelay);
     if (!settings.load_delay) {
-      revealAndUnobserve(element, instance);
+      load(element, settings, instance);
       return;
     }
 
-    delayLoad(element, instance);
+    delayLoad(element, settings, instance);
   };
@@ -395,2 +415,19 @@ var onExit = function onExit(element, entry, instance) {
 
+  var nativeLazyTags = ["IMG", "IFRAME"];
+  var loadingString = "loading";
+  var shouldUseNative = function shouldUseNative(settings) {
+    return settings.use_native && loadingString in HTMLImageElement.prototype;
+  };
+  var loadAllNative = function loadAllNative(elements, settings, instance) {
+    elements.forEach(function (element) {
+      if (nativeLazyTags.indexOf(element.tagName) === -1) {
+        return;
+      }
+
+      element.setAttribute(loadingString, "lazy");
+      loadNative(element, settings, instance);
+    });
+    instance.toLoadCount = 0;
+  };
+
   var isIntersecting = function isIntersecting(entry) {
@@ -407,5 +444,18 @@ return entry.isIntersecting || entry.intersectionRatio > 0;
 
+  var resetObserver = function resetObserver(observer) {
+    observer.disconnect();
+  };
+  var observeElements = function observeElements(observer, elements) {
+    elements.forEach(function (element) {
+      observer.observe(element);
+      setStatus(element, statusObserved);
+    });
+  };
+  var updateObserver = function updateObserver(observer, elementsToObserve) {
+    resetObserver(observer);
+    observeElements(observer, elementsToObserve);
+  };
   var setObserver = function setObserver(instance) {
-    if (!supportsIntersectionObserver) {
-      return false;
+    if (!supportsIntersectionObserver || shouldUseNative(instance._settings)) {
+      return;
     }
@@ -418,37 +468,32 @@
     }, getObserverSettings(instance._settings));
-    return true;
   };
 
-  var nativeLazyTags = ["IMG", "IFRAME"];
-  var shouldUseNative = function shouldUseNative(settings) {
-    return settings.use_native && "loading" in HTMLImageElement.prototype;
+  var toArray = function toArray(nodeSet) {
+    return Array.prototype.slice.call(nodeSet);
   };
-  var loadAllNative = function loadAllNative(instance) {
-    instance._elements.forEach(function (element) {
-      if (nativeLazyTags.indexOf(element.tagName) === -1) {
-        return;
-      }
-
-      element.setAttribute("loading", "lazy");
-      revealElement(element, instance);
-    });
-  };
-
   var queryElements = function queryElements(settings) {
     return settings.container.querySelectorAll(settings.elements_selector);
   };
-
-  var nodeSetToArray = function nodeSetToArray(nodeSet) {
-    return Array.prototype.slice.call(nodeSet);
+  var isToManage = function isToManage(element) {
+    return !hasAnyStatus(element) || hasStatusObserved(element);
   };
-  var getElements = function getElements(elements, settings) {
-    return purgeProcessedElements(nodeSetToArray(elements || queryElements(settings)));
+  var excludeManagedElements = function excludeManagedElements(elements) {
+    return toArray(elements).filter(isToManage);
   };
+  var hasError = function hasError(element) {
+    return hasStatusError(element);
+  };
+  var filterErrorElements = function filterErrorElements(elements) {
+    return toArray(elements).filter(hasError);
+  };
+  var getElementsToLoad = function getElementsToLoad(elements, settings) {
+    return excludeManagedElements(elements || queryElements(settings));
+  };
 
   var retryLazyLoad = function retryLazyLoad(instance) {
     var settings = instance._settings;
-    var errorElements = settings.container.querySelectorAll("." + settings.class_error);
-    nodeSetToArray(errorElements).forEach(function (element) {
+    var errorElements = filterErrorElements(queryElements(settings));
+    errorElements.forEach(function (element) {
       removeClass(element, settings.class_error);
-      resetWasProcessedData(element);
+      resetStatus(element);
     });
@@ -468,18 +513,17 @@ instance.update();
   var LazyLoad = function LazyLoad(customSettings, elements) {
-    this._settings = getInstanceSettings(customSettings);
+    this._settings = getExtendedSettings(customSettings);
     this.loadingCount = 0;
     setObserver(this);
+    setOnlineCheck(this);
     this.update(elements);
-    setOnlineCheck(this);
   };
 
   LazyLoad.prototype = {
-    update: function update(elements) {
-      var _this = this;
-
+    update: function update(givenNodeset) {
       var settings = this._settings;
-      this._elements = getElements(elements, settings);
+      var elementsToLoad = getElementsToLoad(givenNodeset, settings);
+      this.toLoadCount = elementsToLoad.length;
 
-      if (isBot || !this._observer) {
-        this.loadAll();
+      if (isBot || !supportsIntersectionObserver) {
+        this.loadAll(elementsToLoad);
         return;
@@ -489,37 +533,42 @@ }
       if (shouldUseNative(settings)) {
-        loadAllNative(this);
-        this._elements = getElements(elements, settings);
+        loadAllNative(elementsToLoad, settings, this);
+        return;
       }
 
-      this._elements.forEach(function (element) {
-        _this._observer.observe(element);
-      });
+      updateObserver(this._observer, elementsToLoad);
     },
     destroy: function destroy() {
-      var _this2 = this;
-
+      // Observer
       if (this._observer) {
-        this._elements.forEach(function (element) {
-          _this2._observer.unobserve(element);
-        });
-
-        this._observer = null;
+        this._observer.disconnect();
       }
 
-      this._elements = null;
-      this._settings = null;
+      delete this._observer;
+      delete this._settings;
+      delete this.loadingCount;
+      delete this.toLoadCount;
     },
-    load: function load(element, force) {
-      revealElement(element, this, force);
-    },
-    loadAll: function loadAll() {
-      var _this3 = this;
+    loadAll: function loadAll(elements) {
+      var _this = this;
 
-      this._elements.forEach(function (element) {
-        revealAndUnobserve(element, _this3);
+      var settings = this._settings;
+      var elementsToLoad = getElementsToLoad(elements, settings);
+      elementsToLoad.forEach(function (element) {
+        load(element, settings, _this);
       });
+    },
+    load: function load$1(element) {
+      /* DEPRECATED, REMOVE IN V.15 */
+      load(element, this._settings, this);
     }
   };
+
+  LazyLoad.load = function (element, customSettings) {
+    var settings = getExtendedSettings(customSettings);
+
+    load(element, settings);
+  };
   /* Automatic instances creation if required (useful for async script loading) */
 
+
   if (runningOnBrowser) {
@@ -526,0 +575,0 @@ autoInitialize(LazyLoad, window.lazyLoadOptions);

dist/lazyload.iife.min.js

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

dist/lazyload.js

@@ -47,3 +47,3 @@ (function (global, factory) {
     callback_exit: null,
-    callback_reveal: null,
+    callback_loading: null,
     callback_loaded: null,
@@ -54,3 +54,3 @@ callback_error: null,
   };
-  var getInstanceSettings = function getInstanceSettings(customSettings) {
+  var getExtendedSettings = function getExtendedSettings(customSettings) {
     return _extends({}, defaultSettings, customSettings);
@@ -102,6 +102,11 @@ };
 
+  var statusObserved = "observed";
+  var statusLoading = "loading";
+  var statusLoaded = "loaded";
+  var statusError = "error";
+  var statusNative = "native";
+
   var dataPrefix = "data-";
-  var processedDataName = "was-processed";
+  var statusDataName = "ll-status";
   var timeoutDataName = "ll-timeout";
-  var trueString = "true";
   var getData = function getData(element, attribute) {
@@ -120,11 +125,17 @@ return element.getAttribute(dataPrefix + attribute);
   };
-  var resetWasProcessedData = function resetWasProcessedData(element) {
-    return setData(element, processedDataName, null);
+  var resetStatus = function resetStatus(element) {
+    return setData(element, statusDataName, null);
   };
-  var setWasProcessedData = function setWasProcessedData(element) {
-    return setData(element, processedDataName, trueString);
+  var setStatus = function setStatus(element, status) {
+    return setData(element, statusDataName, status);
   };
-  var getWasProcessedData = function getWasProcessedData(element) {
-    return getData(element, processedDataName) === trueString;
+  var hasAnyStatus = function hasAnyStatus(element) {
+    return getData(element, statusDataName) !== null;
   };
+  var hasStatusObserved = function hasStatusObserved(element) {
+    return getData(element, statusDataName) === statusObserved;
+  };
+  var hasStatusError = function hasStatusError(element) {
+    return getData(element, statusDataName) === statusError;
+  };
   var setTimeoutData = function setTimeoutData(element, value) {
@@ -137,13 +148,6 @@ return setData(element, timeoutDataName, value);
 
-  var purgeProcessedElements = function purgeProcessedElements(elements) {
-    return elements.filter(function (element) {
-      return !getWasProcessedData(element);
-    });
+  var increaseLoadingCount = function increaseLoadingCount(instance) {
+    if (!instance) return;
+    instance.loadingCount += 1;
   };
-  var purgeOneElement = function purgeOneElement(elements, elementToPurge) {
-    return elements.filter(function (element) {
-      return element !== elementToPurge;
-    });
-  };
-
   var getSourceTags = function getSourceTags(parentTag) {
@@ -213,4 +217,3 @@ var sourceTags = [];
   };
-  var setSources = function setSources(element, instance) {
-    var settings = instance._settings;
+  var setSources = function setSources(element, settings, instance) {
     var tagName = element.tagName;
@@ -221,8 +224,6 @@ var setSourcesFunction = setSourcesFunctions[tagName];
       setSourcesFunction(element, settings);
-      instance.loadingCount += 1;
-      instance._elements = purgeOneElement(instance._elements, element);
-      return;
+      increaseLoadingCount(instance);
+    } else {
+      setSourcesBgImage(element, settings);
     }
-
-    setSourcesBgImage(element, settings);
   };
@@ -268,11 +269,17 @@
   var errorEventName = "error";
-
+  var decreaseLoadingCount = function decreaseLoadingCount(settings, instance) {
+    if (!instance) return;
+    instance.loadingCount -= 1;
+    checkFinish(settings, instance);
+  };
+  var checkFinish = function checkFinish(settings, instance) {
+    if (instance.toLoadCount || instance.loadingCount) return;
+    safeCallback(settings.callback_finish, instance);
+  };
   var addEventListener = function addEventListener(element, eventName, handler) {
     element.addEventListener(eventName, handler);
   };
-
   var removeEventListener = function removeEventListener(element, eventName, handler) {
     element.removeEventListener(eventName, handler);
   };
-
   var addEventListeners = function addEventListeners(element, loadHandler, errorHandler) {
@@ -283,3 +290,2 @@ addEventListener(element, genericLoadEventName, loadHandler);
   };
-
   var removeEventListeners = function removeEventListeners(element, loadHandler, errorHandler) {
@@ -290,36 +296,41 @@ removeEventListener(element, genericLoadEventName, loadHandler);
   };
-
-  var eventHandler = function eventHandler(event, success, instance) {
-    var settings = instance._settings;
-    var className = success ? settings.class_loaded : settings.class_error;
-    var callback = success ? settings.callback_loaded : settings.callback_error;
+  var loadHandler = function loadHandler(event, settings, instance) {
     var element = event.target;
+    setStatus(element, statusLoaded);
     removeClass(element, settings.class_loading);
-    addClass(element, className);
-    safeCallback(callback, element, instance);
-    instance.loadingCount -= 1;
-
-    if (instance._elements.length === 0 && instance.loadingCount === 0) {
-      safeCallback(settings.callback_finish, instance);
-    }
+    addClass(element, settings.class_loaded);
+    safeCallback(settings.callback_loaded, element, instance);
+    decreaseLoadingCount(settings, instance);
   };
-
-  var addOneShotEventListeners = function addOneShotEventListeners(element, instance) {
-    var loadHandler = function loadHandler(event) {
-      eventHandler(event, true, instance);
-      removeEventListeners(element, loadHandler, errorHandler);
+  var errorHandler = function errorHandler(event, settings, instance) {
+    var element = event.target;
+    setStatus(element, statusError);
+    removeClass(element, settings.class_loading);
+    addClass(element, settings.class_error);
+    safeCallback(settings.callback_error, element, instance);
+    decreaseLoadingCount(settings, instance);
+  };
+  var addOneShotEventListeners = function addOneShotEventListeners(element, settings, instance) {
+    var _loadHandler = function _loadHandler(event) {
+      loadHandler(event, settings, instance);
+      removeEventListeners(element, _loadHandler, _errorHandler);
     };
 
-    var errorHandler = function errorHandler(event) {
-      eventHandler(event, false, instance);
-      removeEventListeners(element, loadHandler, errorHandler);
+    var _errorHandler = function _errorHandler(event) {
+      errorHandler(event, settings, instance);
+      removeEventListeners(element, _loadHandler, _errorHandler);
     };
 
-    addEventListeners(element, loadHandler, errorHandler);
+    addEventListeners(element, _loadHandler, _errorHandler);
   };
 
-  var managedTags = ["IMG", "IFRAME", "VIDEO"];
-  var revealAndUnobserve = function revealAndUnobserve(element, instance) {
+  var manageableTags = ["IMG", "IFRAME", "VIDEO"];
+  var decreaseToLoadCount = function decreaseToLoadCount(settings, instance) {
+    if (!instance) return;
+    instance.toLoadCount -= 1;
+    checkFinish(settings, instance);
+  };
+  var unobserve = function unobserve(element, instance) {
+    if (!instance) return;
     var observer = instance._observer;
-    revealElement(element, instance);
 
@@ -330,18 +341,27 @@ if (observer && instance._settings.auto_unobserve) {
   };
-  var revealElement = function revealElement(element, instance, force) {
-    var settings = instance._settings;
-
-    if (!force && getWasProcessedData(element)) {
-      return; // element has already been processed and force wasn't true
-    }
-
-    if (managedTags.indexOf(element.tagName) > -1) {
-      addOneShotEventListeners(element, instance);
+  var isManageableTag = function isManageableTag(element) {
+    return manageableTags.indexOf(element.tagName) > -1;
+  };
+  var enableLoading = function enableLoading(element, settings, instance) {
+    if (isManageableTag(element)) {
+      addOneShotEventListeners(element, settings, instance);
       addClass(element, settings.class_loading);
     }
 
-    setSources(element, instance);
-    setWasProcessedData(element);
+    setSources(element, settings, instance);
+    decreaseToLoadCount(settings, instance);
+  };
+  var load = function load(element, settings, instance) {
+    enableLoading(element, settings, instance);
+    setStatus(element, statusLoading);
+    safeCallback(settings.callback_loading, element, instance);
+    /* DEPRECATED, REMOVE IN V.15 => */
+
     safeCallback(settings.callback_reveal, element, instance);
+    unobserve(element, instance);
   };
+  var loadNative = function loadNative(element, settings, instance) {
+    enableLoading(element, settings, instance);
+    setStatus(element, statusNative);
+  };
 
@@ -358,4 +378,4 @@ var cancelDelayLoad = function cancelDelayLoad(element) {
   };
-  var delayLoad = function delayLoad(element, instance) {
-    var loadDelay = instance._settings.load_delay;
+  var delayLoad = function delayLoad(element, settings, instance) {
+    var loadDelay = settings.load_delay;
     var timeoutId = getTimeoutData(element);
@@ -368,3 +388,3 @@
     timeoutId = setTimeout(function () {
-      revealAndUnobserve(element, instance);
+      load(element, settings, instance);
       cancelDelayLoad(element);
@@ -380,7 +400,7 @@ }, loadDelay);
     if (!settings.load_delay) {
-      revealAndUnobserve(element, instance);
+      load(element, settings, instance);
       return;
     }
 
-    delayLoad(element, instance);
+    delayLoad(element, settings, instance);
   };
@@ -398,2 +418,19 @@ var onExit = function onExit(element, entry, instance) {
 
+  var nativeLazyTags = ["IMG", "IFRAME"];
+  var loadingString = "loading";
+  var shouldUseNative = function shouldUseNative(settings) {
+    return settings.use_native && loadingString in HTMLImageElement.prototype;
+  };
+  var loadAllNative = function loadAllNative(elements, settings, instance) {
+    elements.forEach(function (element) {
+      if (nativeLazyTags.indexOf(element.tagName) === -1) {
+        return;
+      }
+
+      element.setAttribute(loadingString, "lazy");
+      loadNative(element, settings, instance);
+    });
+    instance.toLoadCount = 0;
+  };
+
   var isIntersecting = function isIntersecting(entry) {
@@ -410,5 +447,18 @@ return entry.isIntersecting || entry.intersectionRatio > 0;
 
+  var resetObserver = function resetObserver(observer) {
+    observer.disconnect();
+  };
+  var observeElements = function observeElements(observer, elements) {
+    elements.forEach(function (element) {
+      observer.observe(element);
+      setStatus(element, statusObserved);
+    });
+  };
+  var updateObserver = function updateObserver(observer, elementsToObserve) {
+    resetObserver(observer);
+    observeElements(observer, elementsToObserve);
+  };
   var setObserver = function setObserver(instance) {
-    if (!supportsIntersectionObserver) {
-      return false;
+    if (!supportsIntersectionObserver || shouldUseNative(instance._settings)) {
+      return;
     }
@@ -421,37 +471,32 @@
     }, getObserverSettings(instance._settings));
-    return true;
   };
 
-  var nativeLazyTags = ["IMG", "IFRAME"];
-  var shouldUseNative = function shouldUseNative(settings) {
-    return settings.use_native && "loading" in HTMLImageElement.prototype;
+  var toArray = function toArray(nodeSet) {
+    return Array.prototype.slice.call(nodeSet);
   };
-  var loadAllNative = function loadAllNative(instance) {
-    instance._elements.forEach(function (element) {
-      if (nativeLazyTags.indexOf(element.tagName) === -1) {
-        return;
-      }
-
-      element.setAttribute("loading", "lazy");
-      revealElement(element, instance);
-    });
-  };
-
   var queryElements = function queryElements(settings) {
     return settings.container.querySelectorAll(settings.elements_selector);
   };
-
-  var nodeSetToArray = function nodeSetToArray(nodeSet) {
-    return Array.prototype.slice.call(nodeSet);
+  var isToManage = function isToManage(element) {
+    return !hasAnyStatus(element) || hasStatusObserved(element);
   };
-  var getElements = function getElements(elements, settings) {
-    return purgeProcessedElements(nodeSetToArray(elements || queryElements(settings)));
+  var excludeManagedElements = function excludeManagedElements(elements) {
+    return toArray(elements).filter(isToManage);
   };
+  var hasError = function hasError(element) {
+    return hasStatusError(element);
+  };
+  var filterErrorElements = function filterErrorElements(elements) {
+    return toArray(elements).filter(hasError);
+  };
+  var getElementsToLoad = function getElementsToLoad(elements, settings) {
+    return excludeManagedElements(elements || queryElements(settings));
+  };
 
   var retryLazyLoad = function retryLazyLoad(instance) {
     var settings = instance._settings;
-    var errorElements = settings.container.querySelectorAll("." + settings.class_error);
-    nodeSetToArray(errorElements).forEach(function (element) {
+    var errorElements = filterErrorElements(queryElements(settings));
+    errorElements.forEach(function (element) {
       removeClass(element, settings.class_error);
-      resetWasProcessedData(element);
+      resetStatus(element);
     });
@@ -471,18 +516,17 @@ instance.update();
   var LazyLoad = function LazyLoad(customSettings, elements) {
-    this._settings = getInstanceSettings(customSettings);
+    this._settings = getExtendedSettings(customSettings);
     this.loadingCount = 0;
     setObserver(this);
+    setOnlineCheck(this);
     this.update(elements);
-    setOnlineCheck(this);
   };
 
   LazyLoad.prototype = {
-    update: function update(elements) {
-      var _this = this;
-
+    update: function update(givenNodeset) {
       var settings = this._settings;
-      this._elements = getElements(elements, settings);
+      var elementsToLoad = getElementsToLoad(givenNodeset, settings);
+      this.toLoadCount = elementsToLoad.length;
 
-      if (isBot || !this._observer) {
-        this.loadAll();
+      if (isBot || !supportsIntersectionObserver) {
+        this.loadAll(elementsToLoad);
         return;
@@ -492,37 +536,42 @@ }
       if (shouldUseNative(settings)) {
-        loadAllNative(this);
-        this._elements = getElements(elements, settings);
+        loadAllNative(elementsToLoad, settings, this);
+        return;
       }
 
-      this._elements.forEach(function (element) {
-        _this._observer.observe(element);
-      });
+      updateObserver(this._observer, elementsToLoad);
     },
     destroy: function destroy() {
-      var _this2 = this;
-
+      // Observer
       if (this._observer) {
-        this._elements.forEach(function (element) {
-          _this2._observer.unobserve(element);
-        });
-
-        this._observer = null;
+        this._observer.disconnect();
       }
 
-      this._elements = null;
-      this._settings = null;
+      delete this._observer;
+      delete this._settings;
+      delete this.loadingCount;
+      delete this.toLoadCount;
     },
-    load: function load(element, force) {
-      revealElement(element, this, force);
-    },
-    loadAll: function loadAll() {
-      var _this3 = this;
+    loadAll: function loadAll(elements) {
+      var _this = this;
 
-      this._elements.forEach(function (element) {
-        revealAndUnobserve(element, _this3);
+      var settings = this._settings;
+      var elementsToLoad = getElementsToLoad(elements, settings);
+      elementsToLoad.forEach(function (element) {
+        load(element, settings, _this);
       });
+    },
+    load: function load$1(element) {
+      /* DEPRECATED, REMOVE IN V.15 */
+      load(element, this._settings, this);
     }
   };
+
+  LazyLoad.load = function (element, customSettings) {
+    var settings = getExtendedSettings(customSettings);
+
+    load(element, settings);
+  };
   /* Automatic instances creation if required (useful for async script loading) */
 
+
   if (runningOnBrowser) {
@@ -529,0 +578,0 @@ autoInitialize(LazyLoad, window.lazyLoadOptions);

dist/lazyload.min.js

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

package.json

 {
     "name": "vanilla-lazyload",
-    "version": "13.0.1",
+    "version": "14.0.0",
     "description": "A fast, lightweight script to load images as they enter the viewport. SEO friendly, it supports responsive images (both srcset + sizes and picture) and progressive JPEG",
@@ -11,10 +11,10 @@ "main": "dist/lazyload.min.js",
     "devDependencies": {
-        "@babel/core": "^7.8.6",
+        "@babel/core": "^7.9.0",
         "@babel/plugin-transform-object-assign": "^7.8.3",
-        "@babel/preset-env": "^7.8.6",
+        "@babel/preset-env": "^7.9.0",
         "@rollup/plugin-node-resolve": "^7.1.1",
         "jest": "^25.1.0",
-        "rollup": "^1.32.0",
-        "rollup-plugin-babel": "^4.3.3",
-        "rollup-plugin-terser": "^5.2.0"
+        "rollup": "^1.32.1",
+        "rollup-plugin-babel": "^4.4.0",
+        "rollup-plugin-terser": "^5.3.0"
     },
@@ -24,3 +24,4 @@ "scripts": {
         "dev": "rollup -c --watch",
-        "test": "jest"
+        "test": "jest",
+        "devtest": "jest --watch"
     },
@@ -27,0 +28,0 @@ "files": [

README.md

@@ -116,3 +116,3 @@ LazyLoad is a fast, lightweight and flexible script that **speeds up your web application** by loading your content images, videos and iframes only **as they enter the viewport**. It's written in plain "vanilla" JavaScript, it leverages the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API, it works with [responsive images](https://alistapart.com/article/responsive-images-in-practice) and it supports native lazy loading. See [notable features](#-notable-features) for more.
 
-The latest, recommended version of LazyLoad is **13.0.1**.
+The latest, recommended version of LazyLoad is **14.0.0**.
 
@@ -132,3 +132,3 @@ ### To polyfill or not to polyfill IntersectionObserver?
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@13.0.1/dist/lazyload.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@14.0.0/dist/lazyload.min.js"></script>
 ```
@@ -140,3 +140,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@13.0.1/dist/lazyload.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@14.0.0/dist/lazyload.min.js"></script>
 ```
@@ -174,3 +174,3 @@
 ```js
-var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@13.0.1/dist/lazyload.amd.min.js";
+var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@14.0.0/dist/lazyload.amd.min.js";
 var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/intersection-observer-amd@2.0.1/intersection-observer-amd.js";
@@ -221,3 +221,3 @@
     async
-    src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@13.0.1/dist/lazyload.min.js"
+    src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@14.0.0/dist/lazyload.min.js"
 ></script>
@@ -255,3 +255,3 @@ ```
     async
-    src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@13.0.1/dist/lazyload.min.js"
+    src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@14.0.0/dist/lazyload.min.js"
 ></script>
@@ -530,3 +530,2 @@ ```
 | Native    | Test the native lazy loading of images _conditionally_ using the `use_native` option (see API) | [Code](demos/native_lazyload_conditional.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/native_lazyload_conditional.html) |
-| (legacy)  | Conditional loading of v.8 or v.10 (no IntersectionObserver polyfill)                          | [Code](demos/conditional_loading.html)         | [Live](https://www.andreaverlicchi.eu/lazyload/demos/conditional_loading.html)         |
 
@@ -629,3 +628,3 @@ ---
 | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | ---------------------------------------- |
-| `container`         | The container of the elements in the `elements_selector` option.                                                                                                                                                                                                                                                                                                                                                                                             | `document`    | `document.querySelector('.scrollPanel')` |
+| `container`         | The scrolling container of the elements in the `elements_selector` option.                                                                                                                                                                                                                                                                                                                                                                                   | `document`    | `document.querySelector('.scrollPanel')` |
 | `elements_selector` | The CSS selector of the elements to load lazily, which will be selected as descendants of the `container` object.                                                                                                                                                                                                                                                                                                                                            | `"img"`       | `".images img.lazy"`                     |
@@ -646,3 +645,4 @@ | `threshold`         | A number of pixels representing the outer distance off the scrolling area from which to start loading the elements.                                                                                                                                                                                                                                                                                                                                          | `300`         | `0`                                      |
 | `callback_exit`     | A callback function which is called whenever an element exits the viewport. Arguments: DOM element, intersection observer entry, lazyload instance.                                                                                                                                                                                                                                                                                                          | `null`        | `(el)=>{console.log("Exited", el)}`      |
-| `callback_reveal`   | A callback function which is called whenever an element starts loading. Arguments: DOM element, lazyload instance.                                                                                                                                                                                                                                                                                                                                           | `null`        | `(el)=>{console.log("Loading", el)}`     |
+| `callback_loading`  | A callback function which is called whenever an element starts loading. Arguments: DOM element, lazyload instance.                                                                                                                                                                                                                                                                                                                                           | `null`        | `(el)=>{console.log("Loading", el)}`     |
+| `callback_reveal`   | **⚠ DEPRECATED: use `callback_loading` instead.** A callback function which is called whenever an element starts loading. Arguments: DOM element, lazyload instance.                                                                                                                                                                                                                                                                                         | `null`        | `(el)=>{console.log("Loading", el)}`     |
 | `callback_loaded`   | A callback function which is called whenever an element finishes loading. Note that, in version older than 11.0.0, this option went under the name `callback_load`. Arguments: DOM element, lazyload instance.                                                                                                                                                                                                                                               | `null`        | `(el)=>{console.log("Loaded", el)}`      |
@@ -655,11 +655,21 @@ | `callback_error`    | A callback function which is called whenever an element triggers an error. Arguments: DOM element, lazyload instance.                                                                                                                                                                                                                                                                                                                                        | `null`        | `(el)=>{console.log("Error", el)}`       |
 
-You can call the following public methods on any instance of LazyLoad.
+**Instance methods**
 
-| Method name            | Effect                                                                                                                                                                                                                          |
-| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `update()`             | Make LazyLoad to check for new lazy images in the container, using the `elements_selector` option.                                                                                                                              |
-| `loadAll()`            | Loads all the lazy images right away, no matter if they are inside or outside the viewport.                                                                                                                                     |
-| `load(element, force)` | Immediately loads any lazy `element`, even if it isn't selectable by the `elements_selector` option. Note that this method works only once on a specific `element`, unless you force it passing `true` as the second parameter. |
-| `destroy()`            | Destroys the instance, unsetting instance variables and removing listeners.                                                                                                                                                     |
+You can call the following methods on any instance of LazyLoad.
 
+| Method name     | Effect                                                                                                                                                |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `update()`      | Make LazyLoad to re-check the DOM for `elements_selector` elements inside its `container`.                                                            |
+| `loadAll()`     | Loads all the lazy images right away, no matter if they are inside or outside the viewport.                                                           |
+| `load(element)` | **⚠ DEPRECATED, use the static method instead**. Immediately loads any lazy `element`, even if it isn't selectable by the `elements_selector` option. |
+| `destroy()`     | Destroys the instance, unsetting instance variables and removing listeners.                                                                           |
+
+**Static methods**
+
+You can call the following static methods on the LazyLoad class itself (e.g. `LazyLoad.load(element, settings)`).
+
+| Method name               | Effect                                                                                                                                                                                                                                                                                                                                                      |
+| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `load(element, settings)` | Immediately loads the lazy `element`. You can pass your custom options in the `settings` parameter. Note that the `elements_selector` option has no effect, since you are passing the element as a parameter. Also note that this method has effect only once on a specific `element`, unless you _manually_ remove the `data-ll-status` attribute from it. |
+
 ### Properties
@@ -669,5 +679,6 @@
 
-| Property name  | Value                                                                                                                                                                                                                                     |
-| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `loadingCount` | The number of images that are currently downloading from the network (limitedly to the ones managed by this instance of LazyLoad). This is particularly useful to understand whether or not is safe to destroy this instance of LazyLoad. |
+| Property name  | Value                                                                                                                                                                                                                                      |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `loadingCount` | The number of elements that are currently downloading from the network (limitedly to the ones managed by the instance of LazyLoad). This is particularly useful to understand whether or not is safe to destroy this instance of LazyLoad. |
+| `toLoadCount`  | The number of elements that haven't been lazyloaded yet (limitedly to the ones managed by the instance of LazyLoad)                                                                                                                        |
 
@@ -674,0 +685,0 @@ ---

typings/lazyload.d.ts

@@ -17,3 +17,3 @@ interface ILazyLoadOptions {
     callback_exit?: (elt: HTMLElement) => void;
-    callback_reveal?: (elt: HTMLElement) => void;
+    callback_loading?: (elt: HTMLElement) => void;
     callback_loaded?: (elt: HTMLElement) => void;
@@ -23,2 +23,3 @@ callback_error?: (elt: HTMLElement) => void;
     use_native?: boolean;
+    /* DEPRECATED, WILL BE REMOVED IN V. 15 */ callback_reveal?: (elt: HTMLElement) => void;
 }
@@ -32,4 +33,9 @@ interface ILazyLoad {
     loadingCount: number;
+    toLoadCount: number;
 }
 declare var LazyLoad: ILazyLoad;
 export default LazyLoad;
+
+if (this._observer) {
+    this._observer.disconnect();
+}

No alert changes

Improved metrics

Total package byte prevSize

166335

increased by9.1%

Lines of code

2041

increased by12.95%

Number of lines in readme file

703

increased by1.59%

No dependency changes