vanilla-lazyload - npm Package Compare versions

Comparing version 12.4.0 to 12.5.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # CHANGELOG
 
+#### 12.5.0
+
+The once-private `_loadingCount` property is now public and renamed to `loadingCount`. This property contains the number of images that are currently downloading from the network, limitedly to the ones managed by an instance of LazyLoad. This is particularly useful to understand whether or not is safe to destroy an instance of LazyLoad. See implementation in the [destroy demo](demos/destroy.html).
+
+Thanks to @wzhscript and @eugene-stativka.
+
 #### 12.4.0
@@ -15,2 +21,3 @@
 `callback_enter`, `callback_exit` now pass:
+
 1. the DOM element that entered / exited the viewport
@@ -21,2 +28,3 @@ 2. the `IntersectionObserverEntry` that triggered the enter/exit event
 `callback_load`, `callback_error`, `callback_reveal` now pass
+
 1. the DOM element that entered / exited the viewport
@@ -26,2 +34,3 @@ 2. the LazyLoad instance
 `callback_finish` now passes:
+
 1. the LazyLoad instance
@@ -41,6 +50,6 @@
 
-- Updated npm dev dependencies
-- Added the new `image_ph_inline.html`, with an inline SVG placeholder
-- Added the new `image_ph_external.html`, with an external SVG placeholder
- 
+-   Updated npm dev dependencies
+-   Added the new `image_ph_inline.html`, with an inline SVG placeholder
+-   Added the new `image_ph_external.html`, with an external SVG placeholder
+
 #### 12.0.3
@@ -58,15 +67,15 @@
 
-#### 12.0.0 
+#### 12.0.0
 
-- Reorganized code
-- Improved native lazy loading demos
-- Aligned console messages throughout all demos.
+-   Reorganized code
+-   Improved native lazy loading demos
+-   Aligned console messages throughout all demos.
 
 #### 12.0.0-beta.0
 
-- Added the `use_native` option which enables *native lazy loading* (where supported) with the `loading="lazy"` attribute. See #331
-- Added two demos:
-  - native_lazyload_conditional.html which you can use to test the `use_native` option
-  - native_lazyload.html which always uses native lazy loading (without JS) just to test how it works beyond the LazyLoad script
-- Refactored the constructor and the `update` method
+-   Added the `use_native` option which enables _native lazy loading_ (where supported) with the `loading="lazy"` attribute. See #331
+-   Added two demos:
+    -   native_lazyload_conditional.html which you can use to test the `use_native` option
+    -   native_lazyload.html which always uses native lazy loading (without JS) just to test how it works beyond the LazyLoad script
+-   Refactored the constructor and the `update` method
 
@@ -101,20 +110,20 @@ ## Version 11
 
-- Changed bundle file name of ES Module from `lazyload.es2015.js` to `lazyload.esm.js`
-- Removed the `to_webp` option (see issue #288)
-- Ceased support and development of LazyLoad v.8 (see issue #306)
-version. If you were using it, please update your code to use `callback_reveal` instead.
-- Private methods like `_setObserver`, `_onIntersection` etc. are now hidden from the outside.
-- Added the `auto_unobserve` boolean option, see API.
-- Bugfix: `loadAll()` didn't unobserve elements.
-- Updated to Jest 24, Babel 7, etc.
-- Fixed dev dependencies vulnerabilities
-- Updated callbacks. See below:
+-   Changed bundle file name of ES Module from `lazyload.es2015.js` to `lazyload.esm.js`
+-   Removed the `to_webp` option (see issue #288)
+-   Ceased support and development of LazyLoad v.8 (see issue #306)
+    version. If you were using it, please update your code to use `callback_reveal` instead.
+-   Private methods like `_setObserver`, `_onIntersection` etc. are now hidden from the outside.
+-   Added the `auto_unobserve` boolean option, see API.
+-   Bugfix: `loadAll()` didn't unobserve elements.
+-   Updated to Jest 24, Babel 7, etc.
+-   Fixed dev dependencies vulnerabilities
+-   Updated callbacks. See below:
 
 Callbacks updated:
 
-- **Changed** `callback_enter`. This callback is now called whenever an element enters the viewport, even when `load_delay` is set. In previous versions, this callback was delayed until an element started loading if a `load_delay` was set. Note that this is a **possible breaking change**, which you can fix using `callback_reveal` instead.
-- **Renamed** `callback_loaded` is the new name of `callback_load`.
-- **Added** `callback_exit`. This callback is called whenever an element exits the viewport, even if a `load_delay` is set.
-- **Added** `callback_reveal`. This callback is called just after an element starts loading.
-- **Deprecated** `callback_set`. This callback still works*, but will be removed in the next major 
+-   **Changed** `callback_enter`. This callback is now called whenever an element enters the viewport, even when `load_delay` is set. In previous versions, this callback was delayed until an element started loading if a `load_delay` was set. Note that this is a **possible breaking change**, which you can fix using `callback_reveal` instead.
+-   **Renamed** `callback_loaded` is the new name of `callback_load`.
+-   **Added** `callback_exit`. This callback is called whenever an element exits the viewport, even if a `load_delay` is set.
+-   **Added** `callback_reveal`. This callback is called just after an element starts loading.
+-   **Deprecated** `callback_set`. This callback still works\*, but will be removed in the next major
 
@@ -137,5 +146,5 @@ \* it didn't work from versions 11.0.0 to 11.0.5, it still works from 11.0.6.
 
-- Fixed build for those using React + SSR, see #287
-- TypeScript definitions clearified, see #283
-- Gulp updated to v.4.0.0 to make it work with node 10
+-   Fixed build for those using React + SSR, see #287
+-   TypeScript definitions clearified, see #283
+-   Gulp updated to v.4.0.0 to make it work with node 10
 
@@ -146,4 +155,4 @@ Thanks to @AlexCSR and @muturgan for contributing.
 
-- Added the ability to know when all images have been downloaded through the `callback_finish` callback.
-- Added the file `demos/print.html` to demo how to print lazy images.
+-   Added the ability to know when all images have been downloaded through the `callback_finish` callback.
+-   Added the file `demos/print.html` to demo how to print lazy images.
 
@@ -168,3 +177,3 @@ #### 10.18.0
 
-Added new option `load_delay` to skip loading when fast scrolling occurs, as requested in issues #235 and #166. 
+Added new option `load_delay` to skip loading when fast scrolling occurs, as requested in issues #235 and #166.
 Pass in a number of milliseconds, and each image will be loaded after it stayed inside that viewport for that time.
@@ -174,4 +183,4 @@
 
-- Refactorized code & improved script performance
-- **BUGFIX**: Fixed webpack import (issue #230) `TypeError: default is not a constructor`
+-   Refactorized code & improved script performance
+-   **BUGFIX**: Fixed webpack import (issue #230) `TypeError: default is not a constructor`
 
@@ -184,4 +193,4 @@ #### 10.14.0
 
-- Shortened the RegEx for crawlers detection (shaved a few bytes)
-- Released LazyLoad in new module types! Enjoy the new flavours :)
+-   Shortened the RegEx for crawlers detection (shaved a few bytes)
+-   Released LazyLoad in new module types! Enjoy the new flavours :)
 
@@ -192,3 +201,3 @@ | Filename               | Module Type                                    | Advantages                                                         |
 | `lazyload.iife.min.js` | IIFE (Immediately Invoked Function Expression) | Works as in-page `<script src="">`, ~0.5kb smaller minified        |
-| `lazyload.amd.min.js`  | AMD (Asynchronous Module Definition)           | Works with the *require.js* module loader, ~0.5kb smaller minified |
+| `lazyload.amd.min.js`  | AMD (Asynchronous Module Definition)           | Works with the _require.js_ module loader, ~0.5kb smaller minified |
 | `lazyload.es2015.js`   | ES Module type                                 | Exports `LazyLoad` so you can import it in your project            |
@@ -223,10 +232,10 @@
 
-- Added support for the `<video>` HTML tag and descending `<source>` tags. 
-  Now you can lazily load your videos too!
-- Created the `video.html` demo.
+-   Added support for the `<video>` HTML tag and descending `<source>` tags.
+    Now you can lazily load your videos too!
+-   Created the `video.html` demo.
 
 #### 10.6.0
 
-- Added a demo with a popup layer and images injected after popup open, to help with #196.
-- Updated the `background_images` demo with a custom management of the loading class and the loaded event callback.
+-   Added a demo with a popup layer and images injected after popup open, to help with #196.
+-   Updated the `background_images` demo with a custom management of the loading class and the loaded event callback.
 
@@ -287,4 +296,4 @@ #### 10.5.2
 
-- as a second parameter in the constructor, after the regular option object, e.g. `var ll = new Lazyload({}, myNodeList)`
-- as a single parameter to the `update()` method, e.g. `ll.update(myNodeList)`
+-   as a second parameter in the constructor, after the regular option object, e.g. `var ll = new Lazyload({}, myNodeList)`
+-   as a single parameter to the `update()` method, e.g. `ll.update(myNodeList)`
 
@@ -301,16 +310,16 @@ #### 10.1.0
 
-- Change in default options:
-  - default for `data_src` is now `src` (was `original`)
-  - default for `data_srcset` is now `srcset` (was `original-set`)
+-   Change in default options:
+    -   default for `data_src` is now `src` (was `original`)
+    -   default for `data_srcset` is now `srcset` (was `original-set`)
 
 ## Version 9
- 
+
 #### 9.0.1
 
-- Restored tests using Jest
-- Squashed a bug which didn't make images inside `picture` load correctly
+-   Restored tests using Jest
+-   Squashed a bug which didn't make images inside `picture` load correctly
 
-#### 9.0.0 
+#### 9.0.0
 
-LazyLoad is now _faster_ thanks to the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). 
+LazyLoad is now _faster_ thanks to the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
 
@@ -323,4 +332,4 @@ **IMPORTANT!** Browser support changed. Find more information in the [README](README.md) file.
 
-- Added the ability to know when all images have been downloaded through the `callback_finish` callback.
-- Added the file `demos/print.html` to demo how to print lazy images.
+-   Added the ability to know when all images have been downloaded through the `callback_finish` callback.
+-   Added the file `demos/print.html` to demo how to print lazy images.
 
@@ -341,4 +350,4 @@ #### 8.16.0
 
-- Refactorized code & improved script performance
-- **BUGFIX**: Fixed webpack import (issue #230) `TypeError: default is not a constructor`
+-   Refactorized code & improved script performance
+-   **BUGFIX**: Fixed webpack import (issue #230) `TypeError: default is not a constructor`
 
@@ -351,4 +360,4 @@ #### 8.14.0
 
-- Shortened the RegEx for crawlers detection (shaved a few bytes)
-- Released LazyLoad in new module types! Enjoy the new flavours :)
+-   Shortened the RegEx for crawlers detection (shaved a few bytes)
+-   Released LazyLoad in new module types! Enjoy the new flavours :)
 
@@ -359,3 +368,3 @@ | Filename               | Module Type                                    | Advantages                                                         |
 | `lazyload.iife.min.js` | IIFE (Immediately Invoked Function Expression) | Works as in-page `<script src="">`, ~0.5kb smaller minified        |
-| `lazyload.amd.min.js`  | AMD (Asynchronous Module Definition)           | Works with the *require.js* module loader, ~0.5kb smaller minified |
+| `lazyload.amd.min.js`  | AMD (Asynchronous Module Definition)           | Works with the _require.js_ module loader, ~0.5kb smaller minified |
 | `lazyload.es2015.js`   | ES Module type                                 | Exports `LazyLoad` so you can import it in your project            |
@@ -409,5 +418,5 @@
 
-- Change in default options, in order to be aligned with version 10
-  - default for `data_src` is now `src` (was `original`)
-  - default for `data_srcset` is now `srcset` (was `original-set`)
+-   Change in default options, in order to be aligned with version 10
+    -   default for `data_src` is now `src` (was `original`)
+    -   default for `data_srcset` is now `srcset` (was `original-set`)
 
@@ -440,4 +449,4 @@ #### 8.2.1
 
-- The main file to include is now **`dist/lazyload.min.js`** as you would expect, and no longer `dist/lazyload.transpiled.min.js`. 
-- The non-transpiled version is now named lazyload.es2015.js
+-   The main file to include is now **`dist/lazyload.min.js`** as you would expect, and no longer `dist/lazyload.transpiled.min.js`.
+-   The non-transpiled version is now named lazyload.es2015.js
 
@@ -448,8 +457,8 @@ ## Version 7
 
-- Now using `element.dataset` to read data attributes
-- New readme! New website!
+-   Now using `element.dataset` to read data attributes
+-   New readme! New website!
 
 Bug fixes:
 
-- Fixed #87
+-   Fixed #87
 
@@ -460,4 +469,4 @@ **IMPORTANT!** Browser support changed. Find more information in the [README](README.md) file.
 
-- Refactored code now using more modules
-- Saving ~0.5 kb of transpiled code going back from ES2015 `class` to function's `prototype`
+-   Refactored code now using more modules
+-   Saving ~0.5 kb of transpiled code going back from ES2015 `class` to function's `prototype`
 
@@ -476,3 +485,3 @@ #### 7.0.0
 
-* Added the ability to load LazyLoad using an async script
+-   Added the ability to load LazyLoad using an async script
 
@@ -485,35 +494,35 @@ #### 6.1.x
 
-* Source code migrated to ES6 / ES2015
-* Serving both minified ES6 version and minified transpiled-to-ES5 version
+-   Source code migrated to ES6 / ES2015
+-   Serving both minified ES6 version and minified transpiled-to-ES5 version
 
 ## Version 5
 
-* Exposed private functions for test coverage
-* Test coverage
+-   Exposed private functions for test coverage
+-   Test coverage
 
 ## Version 4
 
-* Lighter constructor
-* Performance improvements
-* Bugfix: null on background images
-* Removed code for legacy browsers - now supporting IE10+
+-   Lighter constructor
+-   Performance improvements
+-   Bugfix: null on background images
+-   Removed code for legacy browsers - now supporting IE10+
 
 ## Version 3
 
-* Added support to the picture tag
-* Removed the "show image only when fully loaded" mode
-  * Dumped the show_while_loading and placeholder options
+-   Added support to the picture tag
+-   Removed the "show image only when fully loaded" mode
+    -   Dumped the show_while_loading and placeholder options
 
 ## Version 2
 
-* Added support to lazily load iframes and background images
-* Added error management callback and error class option
-* Performance improvements
+-   Added support to lazily load iframes and background images
+-   Added error management callback and error class option
+-   Performance improvements
 
 ## Version 1
 
-* Added support to the srcset attribute for images
-* Added typescript typings + updated dist folder files
-* Performance improvements
-* Stable release of LazyLoad
+-   Added support to the srcset attribute for images
+-   Added typescript typings + updated dist folder files
+-   Performance improvements
+-   Stable release of LazyLoad
 
@@ -520,0 +529,0 @@ ---

dist/lazyload.amd.js

@@ -161,5 +161,5 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
   var updateLoadingCount = function updateLoadingCount(instance, plusMinus) {
-    instance._loadingCount += plusMinus;
+    instance.loadingCount += plusMinus;
 
-    if (instance._elements.length === 0 && instance._loadingCount === 0) {
+    if (instance._elements.length === 0 && instance.loadingCount === 0) {
       safeCallback(instance._settings.callback_finish, instance);
@@ -478,3 +478,3 @@ }
     this._settings = getInstanceSettings(customSettings);
-    this._loadingCount = 0;
+    this.loadingCount = 0;
     setObserver(this);
@@ -481,0 +481,0 @@ this.update(elements);

dist/lazyload.amd.min.js

@@ -1,2 +0,2 @@
-function _toConsumableArray(t){return _arrayWithoutHoles(t)||_iterableToArray(t)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function _iterableToArray(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}function _arrayWithoutHoles(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}function _extends(){return(_extends=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)}define(function(){"use strict";var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),n=t&&"IntersectionObserver"in window,r=t&&"classList"in document.createElement("p"),a={elements_selector:"img",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_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},o=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)};var i=function(t,e){return t.getAttribute("data-"+e)},s=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")},c=function(t,e){return s(t,"ll-timeout",e)},u=function(t){return i(t,"ll-timeout")},d=function(t,e,n,r){t&&(void 0===r?void 0===n?t(e):t(e,n):t(e,n,r))},f=function(t,e){t._loadingCount+=e,0===t._elements.length&&0===t._loadingCount&&d(t._settings.callback_finish,t)},_=function(t){for(var e,n=[],r=0;e=t.children[r];r+=1)"SOURCE"===e.tagName&&n.push(e);return n},v=function(t,e,n){n&&t.setAttribute(e,n)},g=function(t,e){v(t,"sizes",i(t,e.data_sizes)),v(t,"srcset",i(t,e.data_srcset)),v(t,"src",i(t,e.data_src))},h={IMG:function(t,e){var n=t.parentNode;n&&"PICTURE"===n.tagName&&_(n).forEach(function(t){g(t,e)});g(t,e)},IFRAME:function(t,e){v(t,"src",i(t,e.data_src))},VIDEO:function(t,e){_(t).forEach(function(t){v(t,"src",i(t,e.data_src))}),v(t,"poster",i(t,e.data_poster)),v(t,"src",i(t,e.data_src)),t.load()}},b=function(t,e){var n,r,a=e._settings,o=t.tagName,s=h[o];if(s)return s(t,a),f(e,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){r?t.classList.add(e):t.className+=(t.className?" ":"")+e},p=function(t,e){r?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},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)},A=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;p(i,r.class_loading),m(i,a),d(o,i,n),f(n,-1)},I=function(t,e){var n=function n(a){A(a,!0,e),w(t,n,r)},r=function r(a){A(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)},k=["IMG","IFRAME","VIDEO"],O=function(t,e){var n=e._observer;C(t,e),n&&e._settings.auto_unobserve&&n.unobserve(t)},L=function(t){var e=u(t);e&&(clearTimeout(e),c(t,null))},z=function(t,e){var n=e._settings.load_delay,r=u(t);r||(r=setTimeout(function(){O(t,e),L(t)},n),c(t,r))},C=function(t,e,n){var r=e._settings;!n&&l(t)||(k.indexOf(t.tagName)>-1&&(I(t,e),m(t,r.class_loading)),b(t,e),function(t){s(t,"was-processed","true")}(t),d(r.callback_reveal,t,e),d(r.callback_set,t,e))},N=function(t){return!!n&&(t._observer=new IntersectionObserver(function(e){e.forEach(function(e){return function(t){return t.isIntersecting||t.intersectionRatio>0}(e)?function(t,e,n){var r=n._settings;d(r.callback_enter,t,e,n),r.load_delay?z(t,n):O(t,n)}(e.target,e,t):function(t,e,n){var r=n._settings;d(r.callback_exit,t,e,n),r.load_delay&&L(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,e){return function(t){return t.filter(function(t){return!l(t)})}((n=t||function(t){return t.container.querySelectorAll(t.elements_selector)}(e),Array.prototype.slice.call(n)));var n},R=function(t){var e=t._settings;_toConsumableArray(e.container.querySelectorAll("."+e.class_error)).forEach(function(t){p(t,e.class_error),function(t){s(t,"was-processed",null)}(t)}),t.update()},S=function(e,n){var r;this._settings=function(t){return _extends({},a,t)}(e),this._loadingCount=0,N(this),this.update(n),r=this,t&&window.addEventListener("online",function(t){R(r)})};return S.prototype={update:function(t){var n,r=this,a=this._settings;(this._elements=M(t,a),!e&&this._observer)?(function(t){return t.use_native&&"loading"in HTMLImageElement.prototype}(a)&&((n=this)._elements.forEach(function(t){-1!==x.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),C(t,n))}),this._elements=M(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){C(t,this,e)},loadAll:function(){var t=this;this._elements.forEach(function(e){O(e,t)})}},t&&function(t,e){if(e)if(e.length)for(var n,r=0;n=e[r];r+=1)o(t,n);else o(t,e)}(S,window.lazyLoadOptions),S});
+function _toConsumableArray(t){return _arrayWithoutHoles(t)||_iterableToArray(t)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function _iterableToArray(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}function _arrayWithoutHoles(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}function _extends(){return(_extends=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)}define(function(){"use strict";var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),n=t&&"IntersectionObserver"in window,r=t&&"classList"in document.createElement("p"),a={elements_selector:"img",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_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},o=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)};var i=function(t,e){return t.getAttribute("data-"+e)},s=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")},c=function(t,e){return s(t,"ll-timeout",e)},u=function(t){return i(t,"ll-timeout")},d=function(t,e,n,r){t&&(void 0===r?void 0===n?t(e):t(e,n):t(e,n,r))},f=function(t,e){t.loadingCount+=e,0===t._elements.length&&0===t.loadingCount&&d(t._settings.callback_finish,t)},_=function(t){for(var e,n=[],r=0;e=t.children[r];r+=1)"SOURCE"===e.tagName&&n.push(e);return n},v=function(t,e,n){n&&t.setAttribute(e,n)},g=function(t,e){v(t,"sizes",i(t,e.data_sizes)),v(t,"srcset",i(t,e.data_srcset)),v(t,"src",i(t,e.data_src))},h={IMG:function(t,e){var n=t.parentNode;n&&"PICTURE"===n.tagName&&_(n).forEach(function(t){g(t,e)});g(t,e)},IFRAME:function(t,e){v(t,"src",i(t,e.data_src))},VIDEO:function(t,e){_(t).forEach(function(t){v(t,"src",i(t,e.data_src))}),v(t,"poster",i(t,e.data_poster)),v(t,"src",i(t,e.data_src)),t.load()}},b=function(t,e){var n,r,a=e._settings,o=t.tagName,s=h[o];if(s)return s(t,a),f(e,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){r?t.classList.add(e):t.className+=(t.className?" ":"")+e},p=function(t,e){r?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},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)},A=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;p(i,r.class_loading),m(i,a),d(o,i,n),f(n,-1)},I=function(t,e){var n=function n(a){A(a,!0,e),w(t,n,r)},r=function r(a){A(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)},k=["IMG","IFRAME","VIDEO"],O=function(t,e){var n=e._observer;C(t,e),n&&e._settings.auto_unobserve&&n.unobserve(t)},L=function(t){var e=u(t);e&&(clearTimeout(e),c(t,null))},z=function(t,e){var n=e._settings.load_delay,r=u(t);r||(r=setTimeout(function(){O(t,e),L(t)},n),c(t,r))},C=function(t,e,n){var r=e._settings;!n&&l(t)||(k.indexOf(t.tagName)>-1&&(I(t,e),m(t,r.class_loading)),b(t,e),function(t){s(t,"was-processed","true")}(t),d(r.callback_reveal,t,e),d(r.callback_set,t,e))},N=function(t){return!!n&&(t._observer=new IntersectionObserver(function(e){e.forEach(function(e){return function(t){return t.isIntersecting||t.intersectionRatio>0}(e)?function(t,e,n){var r=n._settings;d(r.callback_enter,t,e,n),r.load_delay?z(t,n):O(t,n)}(e.target,e,t):function(t,e,n){var r=n._settings;d(r.callback_exit,t,e,n),r.load_delay&&L(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,e){return function(t){return t.filter(function(t){return!l(t)})}((n=t||function(t){return t.container.querySelectorAll(t.elements_selector)}(e),Array.prototype.slice.call(n)));var n},R=function(t){var e=t._settings;_toConsumableArray(e.container.querySelectorAll("."+e.class_error)).forEach(function(t){p(t,e.class_error),function(t){s(t,"was-processed",null)}(t)}),t.update()},S=function(e,n){var r;this._settings=function(t){return _extends({},a,t)}(e),this.loadingCount=0,N(this),this.update(n),r=this,t&&window.addEventListener("online",function(t){R(r)})};return S.prototype={update:function(t){var n,r=this,a=this._settings;(this._elements=M(t,a),!e&&this._observer)?(function(t){return t.use_native&&"loading"in HTMLImageElement.prototype}(a)&&((n=this)._elements.forEach(function(t){-1!==x.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),C(t,n))}),this._elements=M(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){C(t,this,e)},loadAll:function(){var t=this;this._elements.forEach(function(e){O(e,t)})}},t&&function(t,e){if(e)if(e.length)for(var n,r=0;n=e[r];r+=1)o(t,n);else o(t,e)}(S,window.lazyLoadOptions),S});
 //# sourceMappingURL=lazyload.amd.min.js.map

dist/lazyload.esm.js

@@ -132,6 +132,6 @@ const runningOnBrowser = typeof window !== "undefined";
 const updateLoadingCount = (instance, plusMinus) => {
-	instance._loadingCount += plusMinus;
-	if (instance._elements.length === 0 && instance._loadingCount === 0) {
-		safeCallback(instance._settings.callback_finish, instance);
-	}
+    instance.loadingCount += plusMinus;
+    if (instance._elements.length === 0 && instance.loadingCount === 0) {
+        safeCallback(instance._settings.callback_finish, instance);
+    }
 };
@@ -440,46 +440,46 @@
 const LazyLoad = function(customSettings, elements) {
-	this._settings = getInstanceSettings(customSettings);
-	this._loadingCount = 0;
-	setObserver(this);
-	this.update(elements);
-	setOnlineCheck(this);
+    this._settings = getInstanceSettings(customSettings);
+    this.loadingCount = 0;
+    setObserver(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();
-			return;
-		}
-		if (shouldUseNative(settings)) {
-			loadAllNative(this);
-			this._elements = getElements(elements, settings);
-		}
-		this._elements.forEach(element => {
-			this._observer.observe(element);
-		});
-	},
+    update: function(elements) {
+        var settings = this._settings;
+        this._elements = getElements(elements, settings);
+        if (isBot || !this._observer) {
+            this.loadAll();
+            return;
+        }
+        if (shouldUseNative(settings)) {
+            loadAllNative(this);
+            this._elements = getElements(elements, settings);
+        }
+        this._elements.forEach(element => {
+            this._observer.observe(element);
+        });
+    },
 
-	destroy: function() {
-		if (this._observer) {
-			this._elements.forEach(element => {
-				this._observer.unobserve(element);
-			});
-			this._observer = null;
-		}
-		this._elements = null;
-		this._settings = null;
-	},
+    destroy: function() {
+        if (this._observer) {
+            this._elements.forEach(element => {
+                this._observer.unobserve(element);
+            });
+            this._observer = null;
+        }
+        this._elements = null;
+        this._settings = null;
+    },
 
-	load: function(element, force) {
-		revealElement(element, this, force);
-	},
+    load: function(element, force) {
+        revealElement(element, this, force);
+    },
 
-	loadAll: function() {
-		this._elements.forEach(element => {
-			revealAndUnobserve(element, this);
-		});
-	}
+    loadAll: function() {
+        this._elements.forEach(element => {
+            revealAndUnobserve(element, this);
+        });
+    }
 };
@@ -489,5 +489,5 @@
 if (runningOnBrowser) {
-	autoInitialize(LazyLoad, window.lazyLoadOptions);
+    autoInitialize(LazyLoad, window.lazyLoadOptions);
 }
 
 export default LazyLoad;

dist/lazyload.iife.js

@@ -161,5 +161,5 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
   var updateLoadingCount = function updateLoadingCount(instance, plusMinus) {
-    instance._loadingCount += plusMinus;
+    instance.loadingCount += plusMinus;
 
-    if (instance._elements.length === 0 && instance._loadingCount === 0) {
+    if (instance._elements.length === 0 && instance.loadingCount === 0) {
       safeCallback(instance._settings.callback_finish, instance);
@@ -478,3 +478,3 @@ }
     this._settings = getInstanceSettings(customSettings);
-    this._loadingCount = 0;
+    this.loadingCount = 0;
     setObserver(this);
@@ -481,0 +481,0 @@ this.update(elements);

dist/lazyload.iife.min.js

@@ -1,2 +0,2 @@
-function _toConsumableArray(t){return _arrayWithoutHoles(t)||_iterableToArray(t)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function _iterableToArray(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}function _arrayWithoutHoles(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}function _extends(){return(_extends=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 LazyLoad=function(){"use strict";var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),n=t&&"IntersectionObserver"in window,r=t&&"classList"in document.createElement("p"),a={elements_selector:"img",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_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},o=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)};var i=function(t,e){return t.getAttribute("data-"+e)},s=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")},c=function(t,e){return s(t,"ll-timeout",e)},u=function(t){return i(t,"ll-timeout")},d=function(t,e,n,r){t&&(void 0===r?void 0===n?t(e):t(e,n):t(e,n,r))},f=function(t,e){t._loadingCount+=e,0===t._elements.length&&0===t._loadingCount&&d(t._settings.callback_finish,t)},_=function(t){for(var e,n=[],r=0;e=t.children[r];r+=1)"SOURCE"===e.tagName&&n.push(e);return n},v=function(t,e,n){n&&t.setAttribute(e,n)},g=function(t,e){v(t,"sizes",i(t,e.data_sizes)),v(t,"srcset",i(t,e.data_srcset)),v(t,"src",i(t,e.data_src))},h={IMG:function(t,e){var n=t.parentNode;n&&"PICTURE"===n.tagName&&_(n).forEach(function(t){g(t,e)});g(t,e)},IFRAME:function(t,e){v(t,"src",i(t,e.data_src))},VIDEO:function(t,e){_(t).forEach(function(t){v(t,"src",i(t,e.data_src))}),v(t,"poster",i(t,e.data_poster)),v(t,"src",i(t,e.data_src)),t.load()}},b=function(t,e){var n,r,a=e._settings,o=t.tagName,s=h[o];if(s)return s(t,a),f(e,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){r?t.classList.add(e):t.className+=(t.className?" ":"")+e},p=function(t,e){r?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},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)},A=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;p(i,r.class_loading),m(i,a),d(o,i,n),f(n,-1)},I=function(t,e){var n=function n(a){A(a,!0,e),w(t,n,r)},r=function r(a){A(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)},k=["IMG","IFRAME","VIDEO"],L=function(t,e){var n=e._observer;C(t,e),n&&e._settings.auto_unobserve&&n.unobserve(t)},O=function(t){var e=u(t);e&&(clearTimeout(e),c(t,null))},z=function(t,e){var n=e._settings.load_delay,r=u(t);r||(r=setTimeout(function(){L(t,e),O(t)},n),c(t,r))},C=function(t,e,n){var r=e._settings;!n&&l(t)||(k.indexOf(t.tagName)>-1&&(I(t,e),m(t,r.class_loading)),b(t,e),function(t){s(t,"was-processed","true")}(t),d(r.callback_reveal,t,e),d(r.callback_set,t,e))},N=function(t){return!!n&&(t._observer=new IntersectionObserver(function(e){e.forEach(function(e){return function(t){return t.isIntersecting||t.intersectionRatio>0}(e)?function(t,e,n){var r=n._settings;d(r.callback_enter,t,e,n),r.load_delay?z(t,n):L(t,n)}(e.target,e,t):function(t,e,n){var r=n._settings;d(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,e){return function(t){return t.filter(function(t){return!l(t)})}((n=t||function(t){return t.container.querySelectorAll(t.elements_selector)}(e),Array.prototype.slice.call(n)));var n},R=function(t){var e=t._settings;_toConsumableArray(e.container.querySelectorAll("."+e.class_error)).forEach(function(t){p(t,e.class_error),function(t){s(t,"was-processed",null)}(t)}),t.update()},S=function(e,n){var r;this._settings=function(t){return _extends({},a,t)}(e),this._loadingCount=0,N(this),this.update(n),r=this,t&&window.addEventListener("online",function(t){R(r)})};return S.prototype={update:function(t){var n,r=this,a=this._settings;(this._elements=M(t,a),!e&&this._observer)?(function(t){return t.use_native&&"loading"in HTMLImageElement.prototype}(a)&&((n=this)._elements.forEach(function(t){-1!==x.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),C(t,n))}),this._elements=M(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){C(t,this,e)},loadAll:function(){var t=this;this._elements.forEach(function(e){L(e,t)})}},t&&function(t,e){if(e)if(e.length)for(var n,r=0;n=e[r];r+=1)o(t,n);else o(t,e)}(S,window.lazyLoadOptions),S}();
+function _toConsumableArray(t){return _arrayWithoutHoles(t)||_iterableToArray(t)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function _iterableToArray(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}function _arrayWithoutHoles(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}function _extends(){return(_extends=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 LazyLoad=function(){"use strict";var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),n=t&&"IntersectionObserver"in window,r=t&&"classList"in document.createElement("p"),a={elements_selector:"img",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_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},o=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)};var i=function(t,e){return t.getAttribute("data-"+e)},s=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")},c=function(t,e){return s(t,"ll-timeout",e)},u=function(t){return i(t,"ll-timeout")},d=function(t,e,n,r){t&&(void 0===r?void 0===n?t(e):t(e,n):t(e,n,r))},f=function(t,e){t.loadingCount+=e,0===t._elements.length&&0===t.loadingCount&&d(t._settings.callback_finish,t)},_=function(t){for(var e,n=[],r=0;e=t.children[r];r+=1)"SOURCE"===e.tagName&&n.push(e);return n},v=function(t,e,n){n&&t.setAttribute(e,n)},g=function(t,e){v(t,"sizes",i(t,e.data_sizes)),v(t,"srcset",i(t,e.data_srcset)),v(t,"src",i(t,e.data_src))},h={IMG:function(t,e){var n=t.parentNode;n&&"PICTURE"===n.tagName&&_(n).forEach(function(t){g(t,e)});g(t,e)},IFRAME:function(t,e){v(t,"src",i(t,e.data_src))},VIDEO:function(t,e){_(t).forEach(function(t){v(t,"src",i(t,e.data_src))}),v(t,"poster",i(t,e.data_poster)),v(t,"src",i(t,e.data_src)),t.load()}},b=function(t,e){var n,r,a=e._settings,o=t.tagName,s=h[o];if(s)return s(t,a),f(e,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){r?t.classList.add(e):t.className+=(t.className?" ":"")+e},p=function(t,e){r?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},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)},A=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;p(i,r.class_loading),m(i,a),d(o,i,n),f(n,-1)},I=function(t,e){var n=function n(a){A(a,!0,e),w(t,n,r)},r=function r(a){A(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)},k=["IMG","IFRAME","VIDEO"],L=function(t,e){var n=e._observer;C(t,e),n&&e._settings.auto_unobserve&&n.unobserve(t)},O=function(t){var e=u(t);e&&(clearTimeout(e),c(t,null))},z=function(t,e){var n=e._settings.load_delay,r=u(t);r||(r=setTimeout(function(){L(t,e),O(t)},n),c(t,r))},C=function(t,e,n){var r=e._settings;!n&&l(t)||(k.indexOf(t.tagName)>-1&&(I(t,e),m(t,r.class_loading)),b(t,e),function(t){s(t,"was-processed","true")}(t),d(r.callback_reveal,t,e),d(r.callback_set,t,e))},N=function(t){return!!n&&(t._observer=new IntersectionObserver(function(e){e.forEach(function(e){return function(t){return t.isIntersecting||t.intersectionRatio>0}(e)?function(t,e,n){var r=n._settings;d(r.callback_enter,t,e,n),r.load_delay?z(t,n):L(t,n)}(e.target,e,t):function(t,e,n){var r=n._settings;d(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,e){return function(t){return t.filter(function(t){return!l(t)})}((n=t||function(t){return t.container.querySelectorAll(t.elements_selector)}(e),Array.prototype.slice.call(n)));var n},R=function(t){var e=t._settings;_toConsumableArray(e.container.querySelectorAll("."+e.class_error)).forEach(function(t){p(t,e.class_error),function(t){s(t,"was-processed",null)}(t)}),t.update()},S=function(e,n){var r;this._settings=function(t){return _extends({},a,t)}(e),this.loadingCount=0,N(this),this.update(n),r=this,t&&window.addEventListener("online",function(t){R(r)})};return S.prototype={update:function(t){var n,r=this,a=this._settings;(this._elements=M(t,a),!e&&this._observer)?(function(t){return t.use_native&&"loading"in HTMLImageElement.prototype}(a)&&((n=this)._elements.forEach(function(t){-1!==x.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),C(t,n))}),this._elements=M(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){C(t,this,e)},loadAll:function(){var t=this;this._elements.forEach(function(e){L(e,t)})}},t&&function(t,e){if(e)if(e.length)for(var n,r=0;n=e[r];r+=1)o(t,n);else o(t,e)}(S,window.lazyLoadOptions),S}();
 //# sourceMappingURL=lazyload.iife.min.js.map

dist/lazyload.js

@@ -165,5 +165,5 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
   var updateLoadingCount = function updateLoadingCount(instance, plusMinus) {
-    instance._loadingCount += plusMinus;
+    instance.loadingCount += plusMinus;
 
-    if (instance._elements.length === 0 && instance._loadingCount === 0) {
+    if (instance._elements.length === 0 && instance.loadingCount === 0) {
       safeCallback(instance._settings.callback_finish, instance);
@@ -482,3 +482,3 @@ }
     this._settings = getInstanceSettings(customSettings);
-    this._loadingCount = 0;
+    this.loadingCount = 0;
     setObserver(this);
@@ -485,0 +485,0 @@ this.update(elements);

dist/lazyload.min.js

@@ -1,2 +0,2 @@
-function _toConsumableArray(t){return _arrayWithoutHoles(t)||_iterableToArray(t)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function _iterableToArray(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}function _arrayWithoutHoles(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}function _extends(){return(_extends=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)}function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}!function(t,e){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.LazyLoad=e()}(this,function(){"use strict";var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),n=t&&"IntersectionObserver"in window,r=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_reveal:null,callback_loaded:null,callback_error:null,callback_finish:null,use_native:!1},a=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)};var i=function(t,e){return t.getAttribute("data-"+e)},s=function(t,e,n){var r="data-"+e;null!==n?t.setAttribute(r,n):t.removeAttribute(r)},c=function(t){return"true"===i(t,"was-processed")},l=function(t,e){return s(t,"ll-timeout",e)},u=function(t){return i(t,"ll-timeout")},d=function(t,e,n,r){t&&(void 0===r?void 0===n?t(e):t(e,n):t(e,n,r))},f=function(t,e){t._loadingCount+=e,0===t._elements.length&&0===t._loadingCount&&d(t._settings.callback_finish,t)},_=function(t){for(var e,n=[],r=0;e=t.children[r];r+=1)"SOURCE"===e.tagName&&n.push(e);return n},v=function(t,e,n){n&&t.setAttribute(e,n)},b=function(t,e){v(t,"sizes",i(t,e.data_sizes)),v(t,"srcset",i(t,e.data_srcset)),v(t,"src",i(t,e.data_src))},m={IMG:function(t,e){var n=t.parentNode;n&&"PICTURE"===n.tagName&&_(n).forEach(function(t){b(t,e)});b(t,e)},IFRAME:function(t,e){v(t,"src",i(t,e.data_src))},VIDEO:function(t,e){_(t).forEach(function(t){v(t,"src",i(t,e.data_src))}),v(t,"poster",i(t,e.data_poster)),v(t,"src",i(t,e.data_src)),t.load()}},p=function(t,e){var n,r,o=e._settings,a=t.tagName,s=m[a];if(s)return s(t,o),f(e,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,o)},g=function(t,e){r?t.classList.add(e):t.className+=(t.className?" ":"")+e},y=function(t,e){r?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},h=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)},A=function(t,e,n){var r=n._settings,o=e?r.class_loaded:r.class_error,a=e?r.callback_loaded:r.callback_error,i=t.target;y(i,r.class_loading),g(i,o),d(a,i,n),f(n,-1)},I=function(t,e){var n=function n(o){A(o,!0,e),w(t,n,r)},r=function r(o){A(o,!1,e),w(t,n,r)};!function(t,e,n){h(t,"load",e),h(t,"loadeddata",e),h(t,"error",n)}(t,n,r)},k=["IMG","IFRAME","VIDEO"],L=function(t,e){var n=e._observer;S(t,e),n&&e._settings.auto_unobserve&&n.unobserve(t)},O=function(t){var e=u(t);e&&(clearTimeout(e),l(t,null))},x=function(t,e){var n=e._settings.load_delay,r=u(t);r||(r=setTimeout(function(){L(t,e),O(t)},n),l(t,r))},S=function(t,e,n){var r=e._settings;!n&&c(t)||(k.indexOf(t.tagName)>-1&&(I(t,e),g(t,r.class_loading)),p(t,e),function(t){s(t,"was-processed","true")}(t),d(r.callback_reveal,t,e),d(r.callback_set,t,e))},z=function(t){return!!n&&(t._observer=new IntersectionObserver(function(e){e.forEach(function(e){return function(t){return t.isIntersecting||t.intersectionRatio>0}(e)?function(t,e,n){var r=n._settings;d(r.callback_enter,t,e,n),r.load_delay?x(t,n):L(t,n)}(e.target,e,t):function(t,e,n){var r=n._settings;d(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},C=["IMG","IFRAME"],N=function(t,e){return function(t){return t.filter(function(t){return!c(t)})}((n=t||function(t){return t.container.querySelectorAll(t.elements_selector)}(e),Array.prototype.slice.call(n)));var n},M=function(t){var e=t._settings;_toConsumableArray(e.container.querySelectorAll("."+e.class_error)).forEach(function(t){y(t,e.class_error),function(t){s(t,"was-processed",null)}(t)}),t.update()},R=function(e,n){var r;this._settings=function(t){return _extends({},o,t)}(e),this._loadingCount=0,z(this),this.update(n),r=this,t&&window.addEventListener("online",function(t){M(r)})};return R.prototype={update:function(t){var n,r=this,o=this._settings;(this._elements=N(t,o),!e&&this._observer)?(function(t){return t.use_native&&"loading"in HTMLImageElement.prototype}(o)&&((n=this)._elements.forEach(function(t){-1!==C.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),S(t,n))}),this._elements=N(t,o)),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){S(t,this,e)},loadAll:function(){var t=this;this._elements.forEach(function(e){L(e,t)})}},t&&function(t,e){if(e)if(e.length)for(var n,r=0;n=e[r];r+=1)a(t,n);else a(t,e)}(R,window.lazyLoadOptions),R});
+function _toConsumableArray(t){return _arrayWithoutHoles(t)||_iterableToArray(t)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function _iterableToArray(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}function _arrayWithoutHoles(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}function _extends(){return(_extends=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)}function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}!function(t,e){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.LazyLoad=e()}(this,function(){"use strict";var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),n=t&&"IntersectionObserver"in window,r=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_reveal:null,callback_loaded:null,callback_error:null,callback_finish:null,use_native:!1},a=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)};var i=function(t,e){return t.getAttribute("data-"+e)},s=function(t,e,n){var r="data-"+e;null!==n?t.setAttribute(r,n):t.removeAttribute(r)},c=function(t){return"true"===i(t,"was-processed")},l=function(t,e){return s(t,"ll-timeout",e)},u=function(t){return i(t,"ll-timeout")},d=function(t,e,n,r){t&&(void 0===r?void 0===n?t(e):t(e,n):t(e,n,r))},f=function(t,e){t.loadingCount+=e,0===t._elements.length&&0===t.loadingCount&&d(t._settings.callback_finish,t)},_=function(t){for(var e,n=[],r=0;e=t.children[r];r+=1)"SOURCE"===e.tagName&&n.push(e);return n},v=function(t,e,n){n&&t.setAttribute(e,n)},b=function(t,e){v(t,"sizes",i(t,e.data_sizes)),v(t,"srcset",i(t,e.data_srcset)),v(t,"src",i(t,e.data_src))},m={IMG:function(t,e){var n=t.parentNode;n&&"PICTURE"===n.tagName&&_(n).forEach(function(t){b(t,e)});b(t,e)},IFRAME:function(t,e){v(t,"src",i(t,e.data_src))},VIDEO:function(t,e){_(t).forEach(function(t){v(t,"src",i(t,e.data_src))}),v(t,"poster",i(t,e.data_poster)),v(t,"src",i(t,e.data_src)),t.load()}},p=function(t,e){var n,r,o=e._settings,a=t.tagName,s=m[a];if(s)return s(t,o),f(e,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,o)},g=function(t,e){r?t.classList.add(e):t.className+=(t.className?" ":"")+e},y=function(t,e){r?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},h=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)},A=function(t,e,n){var r=n._settings,o=e?r.class_loaded:r.class_error,a=e?r.callback_loaded:r.callback_error,i=t.target;y(i,r.class_loading),g(i,o),d(a,i,n),f(n,-1)},I=function(t,e){var n=function n(o){A(o,!0,e),w(t,n,r)},r=function r(o){A(o,!1,e),w(t,n,r)};!function(t,e,n){h(t,"load",e),h(t,"loadeddata",e),h(t,"error",n)}(t,n,r)},k=["IMG","IFRAME","VIDEO"],L=function(t,e){var n=e._observer;S(t,e),n&&e._settings.auto_unobserve&&n.unobserve(t)},O=function(t){var e=u(t);e&&(clearTimeout(e),l(t,null))},x=function(t,e){var n=e._settings.load_delay,r=u(t);r||(r=setTimeout(function(){L(t,e),O(t)},n),l(t,r))},S=function(t,e,n){var r=e._settings;!n&&c(t)||(k.indexOf(t.tagName)>-1&&(I(t,e),g(t,r.class_loading)),p(t,e),function(t){s(t,"was-processed","true")}(t),d(r.callback_reveal,t,e),d(r.callback_set,t,e))},z=function(t){return!!n&&(t._observer=new IntersectionObserver(function(e){e.forEach(function(e){return function(t){return t.isIntersecting||t.intersectionRatio>0}(e)?function(t,e,n){var r=n._settings;d(r.callback_enter,t,e,n),r.load_delay?x(t,n):L(t,n)}(e.target,e,t):function(t,e,n){var r=n._settings;d(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},C=["IMG","IFRAME"],N=function(t,e){return function(t){return t.filter(function(t){return!c(t)})}((n=t||function(t){return t.container.querySelectorAll(t.elements_selector)}(e),Array.prototype.slice.call(n)));var n},M=function(t){var e=t._settings;_toConsumableArray(e.container.querySelectorAll("."+e.class_error)).forEach(function(t){y(t,e.class_error),function(t){s(t,"was-processed",null)}(t)}),t.update()},R=function(e,n){var r;this._settings=function(t){return _extends({},o,t)}(e),this.loadingCount=0,z(this),this.update(n),r=this,t&&window.addEventListener("online",function(t){M(r)})};return R.prototype={update:function(t){var n,r=this,o=this._settings;(this._elements=N(t,o),!e&&this._observer)?(function(t){return t.use_native&&"loading"in HTMLImageElement.prototype}(o)&&((n=this)._elements.forEach(function(t){-1!==C.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),S(t,n))}),this._elements=N(t,o)),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){S(t,this,e)},loadAll:function(){var t=this;this._elements.forEach(function(e){L(e,t)})}},t&&function(t,e){if(e)if(e.length)for(var n,r=0;n=e[r];r+=1)a(t,n);else a(t,e)}(R,window.lazyLoadOptions),R});
 //# sourceMappingURL=lazyload.min.js.map

package.json

 {
-	"name": "vanilla-lazyload",
-	"version": "12.4.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",
-	"main": "dist/lazyload.min.js",
-	"module": "dist/lazyload.esm.js",
-	"browser": "dist/lazyload.min.js",
-	"typings": "typings/lazyload.d.ts",
-	"dependencies": {},
-	"devDependencies": {
-		"@babel/core": "^7.6.4",
-		"@babel/plugin-transform-object-assign": "^7.0.0",
-		"@babel/preset-env": "^7.6.3",
-		"babel-core": "^7.0.0-bridge.0",
-		"babel-jest": "^24.9.0",
-		"gulp": "^4.0.2",
-		"gulp-babel": "^8.0.0",
-		"gulp-eslint": "^5.0.0",
-		"gulp-rename": "^1.4.0",
-		"gulp-rollup": "^2.16.2",
-		"gulp-sourcemaps": "^2.6.5",
-		"gulp-uglify-es": "^1.0.4",
-		"jest": "^24.9.0"
-	},
-	"scripts": {
-		"build": "gulp",
-		"dev": "gulp watch",
-		"test": "jest"
-	},
-	"files": [
-		"dist",
-		"typings"
-	],
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/verlok/lazyload"
-	},
-	"keywords": [
-		"lazyload",
-		"vanilla",
-		"responsive",
-		"images",
-		"picture",
-		"srcset",
-		"SEO",
-		"intersectionObserver",
-		"sizes",
-		"progressive",
-		"performance",
-		"perfmatters",
-		"async",
-		"no-jquery"
-	],
-	"author": {
-		"name": "Andrea \"verlok\" Verlicchi",
-		"email": "[e-mail]",
-		"url": "http://andreaverlicchi.eu"
-	},
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/verlok/lazyload/issues"
-	},
-	"homepage": "http://verlok.github.io/lazyload"
+    "name": "vanilla-lazyload",
+    "version": "12.5.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",
+    "main": "dist/lazyload.min.js",
+    "module": "dist/lazyload.esm.js",
+    "browser": "dist/lazyload.min.js",
+    "typings": "typings/lazyload.d.ts",
+    "dependencies": {},
+    "devDependencies": {
+        "@babel/core": "^7.6.4",
+        "@babel/plugin-transform-object-assign": "^7.0.0",
+        "@babel/preset-env": "^7.6.3",
+        "babel-core": "^7.0.0-bridge.0",
+        "babel-jest": "^24.9.0",
+        "gulp": "^4.0.2",
+        "gulp-babel": "^8.0.0",
+        "gulp-eslint": "^5.0.0",
+        "gulp-rename": "^1.4.0",
+        "gulp-rollup": "^2.16.2",
+        "gulp-sourcemaps": "^2.6.5",
+        "gulp-uglify-es": "^1.0.4",
+        "jest": "^24.9.0"
+    },
+    "scripts": {
+        "build": "gulp",
+        "dev": "gulp watch",
+        "test": "jest"
+    },
+    "files": [
+        "dist",
+        "typings"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/verlok/lazyload"
+    },
+    "keywords": [
+        "lazyload",
+        "vanilla",
+        "responsive",
+        "images",
+        "picture",
+        "srcset",
+        "SEO",
+        "intersectionObserver",
+        "sizes",
+        "progressive",
+        "performance",
+        "perfmatters",
+        "async",
+        "no-jquery"
+    ],
+    "author": {
+        "name": "Andrea \"verlok\" Verlicchi",
+        "email": "[e-mail]",
+        "url": "http://andreaverlicchi.eu"
+    },
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/verlok/lazyload/issues"
+    },
+    "homepage": "http://verlok.github.io/lazyload"
 }

README.md

 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.
 
+[![vanilla-lazyload (latest)](https://img.shields.io/npm/v/vanilla-lazyload/latest.svg)](https://www.npmjs.com/package/vanilla-lazyload)
+[![vanilla-lazyload (downloads)](http://img.shields.io/npm/dy/vanilla-lazyload.svg)](https://www.npmjs.com/package/vanilla-lazyload)
 [![](https://data.jsdelivr.com/v1/package/npm/vanilla-lazyload/badge)](https://www.jsdelivr.com/package/npm/vanilla-lazyload)
@@ -16,3 +18,3 @@
 ```html
-<img alt="A lazy image" data-src="lazy.jpg">
+<img alt="A lazy image" data-src="lazy.jpg" />
 ```
@@ -23,3 +25,3 @@
 ```html
-<img alt="A lazy image" src="lazy-lowQuality.jpg" data-src="lazy.jpg">
+<img alt="A lazy image" src="lazy-lowQuality.jpg" data-src="lazy.jpg" />
 ```
@@ -30,6 +32,9 @@
 ```html
-<img alt="A lazy image" class="lazy" 
-    data-src="lazy.jpg" 
-    data-srcset="lazy_400.jpg 400w, lazy_800.jpg 800w" 
-    data-sizes="100w">
+<img
+    alt="A lazy image"
+    class="lazy"
+    data-src="lazy.jpg"
+    data-srcset="lazy_400.jpg 400w, lazy_800.jpg 800w"
+    data-sizes="100w"
+/>
 ```
@@ -43,10 +48,5 @@
 <picture>
-    <source 
-        media="(min-width: 1200px)" 
-        data-srcset="lazy_1200.jpg 1x, lazy_2400.jpg 2x">
-    <source 
-        media="(min-width: 800px)" 
-        data-srcset="lazy_800.jpg 1x, lazy_1600.jpg 2x">
-    <img alt="A lazy image" class="lazy" 
-        data-src="lazy.jpg">
+    <source media="(min-width: 1200px)" data-srcset="lazy_1200.jpg 1x, lazy_2400.jpg 2x" />
+    <source media="(min-width: 800px)" data-srcset="lazy_800.jpg 1x, lazy_1600.jpg 2x" />
+    <img alt="A lazy image" class="lazy" data-src="lazy.jpg" />
 </picture>
@@ -61,9 +61,14 @@ ```
 <picture>
-    <source type="image/webp" 
-        data-srcset="lazy_400.webp 400w, lazy_800.webp 800w" 
-        data-sizes="100w">
-    <img alt="A lazy image" class="lazy" 
-        data-src="lazy.jpg" 
+    <source
+        type="image/webp"
+        data-srcset="lazy_400.webp 400w, lazy_800.webp 800w"
+        data-sizes="100w"
+    />
+    <img
+        alt="A lazy image"
+        class="lazy"
+        data-src="lazy.jpg"
         data-srcset="lazy_400.jpg 400w, lazy_800.jpg 800w"
-        data-sizes="100w">
+        data-sizes="100w"
+    />
 </picture>
@@ -85,4 +90,3 @@ ```
 ```html
-<div class="lazy" 
-    data-bg="url(lazy-head.jpg), url(lazy-body.jpg), linear-gradient(#fff, #ccc)">
+<div class="lazy" data-bg="url(lazy-head.jpg), url(lazy-body.jpg), linear-gradient(#fff, #ccc)">
     ...
@@ -92,15 +96,15 @@ </div>
 
-Notes: 
-- you need to use `url()` in the value of your `data-bg` attribute, also for single background
-- you shouldn't use background images to load content images, they're bad for SEO and for accessibility
-- on background images, `callback_loaded` won't be called and the `class_loaded` class won't be added
+Notes:
 
+-   you need to use `url()` in the value of your `data-bg` attribute, also for single background
+-   you shouldn't use background images to load content images, they're bad for SEO and for accessibility
+-   on background images, `callback_loaded` won't be called and the `class_loaded` class won't be added
+
 #### Lazy video
 
 ```html
-<video class="lazy" controls width="620"
-    data-src="lazy.mp4" data-poster="lazy.jpg">
-    <source type="video/mp4" data-src="lazy.mp4">
-    <source type="video/ogg" data-src="lazy.ogg">
-    <source type="video/avi" data-src="lazy.avi">
+<video class="lazy" controls width="620" data-src="lazy.mp4" data-poster="lazy.jpg">
+    <source type="video/mp4" data-src="lazy.mp4" />
+    <source type="video/ogg" data-src="lazy.ogg" />
+    <source type="video/avi" data-src="lazy.avi" />
 </video>
@@ -119,3 +123,3 @@ ```
 
-The latest, recommended version of LazyLoad is **12.4.0**.
+The latest, recommended version of LazyLoad is **12.5.0**.
 
@@ -135,3 +139,3 @@ ### To polyfill or not to polyfill IntersectionObserver?
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.4.0/dist/lazyload.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.5.0/dist/lazyload.min.js"></script>
 ```
@@ -143,3 +147,3 @@
 <script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.7.0/intersection-observer.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.4.0/dist/lazyload.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.5.0/dist/lazyload.min.js"></script>
 ```
@@ -177,3 +181,3 @@
 ```js
-var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.4.0/dist/lazyload.amd.min.js";
+var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.5.0/dist/lazyload.amd.min.js";
 var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/intersection-observer-amd@2.1.0/intersection-observer-amd.js";
@@ -200,20 +204,19 @@
 
-
 ### Using an `async` script
 
-If you prefer, it's possible to include LazyLoad's script using `async` script and initialize it as soon as it's loaded.	
+If you prefer, it's possible to include LazyLoad's script using `async` script and initialize it as soon as it's loaded.
 
 To do so, **you must define the options before including the script**. You can pass:
 
-- `{}` an object to get a single instance of LazyLoad
-- `[{}, {}]` an array of objects to get multiple instances of LazyLoad, each one with different options.
+-   `{}` an object to get a single instance of LazyLoad
+-   `[{}, {}]` an array of objects to get multiple instances of LazyLoad, each one with different options.
 
-```html	
-<script>	
-    // Set the options to make LazyLoad self-initialize	
-    window.lazyLoadOptions = {	
-        elements_selector: ".lazy",	
-        // ... more custom settings?	
+```html
+<script>
+    // Set the options to make LazyLoad self-initialize
+    window.lazyLoadOptions = {
+        elements_selector: ".lazy"
+        // ... more custom settings?
     };
-</script>	
+</script>
 ```
@@ -223,4 +226,7 @@
 
-```html	
-<script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.4.0/dist/lazyload.min.js"></script>	
+```html
+<script
+    async
+    src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.5.0/dist/lazyload.min.js"
+></script>
 ```
@@ -234,14 +240,18 @@
 
-```html	
-<script>	
-    // Set the options to make LazyLoad self-initialize	
-    window.lazyLoadOptions = {	
-        elements_selector: ".lazy",	
-        // ... more custom settings?	
+```html
+<script>
+    // Set the options to make LazyLoad self-initialize
+    window.lazyLoadOptions = {
+        elements_selector: ".lazy"
+        // ... more custom settings?
     };
-    // Listen to the initialization event and get the instance of LazyLoad	
-    window.addEventListener('LazyLoad::Initialized', function (event) {	
-        window.lazyLoadInstance = event.detail.instance;	
-    }, false);	
-</script>	
+    // Listen to the initialization event and get the instance of LazyLoad
+    window.addEventListener(
+        "LazyLoad::Initialized",
+        function(event) {
+            window.lazyLoadInstance = event.detail.instance;
+        },
+        false
+    );
+</script>
 ```
@@ -251,4 +261,7 @@
 
-```html	
-<script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.4.0/dist/lazyload.min.js"></script>	
+```html
+<script
+    async
+    src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.5.0/dist/lazyload.min.js"
+></script>
 ```
@@ -266,18 +279,18 @@
 <script>
-// CustomEvent micro-polyfill for Internet Explorer
-(function () {
-    if (typeof window.CustomEvent === "function") {
-        return false;
-    }
+    // CustomEvent micro-polyfill for Internet Explorer
+    (function() {
+        if (typeof window.CustomEvent === "function") {
+            return false;
+        }
 
-    function CustomEvent(event, params) {
-        params = params || {bubbles: false, cancelable: false, detail: undefined};
-        var evt = document.createEvent("CustomEvent");
-        evt.initCustomEvent (event, params.bubbles, params.cancelable, params.detail);
-        return evt;
-    }
+        function CustomEvent(event, params) {
+            params = params || { bubbles: false, cancelable: false, detail: undefined };
+            var evt = document.createEvent("CustomEvent");
+            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+            return evt;
+        }
 
-    CustomEvent.prototype = window.Event.prototype;
-    window.CustomEvent = CustomEvent;
-})();
+        CustomEvent.prototype = window.Event.prototype;
+        window.CustomEvent = CustomEvent;
+    })();
 </script>
@@ -332,6 +345,5 @@ ```
 | `lazyload.iife.min.js` | IIFE <small>(Immediately Invoked Function Expression)</small> | Works as in-page `<script src="...">`, ~0.5kb smaller than UMD version                                                                     |
-| `lazyload.amd.min.js`  | AMD <small>(Asynchronous Module Definition)</small>           | Works with *RequireJS* module loader, ~0.5kb smaller than UMD version                                                                      |
+| `lazyload.amd.min.js`  | AMD <small>(Asynchronous Module Definition)</small>           | Works with _RequireJS_ module loader, ~0.5kb smaller than UMD version                                                                      |
 | `lazyload.esm.js`      | ES Module                                                     | Exports `LazyLoad` so you can import it in your project both using `<script type="module" src="...">` and a bundler like WebPack or Rollup |
 
-
 ## 🥧 Recipes
@@ -347,3 +359,3 @@
 
-*The HTML to use depends on your case, see other recipes' HTML*
+_The HTML to use depends on your case, see other recipes' HTML_
 
@@ -367,3 +379,3 @@ Javascript
 ```html
-<div class="scrollingPanel" id="scrollingPanel"> 
+<div class="scrollingPanel" id="scrollingPanel">
     <!-- Set of images -->
@@ -377,3 +389,3 @@ </div>
 var myLazyLoad = new LazyLoad({
-    container: document.getElementById('scrollingPanel')
+    container: document.getElementById("scrollingPanel")
 });
@@ -384,3 +396,2 @@ ```
 
-
 If you have _multiple_ scrolling panels, you can use the following markup and code.
@@ -403,6 +414,6 @@
 var myLazyLoad1 = new LazyLoad({
-    container: document.getElementById('scrollingPanel1')
+    container: document.getElementById("scrollingPanel1")
 });
 var myLazyLoad2 = new LazyLoad({
-    container: document.getElementById('scrollingPanel2')
+    container: document.getElementById("scrollingPanel2")
 });
@@ -420,5 +431,3 @@ ```
 ```html
-<img class="lazy" alt="A lazy image" 
-     data-src="lazy.jpg"
-     width="220" height="280">
+<img class="lazy" alt="A lazy image" data-src="lazy.jpg" width="220" height="280" />
 ```
@@ -437,3 +446,2 @@
 
-
 ### Lazy LazyLoad
@@ -447,9 +455,25 @@
 <div class="horzContainer">
-    <img src="" alt="Row 01, col 01" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_01&amp;w=200&amp;h=200">
-    <img src="" alt="Row 01, col 02" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_02&amp;w=200&amp;h=200">
+    <img
+        src=""
+        alt="Row 01, col 01"
+        data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_01&amp;w=200&amp;h=200"
+    />
+    <img
+        src=""
+        alt="Row 01, col 02"
+        data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_02&amp;w=200&amp;h=200"
+    />
     <!-- ... -->
 </div>
 <div class="horzContainer">
-    <img src="" alt="Row 02, col 01" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_01&amp;w=200&amp;h=200">
-    <img src="" alt="Row 02, col 02" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_02&amp;w=200&amp;h=200">
+    <img
+        src=""
+        alt="Row 02, col 01"
+        data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_01&amp;w=200&amp;h=200"
+    />
+    <img
+        src=""
+        alt="Row 02, col 02"
+        data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_02&amp;w=200&amp;h=200"
+    />
     <!-- ... -->
@@ -463,3 +487,3 @@ </div>
 var lazyLoadInstances = [];
-// The "lazyLazy" instance of lazyload is used (kinda improperly) 
+// The "lazyLazy" instance of lazyload is used (kinda improperly)
 // to check when the .horzContainer divs enter the viewport
@@ -474,3 +498,3 @@ var lazyLazy = new LazyLoad({
         });
-        // Optionally push it in the lazyLoadInstances 
+        // Optionally push it in the lazyLoadInstances
         // array to keep track of the instances
@@ -537,3 +561,3 @@ lazyLoadInstances.push(oneLL);
 
-There are [many ways to avoid content reflow](https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/). I've [tested three of them](https://github.com/verlok/lazyload_placeholders_test) and found that the fastest is to **avoid using a placeholder at all**, and use the vertical padding trick. 
+There are [many ways to avoid content reflow](https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/). I've [tested three of them](https://github.com/verlok/lazyload_placeholders_test) and found that the fastest is to **avoid using a placeholder at all**, and use the vertical padding trick.
 
@@ -544,3 +568,3 @@ #### Vertical padding trick
 <div class="image-wrapper">
-    <img class="lazy image" alt="An image" data-src="lazy.jpg">
+    <img class="lazy image" alt="An image" data-src="lazy.jpg" />
 </div>
@@ -565,3 +589,2 @@ ```
 
-
 #### Inline SVG
@@ -572,5 +595,7 @@
 ```html
-<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" 
-    data-src="//picsum.photos/900/600" 
-    alt="Lazy loading test image" />
+<img
+    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E"
+    data-src="//picsum.photos/900/600"
+    alt="Lazy loading test image"
+/>
 ```
@@ -604,4 +629,4 @@
 ```js
-var aLazyLoad = new LazyLoad({ 
-    /* options here */ 
+var aLazyLoad = new LazyLoad({
+    /* options here */
 });
@@ -614,5 +639,8 @@ ```
 var elementsToLazyLoad = getElementSetFromSomewhere();
-var aLazyLoad = new LazyLoad({ 
-    /* options here */ 
-}, elementsToLazyLoad);
+var aLazyLoad = new LazyLoad(
+    {
+        /* options here */
+    },
+    elementsToLazyLoad
+);
 ```
@@ -661,2 +689,10 @@
 
+### Properties
+
+You can use the following properties on any instance of LazyLoad.
+
+| 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. |
+
 ---
@@ -688,4 +724,4 @@
 
-Legacy browsers support is from IE 9 up. This script is tested in every browser before every release using [BrowserStack](http://browserstack.com/) live, thanks to the BrowserStack Open Source initiative. 
+Legacy browsers support is from IE 9 up. This script is tested in every browser before every release using [BrowserStack](http://browserstack.com/) live, thanks to the BrowserStack Open Source initiative.
 
 <a href="http://browserstack.com/"><img alt="BrowserStack Logo" src="./img/browserstack-logo-600x315.png"  width="300" height="158"/></a>

typings/lazyload.d.ts

 interface ILazyLoadOptions {
-	elements_selector?: string;
-	container?: HTMLElement;
-	threshold?: number;
-	thresholds?: string;
-	data_src?: string;
-	data_srcset?: string;
-	data_sizes?: string;
-	data_bg?: string;
-	class_loading?: string;
-	class_loaded?: string;
-	class_error?: string;
-	load_delay?: number;
-	callback_enter?: (elt: HTMLElement) => void;
-	callback_exit?: (elt: HTMLElement) => void;
-	callback_reveal?: (elt: HTMLElement) => void;
-	callback_loaded?: (elt: HTMLElement) => void;
-	callback_error?: (elt: HTMLElement) => void;
-	callback_finish?: () => void;
-	use_native?: boolean;
+    elements_selector?: string;
+    container?: HTMLElement;
+    threshold?: number;
+    thresholds?: string;
+    data_src?: string;
+    data_srcset?: string;
+    data_sizes?: string;
+    data_bg?: string;
+    class_loading?: string;
+    class_loaded?: string;
+    class_error?: string;
+    load_delay?: number;
+    auto_unobserve?: boolean;
+    callback_enter?: (elt: HTMLElement) => void;
+    callback_exit?: (elt: HTMLElement) => void;
+    callback_reveal?: (elt: HTMLElement) => void;
+    callback_loaded?: (elt: HTMLElement) => void;
+    callback_error?: (elt: HTMLElement) => void;
+    callback_finish?: () => void;
+    use_native?: boolean;
 }
 interface ILazyLoad {
-	new (options?: ILazyLoadOptions, elements?: NodeListOf<HTMLElement>): ILazyLoad;
-	update: (elements?: NodeListOf<HTMLElement>) => void;
-	destroy: () => void;
-	load: (element: HTMLElement, force?: boolean) => void;
-	loadAll: () => void;
+    new (options?: ILazyLoadOptions, elements?: NodeListOf<HTMLElement>): ILazyLoad;
+    update: (elements?: NodeListOf<HTMLElement>) => void;
+    destroy: () => void;
+    load: (element: HTMLElement, force?: boolean) => void;
+    loadAll: () => void;
+    loadingCount: number;
 }
 declare var LazyLoad: ILazyLoad;
 export default LazyLoad;

Fixed alerts

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

224588

increased by1.4%

Lines of code

1809

increased by0.11%

Number of lines in readme file

693

increased by5.48%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

15

decreased by-6.25%

No dependency changes