vanilla-lazyload - npm Package Compare versions

Comparing version 11.0.6 to 12.0.0-beta.0

CHANGELOG.md

 # CHANGELOG
 
+## Version 12
+
+### 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
+
 ## Version 11
@@ -34,13 +44,19 @@
 - Ceased support and development of LazyLoad v.8 (see issue #306)
-- Callbacks renewal :: **POSSIBLE BREAKING CHANGE**
-  - Callback `callback_enter` has **changed** its meaning! It is now called whenever an element enters the viewport, even if `load_delay` is set
-  - Callback `callback_exit` (**new**) is called whenever an element exits the viewport, even if `load_delay` is set
-  - Callback `callback_reveal` (**new**) is called when an element is about to be revealed, and its attribute values were copied from the `data-` attributes to the actual ones.
-  - Callback `callback_set` is now **deprecated**. Use `callback_reveal` instead.
-- Private methods like `_setObserver`, `_onIntersection` etc. are now hidden and protected.
-- Added the `auto_unobserve` boolean option.
+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.
+- **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 
+
+\* it didn't work from versions 11.0.0 to 11.0.5, it still works from 11.0.6.
+
 ## Version 10
@@ -47,0 +63,0 @@

dist/lazyload.amd.js

@@ -29,3 +29,4 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
     callback_error: null,
-    callback_finish: null
+    callback_finish: null,
+    use_native: false
   };
@@ -398,6 +399,36 @@
 
+  var nativeLazyTags = ["IMG", "IFRAME"];
+
+  var shouldUseNative = function shouldUseNative(settings) {
+    return settings.use_native && "loading" in HTMLImageElement.prototype;
+  };
+
+  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 nodeSetToArray = function nodeSetToArray(nodeSet) {
+    return Array.prototype.slice.call(nodeSet);
+  };
+
+  var queryElements = function queryElements(settings) {
+    return settings.container.querySelectorAll(settings.elements_selector);
+  };
+
+  var getElements = function getElements(elements, settings) {
+    return purgeProcessedElements(nodeSetToArray(elements || queryElements(settings)));
+  };
+
   var LazyLoad = function LazyLoad(customSettings, elements) {
     this._settings = getInstanceSettings(customSettings);
     this._loadingCount = 0;
-    setObserver(this);
+    setObserver(this); // Still useful for elements other than IMG and IFRAME
+
     this.update(elements);
@@ -411,8 +442,4 @@ };
       var settings = this._settings;
+      this._elements = getElements(elements, settings);
 
-      var _elements = elements || settings.container.querySelectorAll(settings.elements_selector);
-
-      this._elements = purgeProcessedElements(Array.prototype.slice.call(_elements) // NOTE: nodeset to array for IE compatibility
-      );
-
       if (isBot || !this._observer) {
@@ -423,2 +450,7 @@ this.loadAll();
 
+      if (shouldUseNative(settings)) {
+        loadAllNative(this);
+        this._elements = getElements(elements, settings);
+      }
+
       this._elements.forEach(function (element) {
@@ -448,4 +480,3 @@ _this._observer.observe(element);
 
-      var elements = this._elements;
-      elements.forEach(function (element) {
+      this._elements.forEach(function (element) {
         revealAndUnobserve(element, _this3);
@@ -452,0 +483,0 @@ });

dist/lazyload.amd.min.js

@@ -1,2 +0,2 @@
-function _extends(){return(_extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(t[a]=n[a])}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,a=t&&"classList"in document.createElement("p"),r={elements_selector:"img",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",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},s=function(t,e){return t.getAttribute("data-"+e)},o=function(t,e,n){var a="data-"+e;null!==n?t.setAttribute(a,n):t.removeAttribute(a)},i=function(t){return"true"===s(t,"was-processed")},c=function(t,e){return o(t,"ll-timeout",e)},l=function(t){return s(t,"ll-timeout")},u=function(t,e){var n,a=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:a}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:a})}window.dispatchEvent(n)};var d=function(t,e){t&&t(e)},f=function(t,e){t._loadingCount+=e,0===t._elements.length&&0===t._loadingCount&&d(t._settings.callback_finish)},_=function(t){for(var e,n=[],a=0;e=t.children[a];a+=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",s(t,e.data_sizes)),v(t,"srcset",s(t,e.data_srcset)),v(t,"src",s(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",s(t,e.data_src))},VIDEO:function(t,e){_(t).forEach(function(t){v(t,"src",s(t,e.data_src))}),v(t,"src",s(t,e.data_src)),t.load()}},b=function(t,e){var n,a,r=e._settings,o=t.tagName,i=h[o];if(i)return i(t,r),f(e,1),void(e._elements=(n=e._elements,a=t,n.filter(function(t){return t!==a})));!function(t,e){var n=s(t,e.data_src),a=s(t,e.data_bg);n&&(t.style.backgroundImage='url("'.concat(n,'")')),a&&(t.style.backgroundImage=a)}(t,r)},m=function(t,e){a?t.classList.add(e):t.className+=(t.className?" ":"")+e},p=function(t,e,n){t.addEventListener(e,n)},E=function(t,e,n){t.removeEventListener(e,n)},y=function(t,e,n){E(t,"load",e),E(t,"loadeddata",e),E(t,"error",n)},w=function(t,e,n){var r=n._settings,s=e?r.class_loaded:r.class_error,o=e?r.callback_loaded:r.callback_error,i=t.target;!function(t,e){a?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}(i,r.class_loading),m(i,s),d(o,i),f(n,-1)},k=function(t,e){var n=function n(r){w(r,!0,e),y(t,n,a)},a=function a(r){w(r,!1,e),y(t,n,a)};!function(t,e,n){p(t,"load",e),p(t,"loadeddata",e),p(t,"error",n)}(t,n,a)},I=["IMG","IFRAME","VIDEO"],A=function(t,e){var n=e._observer;z(t,e),n&&e._settings.auto_unobserve&&n.unobserve(t)},L=function(t){var e=l(t);e&&(clearTimeout(e),c(t,null))},O=function(t,e){var n=e._settings.load_delay,a=l(t);a||(a=setTimeout(function(){A(t,e),L(t)},n),c(t,a))},z=function(t,e,n){var a=e._settings;!n&&i(t)||(I.indexOf(t.tagName)>-1&&(k(t,e),m(t,a.class_loading)),b(t,e),function(t){o(t,"was-processed","true")}(t),d(a.callback_reveal,t),d(a.callback_set,t))},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){var n=e._settings;d(n.callback_enter,t),n.load_delay?O(t,e):A(t,e)}(e.target,t):function(t,e){var n=e._settings;d(n.callback_exit,t),n.load_delay&&L(t)}(e.target,t)})},{root:(e=t._settings).container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}),!0);var e},x=function(t,e){this._settings=function(t){return _extends({},r,t)}(t),this._loadingCount=0,N(this),this.update(e)};return x.prototype={update:function(t){var n=this,a=this._settings,r=t||a.container.querySelectorAll(a.elements_selector);this._elements=function(t){return t.filter(function(t){return!i(t)})}(Array.prototype.slice.call(r)),!e&&this._observer?this._elements.forEach(function(t){n._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){A(e,t)})}},t&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)u(t,n);else u(t,e)}(x,window.lazyLoadOptions),x});
+function _extends(){return(_extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(t[a]=n[a])}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,a=t&&"classList"in document.createElement("p"),r={elements_selector:"img",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",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){return t.getAttribute("data-"+e)},o=function(t,e,n){var a="data-"+e;null!==n?t.setAttribute(a,n):t.removeAttribute(a)},i=function(t){return"true"===s(t,"was-processed")},c=function(t,e){return o(t,"ll-timeout",e)},l=function(t){return s(t,"ll-timeout")},u=function(t,e){var n,a=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:a}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:a})}window.dispatchEvent(n)};var d=function(t,e){t&&t(e)},f=function(t,e){t._loadingCount+=e,0===t._elements.length&&0===t._loadingCount&&d(t._settings.callback_finish)},_=function(t){for(var e,n=[],a=0;e=t.children[a];a+=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",s(t,e.data_sizes)),v(t,"srcset",s(t,e.data_srcset)),v(t,"src",s(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",s(t,e.data_src))},VIDEO:function(t,e){_(t).forEach(function(t){v(t,"src",s(t,e.data_src))}),v(t,"src",s(t,e.data_src)),t.load()}},m=function(t,e){var n,a,r=e._settings,o=t.tagName,i=h[o];if(i)return i(t,r),f(e,1),void(e._elements=(n=e._elements,a=t,n.filter(function(t){return t!==a})));!function(t,e){var n=s(t,e.data_src),a=s(t,e.data_bg);n&&(t.style.backgroundImage='url("'.concat(n,'")')),a&&(t.style.backgroundImage=a)}(t,r)},b=function(t,e){a?t.classList.add(e):t.className+=(t.className?" ":"")+e},p=function(t,e,n){t.addEventListener(e,n)},E=function(t,e,n){t.removeEventListener(e,n)},y=function(t,e,n){E(t,"load",e),E(t,"loadeddata",e),E(t,"error",n)},w=function(t,e,n){var r=n._settings,s=e?r.class_loaded:r.class_error,o=e?r.callback_loaded:r.callback_error,i=t.target;!function(t,e){a?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}(i,r.class_loading),b(i,s),d(o,i),f(n,-1)},I=function(t,e){var n=function n(r){w(r,!0,e),y(t,n,a)},a=function a(r){w(r,!1,e),y(t,n,a)};!function(t,e,n){p(t,"load",e),p(t,"loadeddata",e),p(t,"error",n)}(t,n,a)},k=["IMG","IFRAME","VIDEO"],A=function(t,e){var n=e._observer;z(t,e),n&&e._settings.auto_unobserve&&n.unobserve(t)},L=function(t){var e=l(t);e&&(clearTimeout(e),c(t,null))},O=function(t,e){var n=e._settings.load_delay,a=l(t);a||(a=setTimeout(function(){A(t,e),L(t)},n),c(t,a))},z=function(t,e,n){var a=e._settings;!n&&i(t)||(k.indexOf(t.tagName)>-1&&(I(t,e),b(t,a.class_loading)),m(t,e),function(t){o(t,"was-processed","true")}(t),d(a.callback_reveal,t),d(a.callback_set,t))},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){var n=e._settings;d(n.callback_enter,t),n.load_delay?O(t,e):A(t,e)}(e.target,t):function(t,e){var n=e._settings;d(n.callback_exit,t),n.load_delay&&L(t)}(e.target,t)})},{root:(e=t._settings).container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}),!0);var e},x=["IMG","IFRAME"],C=function(t,e){return function(t){return t.filter(function(t){return!i(t)})}((n=t||function(t){return t.container.querySelectorAll(t.elements_selector)}(e),Array.prototype.slice.call(n)));var n},M=function(t,e){this._settings=function(t){return _extends({},r,t)}(t),this._loadingCount=0,N(this),this.update(e)};return M.prototype={update:function(t){var n,a=this,r=this._settings;(this._elements=C(t,r),!e&&this._observer)?(function(t){return t.use_native&&"loading"in HTMLImageElement.prototype}(r)&&((n=this)._elements.forEach(function(t){-1!==x.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),z(t,n))}),this._elements=C(t,r)),this._elements.forEach(function(t){a._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){A(e,t)})}},t&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)u(t,n);else u(t,e)}(M,window.lazyLoadOptions),M});
 //# sourceMappingURL=lazyload.amd.min.js.map

dist/lazyload.esm.js

@@ -33,3 +33,4 @@ const runningOnBrowser = typeof window !== "undefined";
 	callback_error: null,
-	callback_finish: null
+	callback_finish: null,
+	use_native: false
 };
@@ -375,6 +376,29 @@
 
+const nativeLazyTags = ["IMG", "IFRAME"];
+
+const shouldUseNative = settings =>
+	settings.use_native && "loading" in HTMLImageElement.prototype;
+
+const loadAllNative = instance => {
+	instance._elements.forEach(element => {
+		if (nativeLazyTags.indexOf(element.tagName) === -1) {
+			return;
+		}
+		element.setAttribute("loading", "lazy");
+		revealElement(element, instance);
+	});
+};
+
+const nodeSetToArray = nodeSet => Array.prototype.slice.call(nodeSet);
+
+const queryElements = settings =>
+	settings.container.querySelectorAll(settings.elements_selector);
+
+const getElements = (elements, settings) =>
+	purgeProcessedElements(nodeSetToArray(elements || queryElements(settings)));
+
 const LazyLoad = function(customSettings, elements) {
 	this._settings = getInstanceSettings(customSettings);
 	this._loadingCount = 0;
-	setObserver(this);
+	setObserver(this); // Still useful for elements other than IMG and IFRAME
 	this.update(elements);
@@ -385,11 +409,4 @@ };
 	update: function(elements) {
-		const settings = this._settings;
-		const _elements =
-			elements ||
-			settings.container.querySelectorAll(settings.elements_selector);
-
-		this._elements = purgeProcessedElements(
-			Array.prototype.slice.call(_elements) // NOTE: nodeset to array for IE compatibility
-		);
-
+		var settings = this._settings;
+		this._elements = getElements(elements, settings);
 		if (isBot || !this._observer) {
@@ -399,3 +416,6 @@ this.loadAll();
 		}
-
+		if (shouldUseNative(settings)) {
+			loadAllNative(this);
+			this._elements = getElements(elements, settings);
+		}
 		this._elements.forEach(element => {
@@ -422,4 +442,3 @@ this._observer.observe(element);
 	loadAll: function() {
-		var elements = this._elements;
-		elements.forEach(element => {
+		this._elements.forEach(element => {
 			revealAndUnobserve(element, this);
@@ -426,0 +445,0 @@ });

dist/lazyload.iife.js

@@ -29,3 +29,4 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
     callback_error: null,
-    callback_finish: null
+    callback_finish: null,
+    use_native: false
   };
@@ -398,6 +399,36 @@
 
+  var nativeLazyTags = ["IMG", "IFRAME"];
+
+  var shouldUseNative = function shouldUseNative(settings) {
+    return settings.use_native && "loading" in HTMLImageElement.prototype;
+  };
+
+  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 nodeSetToArray = function nodeSetToArray(nodeSet) {
+    return Array.prototype.slice.call(nodeSet);
+  };
+
+  var queryElements = function queryElements(settings) {
+    return settings.container.querySelectorAll(settings.elements_selector);
+  };
+
+  var getElements = function getElements(elements, settings) {
+    return purgeProcessedElements(nodeSetToArray(elements || queryElements(settings)));
+  };
+
   var LazyLoad = function LazyLoad(customSettings, elements) {
     this._settings = getInstanceSettings(customSettings);
     this._loadingCount = 0;
-    setObserver(this);
+    setObserver(this); // Still useful for elements other than IMG and IFRAME
+
     this.update(elements);
@@ -411,8 +442,4 @@ };
       var settings = this._settings;
+      this._elements = getElements(elements, settings);
 
-      var _elements = elements || settings.container.querySelectorAll(settings.elements_selector);
-
-      this._elements = purgeProcessedElements(Array.prototype.slice.call(_elements) // NOTE: nodeset to array for IE compatibility
-      );
-
       if (isBot || !this._observer) {
@@ -423,2 +450,7 @@ this.loadAll();
 
+      if (shouldUseNative(settings)) {
+        loadAllNative(this);
+        this._elements = getElements(elements, settings);
+      }
+
       this._elements.forEach(function (element) {
@@ -448,4 +480,3 @@ _this._observer.observe(element);
 
-      var elements = this._elements;
-      elements.forEach(function (element) {
+      this._elements.forEach(function (element) {
         revealAndUnobserve(element, _this3);
@@ -452,0 +483,0 @@ });

dist/lazyload.iife.min.js

@@ -1,2 +0,2 @@
-function _extends(){return(_extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(t[a]=n[a])}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,a=t&&"classList"in document.createElement("p"),r={elements_selector:"img",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",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},s=function(t,e){return t.getAttribute("data-"+e)},o=function(t,e,n){var a="data-"+e;null!==n?t.setAttribute(a,n):t.removeAttribute(a)},i=function(t){return"true"===s(t,"was-processed")},c=function(t,e){return o(t,"ll-timeout",e)},l=function(t){return s(t,"ll-timeout")},u=function(t,e){var n,a=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:a}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:a})}window.dispatchEvent(n)};var d=function(t,e){t&&t(e)},f=function(t,e){t._loadingCount+=e,0===t._elements.length&&0===t._loadingCount&&d(t._settings.callback_finish)},_=function(t){for(var e,n=[],a=0;e=t.children[a];a+=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",s(t,e.data_sizes)),v(t,"srcset",s(t,e.data_srcset)),v(t,"src",s(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",s(t,e.data_src))},VIDEO:function(t,e){_(t).forEach(function(t){v(t,"src",s(t,e.data_src))}),v(t,"src",s(t,e.data_src)),t.load()}},b=function(t,e){var n,a,r=e._settings,o=t.tagName,i=h[o];if(i)return i(t,r),f(e,1),void(e._elements=(n=e._elements,a=t,n.filter(function(t){return t!==a})));!function(t,e){var n=s(t,e.data_src),a=s(t,e.data_bg);n&&(t.style.backgroundImage='url("'.concat(n,'")')),a&&(t.style.backgroundImage=a)}(t,r)},m=function(t,e){a?t.classList.add(e):t.className+=(t.className?" ":"")+e},p=function(t,e,n){t.addEventListener(e,n)},y=function(t,e,n){t.removeEventListener(e,n)},E=function(t,e,n){y(t,"load",e),y(t,"loadeddata",e),y(t,"error",n)},w=function(t,e,n){var r=n._settings,s=e?r.class_loaded:r.class_error,o=e?r.callback_loaded:r.callback_error,i=t.target;!function(t,e){a?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}(i,r.class_loading),m(i,s),d(o,i),f(n,-1)},k=function(t,e){var n=function n(r){w(r,!0,e),E(t,n,a)},a=function a(r){w(r,!1,e),E(t,n,a)};!function(t,e,n){p(t,"load",e),p(t,"loadeddata",e),p(t,"error",n)}(t,n,a)},I=["IMG","IFRAME","VIDEO"],L=function(t,e){var n=e._observer;O(t,e),n&&e._settings.auto_unobserve&&n.unobserve(t)},A=function(t){var e=l(t);e&&(clearTimeout(e),c(t,null))},z=function(t,e){var n=e._settings.load_delay,a=l(t);a||(a=setTimeout(function(){L(t,e),A(t)},n),c(t,a))},O=function(t,e,n){var a=e._settings;!n&&i(t)||(I.indexOf(t.tagName)>-1&&(k(t,e),m(t,a.class_loading)),b(t,e),function(t){o(t,"was-processed","true")}(t),d(a.callback_reveal,t),d(a.callback_set,t))},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){var n=e._settings;d(n.callback_enter,t),n.load_delay?z(t,e):L(t,e)}(e.target,t):function(t,e){var n=e._settings;d(n.callback_exit,t),n.load_delay&&A(t)}(e.target,t)})},{root:(e=t._settings).container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}),!0);var e},x=function(t,e){this._settings=function(t){return _extends({},r,t)}(t),this._loadingCount=0,N(this),this.update(e)};return x.prototype={update:function(t){var n=this,a=this._settings,r=t||a.container.querySelectorAll(a.elements_selector);this._elements=function(t){return t.filter(function(t){return!i(t)})}(Array.prototype.slice.call(r)),!e&&this._observer?this._elements.forEach(function(t){n._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)})}},t&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)u(t,n);else u(t,e)}(x,window.lazyLoadOptions),x}();
+function _extends(){return(_extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(t[a]=n[a])}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,a=t&&"classList"in document.createElement("p"),r={elements_selector:"img",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",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){return t.getAttribute("data-"+e)},s=function(t,e,n){var a="data-"+e;null!==n?t.setAttribute(a,n):t.removeAttribute(a)},i=function(t){return"true"===o(t,"was-processed")},c=function(t,e){return s(t,"ll-timeout",e)},l=function(t){return o(t,"ll-timeout")},u=function(t,e){var n,a=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:a}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:a})}window.dispatchEvent(n)};var d=function(t,e){t&&t(e)},f=function(t,e){t._loadingCount+=e,0===t._elements.length&&0===t._loadingCount&&d(t._settings.callback_finish)},_=function(t){for(var e,n=[],a=0;e=t.children[a];a+=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",o(t,e.data_sizes)),v(t,"srcset",o(t,e.data_srcset)),v(t,"src",o(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",o(t,e.data_src))},VIDEO:function(t,e){_(t).forEach(function(t){v(t,"src",o(t,e.data_src))}),v(t,"src",o(t,e.data_src)),t.load()}},m=function(t,e){var n,a,r=e._settings,s=t.tagName,i=h[s];if(i)return i(t,r),f(e,1),void(e._elements=(n=e._elements,a=t,n.filter(function(t){return t!==a})));!function(t,e){var n=o(t,e.data_src),a=o(t,e.data_bg);n&&(t.style.backgroundImage='url("'.concat(n,'")')),a&&(t.style.backgroundImage=a)}(t,r)},b=function(t,e){a?t.classList.add(e):t.className+=(t.className?" ":"")+e},p=function(t,e,n){t.addEventListener(e,n)},E=function(t,e,n){t.removeEventListener(e,n)},y=function(t,e,n){E(t,"load",e),E(t,"loadeddata",e),E(t,"error",n)},w=function(t,e,n){var r=n._settings,o=e?r.class_loaded:r.class_error,s=e?r.callback_loaded:r.callback_error,i=t.target;!function(t,e){a?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}(i,r.class_loading),b(i,o),d(s,i),f(n,-1)},I=function(t,e){var n=function n(r){w(r,!0,e),y(t,n,a)},a=function a(r){w(r,!1,e),y(t,n,a)};!function(t,e,n){p(t,"load",e),p(t,"loadeddata",e),p(t,"error",n)}(t,n,a)},k=["IMG","IFRAME","VIDEO"],A=function(t,e){var n=e._observer;O(t,e),n&&e._settings.auto_unobserve&&n.unobserve(t)},L=function(t){var e=l(t);e&&(clearTimeout(e),c(t,null))},z=function(t,e){var n=e._settings.load_delay,a=l(t);a||(a=setTimeout(function(){A(t,e),L(t)},n),c(t,a))},O=function(t,e,n){var a=e._settings;!n&&i(t)||(k.indexOf(t.tagName)>-1&&(I(t,e),b(t,a.class_loading)),m(t,e),function(t){s(t,"was-processed","true")}(t),d(a.callback_reveal,t),d(a.callback_set,t))},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){var n=e._settings;d(n.callback_enter,t),n.load_delay?z(t,e):A(t,e)}(e.target,t):function(t,e){var n=e._settings;d(n.callback_exit,t),n.load_delay&&L(t)}(e.target,t)})},{root:(e=t._settings).container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}),!0);var e},x=["IMG","IFRAME"],C=function(t,e){return function(t){return t.filter(function(t){return!i(t)})}((n=t||function(t){return t.container.querySelectorAll(t.elements_selector)}(e),Array.prototype.slice.call(n)));var n},M=function(t,e){this._settings=function(t){return _extends({},r,t)}(t),this._loadingCount=0,N(this),this.update(e)};return M.prototype={update:function(t){var n,a=this,r=this._settings;(this._elements=C(t,r),!e&&this._observer)?(function(t){return t.use_native&&"loading"in HTMLImageElement.prototype}(r)&&((n=this)._elements.forEach(function(t){-1!==x.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),O(t,n))}),this._elements=C(t,r)),this._elements.forEach(function(t){a._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){A(e,t)})}},t&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)u(t,n);else u(t,e)}(M,window.lazyLoadOptions),M}();
 //# sourceMappingURL=lazyload.iife.min.js.map

dist/lazyload.js

@@ -33,3 +33,4 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
     callback_error: null,
-    callback_finish: null
+    callback_finish: null,
+    use_native: false
   };
@@ -402,6 +403,36 @@
 
+  var nativeLazyTags = ["IMG", "IFRAME"];
+
+  var shouldUseNative = function shouldUseNative(settings) {
+    return settings.use_native && "loading" in HTMLImageElement.prototype;
+  };
+
+  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 nodeSetToArray = function nodeSetToArray(nodeSet) {
+    return Array.prototype.slice.call(nodeSet);
+  };
+
+  var queryElements = function queryElements(settings) {
+    return settings.container.querySelectorAll(settings.elements_selector);
+  };
+
+  var getElements = function getElements(elements, settings) {
+    return purgeProcessedElements(nodeSetToArray(elements || queryElements(settings)));
+  };
+
   var LazyLoad = function LazyLoad(customSettings, elements) {
     this._settings = getInstanceSettings(customSettings);
     this._loadingCount = 0;
-    setObserver(this);
+    setObserver(this); // Still useful for elements other than IMG and IFRAME
+
     this.update(elements);
@@ -415,8 +446,4 @@ };
       var settings = this._settings;
+      this._elements = getElements(elements, settings);
 
-      var _elements = elements || settings.container.querySelectorAll(settings.elements_selector);
-
-      this._elements = purgeProcessedElements(Array.prototype.slice.call(_elements) // NOTE: nodeset to array for IE compatibility
-      );
-
       if (isBot || !this._observer) {
@@ -427,2 +454,7 @@ this.loadAll();
 
+      if (shouldUseNative(settings)) {
+        loadAllNative(this);
+        this._elements = getElements(elements, settings);
+      }
+
       this._elements.forEach(function (element) {
@@ -452,4 +484,3 @@ _this._observer.observe(element);
 
-      var elements = this._elements;
-      elements.forEach(function (element) {
+      this._elements.forEach(function (element) {
         revealAndUnobserve(element, _this3);
@@ -456,0 +487,0 @@ });

dist/lazyload.min.js

@@ -1,2 +0,2 @@
-function _extends(){return(_extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}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,o=t&&"classList"in document.createElement("p"),r={elements_selector:"img",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",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},a=function(t,e){return t.getAttribute("data-"+e)},s=function(t,e,n){var o="data-"+e;null!==n?t.setAttribute(o,n):t.removeAttribute(o)},i=function(t){return"true"===a(t,"was-processed")},c=function(t,e){return s(t,"ll-timeout",e)},l=function(t){return a(t,"ll-timeout")},u=function(t,e){var n,o=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:o}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:o})}window.dispatchEvent(n)};var d=function(t,e){t&&t(e)},f=function(t,e){t._loadingCount+=e,0===t._elements.length&&0===t._loadingCount&&d(t._settings.callback_finish)},_=function(t){for(var e,n=[],o=0;e=t.children[o];o+=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",a(t,e.data_sizes)),v(t,"srcset",a(t,e.data_srcset)),v(t,"src",a(t,e.data_src))},g={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",a(t,e.data_src))},VIDEO:function(t,e){_(t).forEach(function(t){v(t,"src",a(t,e.data_src))}),v(t,"src",a(t,e.data_src)),t.load()}},m=function(t,e){var n,o,r=e._settings,s=t.tagName,i=g[s];if(i)return i(t,r),f(e,1),void(e._elements=(n=e._elements,o=t,n.filter(function(t){return t!==o})));!function(t,e){var n=a(t,e.data_src),o=a(t,e.data_bg);n&&(t.style.backgroundImage='url("'.concat(n,'")')),o&&(t.style.backgroundImage=o)}(t,r)},h=function(t,e){o?t.classList.add(e):t.className+=(t.className?" ":"")+e},p=function(t,e,n){t.addEventListener(e,n)},y=function(t,e,n){t.removeEventListener(e,n)},E=function(t,e,n){y(t,"load",e),y(t,"loadeddata",e),y(t,"error",n)},w=function(t,e,n){var r=n._settings,a=e?r.class_loaded:r.class_error,s=e?r.callback_loaded:r.callback_error,i=t.target;!function(t,e){o?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}(i,r.class_loading),h(i,a),d(s,i),f(n,-1)},k=function(t,e){var n=function n(r){w(r,!0,e),E(t,n,o)},o=function o(r){w(r,!1,e),E(t,n,o)};!function(t,e,n){p(t,"load",e),p(t,"loadeddata",e),p(t,"error",n)}(t,n,o)},I=["IMG","IFRAME","VIDEO"],L=function(t,e){var n=e._observer;z(t,e),n&&e._settings.auto_unobserve&&n.unobserve(t)},x=function(t){var e=l(t);e&&(clearTimeout(e),c(t,null))},A=function(t,e){var n=e._settings.load_delay,o=l(t);o||(o=setTimeout(function(){L(t,e),x(t)},n),c(t,o))},z=function(t,e,n){var o=e._settings;!n&&i(t)||(I.indexOf(t.tagName)>-1&&(k(t,e),h(t,o.class_loading)),m(t,e),function(t){s(t,"was-processed","true")}(t),d(o.callback_reveal,t),d(o.callback_set,t))},O=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){var n=e._settings;d(n.callback_enter,t),n.load_delay?A(t,e):L(t,e)}(e.target,t):function(t,e){var n=e._settings;d(n.callback_exit,t),n.load_delay&&x(t)}(e.target,t)})},{root:(e=t._settings).container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}),!0);var e},N=function(t,e){this._settings=function(t){return _extends({},r,t)}(t),this._loadingCount=0,O(this),this.update(e)};return N.prototype={update:function(t){var n=this,o=this._settings,r=t||o.container.querySelectorAll(o.elements_selector);this._elements=function(t){return t.filter(function(t){return!i(t)})}(Array.prototype.slice.call(r)),!e&&this._observer?this._elements.forEach(function(t){n._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)})}},t&&function(t,e){if(e)if(e.length)for(var n,o=0;n=e[o];o+=1)u(t,n);else u(t,e)}(N,window.lazyLoadOptions),N});
+function _extends(){return(_extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}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,o=t&&"classList"in document.createElement("p"),r={elements_selector:"img",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",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){return t.getAttribute("data-"+e)},i=function(t,e,n){var o="data-"+e;null!==n?t.setAttribute(o,n):t.removeAttribute(o)},s=function(t){return"true"===a(t,"was-processed")},c=function(t,e){return i(t,"ll-timeout",e)},l=function(t){return a(t,"ll-timeout")},u=function(t,e){var n,o=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:o}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:o})}window.dispatchEvent(n)};var d=function(t,e){t&&t(e)},f=function(t,e){t._loadingCount+=e,0===t._elements.length&&0===t._loadingCount&&d(t._settings.callback_finish)},_=function(t){for(var e,n=[],o=0;e=t.children[o];o+=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",a(t,e.data_sizes)),v(t,"srcset",a(t,e.data_srcset)),v(t,"src",a(t,e.data_src))},m={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",a(t,e.data_src))},VIDEO:function(t,e){_(t).forEach(function(t){v(t,"src",a(t,e.data_src))}),v(t,"src",a(t,e.data_src)),t.load()}},b=function(t,e){var n,o,r=e._settings,i=t.tagName,s=m[i];if(s)return s(t,r),f(e,1),void(e._elements=(n=e._elements,o=t,n.filter(function(t){return t!==o})));!function(t,e){var n=a(t,e.data_src),o=a(t,e.data_bg);n&&(t.style.backgroundImage='url("'.concat(n,'")')),o&&(t.style.backgroundImage=o)}(t,r)},h=function(t,e){o?t.classList.add(e):t.className+=(t.className?" ":"")+e},p=function(t,e,n){t.addEventListener(e,n)},y=function(t,e,n){t.removeEventListener(e,n)},E=function(t,e,n){y(t,"load",e),y(t,"loadeddata",e),y(t,"error",n)},w=function(t,e,n){var r=n._settings,a=e?r.class_loaded:r.class_error,i=e?r.callback_loaded:r.callback_error,s=t.target;!function(t,e){o?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}(s,r.class_loading),h(s,a),d(i,s),f(n,-1)},I=function(t,e){var n=function n(r){w(r,!0,e),E(t,n,o)},o=function o(r){w(r,!1,e),E(t,n,o)};!function(t,e,n){p(t,"load",e),p(t,"loadeddata",e),p(t,"error",n)}(t,n,o)},k=["IMG","IFRAME","VIDEO"],A=function(t,e){var n=e._observer;z(t,e),n&&e._settings.auto_unobserve&&n.unobserve(t)},L=function(t){var e=l(t);e&&(clearTimeout(e),c(t,null))},x=function(t,e){var n=e._settings.load_delay,o=l(t);o||(o=setTimeout(function(){A(t,e),L(t)},n),c(t,o))},z=function(t,e,n){var o=e._settings;!n&&s(t)||(k.indexOf(t.tagName)>-1&&(I(t,e),h(t,o.class_loading)),b(t,e),function(t){i(t,"was-processed","true")}(t),d(o.callback_reveal,t),d(o.callback_set,t))},O=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){var n=e._settings;d(n.callback_enter,t),n.load_delay?x(t,e):A(t,e)}(e.target,t):function(t,e){var n=e._settings;d(n.callback_exit,t),n.load_delay&&L(t)}(e.target,t)})},{root:(e=t._settings).container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}),!0);var e},N=["IMG","IFRAME"],C=function(t,e){return function(t){return t.filter(function(t){return!s(t)})}((n=t||function(t){return t.container.querySelectorAll(t.elements_selector)}(e),Array.prototype.slice.call(n)));var n},M=function(t,e){this._settings=function(t){return _extends({},r,t)}(t),this._loadingCount=0,O(this),this.update(e)};return M.prototype={update:function(t){var n,o=this,r=this._settings;(this._elements=C(t,r),!e&&this._observer)?(function(t){return t.use_native&&"loading"in HTMLImageElement.prototype}(r)&&((n=this)._elements.forEach(function(t){-1!==N.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),z(t,n))}),this._elements=C(t,r)),this._elements.forEach(function(t){o._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){A(e,t)})}},t&&function(t,e){if(e)if(e.length)for(var n,o=0;n=e[o];o+=1)u(t,n);else u(t,e)}(M,window.lazyLoadOptions),M});
 //# sourceMappingURL=lazyload.min.js.map

package.json

 {
 	"name": "vanilla-lazyload",
-	"version": "11.0.6",
+	"version": "12.0.0-beta.0",
 	"description": "A fast, lightweight script to load images as they enter the viewport. SEO friendly, it supports responsive images (both srcset + sizes and picture) and progressive JPEG",
@@ -5,0 +5,0 @@ "main": "dist/lazyload.min.js",

README.md

@@ -56,3 +56,3 @@ LazyLoad is a fast, lightweight and flexible script that _speeds up your web application_ by **loading your content images, video, iframes as they enter the viewport**. It's written in plain "vanilla" JavaScript, it uses the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API, and it supports [responsive images](https://alistapart.com/article/responsive-images-in-practice). It's also SEO-friendly and it has some other [notable features](#-notable-features).
     <source type="image/webp" 
-        data-srcset="lazy_400.jpg 400w, lazy_800.jpg 800w" 
+        data-srcset="lazy_400.webp 400w, lazy_800.webp 800w" 
         data-sizes="100w">
@@ -468,32 +468,34 @@ <img alt="A lazy image" class="lazy"
 
-| Type      | Title                                                                                     | Code                                       | Live demo                                                                          |
-| --------- | ----------------------------------------------------------------------------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------- |
-| Content   | Simple lazy loaded image                                                                  | [Code](demos/image_simple.html)            | [Live](https://www.andreaverlicchi.eu/lazyload/demos/image_simple.html)            |
-| Content   | Lazy responsive images with `srcset`                                                      | [Code](demos/image_srcset.html)            | [Live](https://www.andreaverlicchi.eu/lazyload/demos/image_srcset.html)            |
-| Content   | Lazy responsive images with the `<picture>` tag and the `media` attribute (art direction) | [Code](demos/picture_media.html)           | [Live](https://www.andreaverlicchi.eu/lazyload/demos/picture_media.html)           |
-| Content   | Lazy responsive images with `srcset` and `sizes` (using `data-sizes`)                     | [Code](demos/image_srcset_lazy_sizes.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/image_srcset_lazy_sizes.html) |
-| Content   | Lazy responsive images with `srcset` and `sizes` (using plain `sizes`)                    | [Code](demos/image_srcset_sizes.html)      | [Live](https://www.andreaverlicchi.eu/lazyload/demos/image_srcset_sizes.html)      |
-| Content   | Lazy video with multiple `<source>` tags                                                  | [Code](demos/video.html)                   | [Live](https://www.andreaverlicchi.eu/lazyload/demos/video.html)                   |
-| Content   | Lazy loading background images                                                            | [Code](demos/background_images.html)       | [Live](https://www.andreaverlicchi.eu/lazyload/demos/background_images.html)       |
-| Content   | Lazy WebP images with the `<picture>` tag and the `type` attribute for WebP               | [Code](demos/picture_type_webp.html)       | [Live](https://www.andreaverlicchi.eu/lazyload/demos/picture_type_webp.html)       |
-| Loading   | Asynchronous loading LazyLoad with requireJS                                              | [Code](demos/amd.html)                     | [Live](https://www.andreaverlicchi.eu/lazyload/demos/amd.html)                     |
-| Loading   | Asynchronous loading LazyLoad + InterserctionObserver with requireJS                      | [Code](demos/amd_polyfill.html)            | [Live](https://www.andreaverlicchi.eu/lazyload/demos/amd_polyfill.html)            |
-| Loading   | Asynchronous loading LazyLoad with `<script async>`                                       | [Code](demos/async.html)                   | [Live](https://www.andreaverlicchi.eu/lazyload/demos/async.html)                   |
-| Technique | Fade in images as they load                                                               | [Code](demos/fade_in.html)                 | [Live](https://www.andreaverlicchi.eu/lazyload/demos/fade_in.html)                 |
-| Technique | Lazily create lazyload instances                                                          | [Code](demos/lazily_load_lazyLoad.html)    | [Live](https://www.andreaverlicchi.eu/lazyload/demos/lazily_load_lazyLoad.html)    |
-| Technique | How to manage the print of a page with lazy images                                        | [Code](demos/print.html)                   | [Live](https://www.andreaverlicchi.eu/lazyload/demos/print.html)                   |
-| Technique | A popup layer containing lazy images in a scrolling container                             | [Code](demos/popup_layer.html)             | [Live](https://www.andreaverlicchi.eu/lazyload/demos/popup_layer.html)             |
-| Settings  | Multiple scrolling containers                                                             | [Code](demos/container_multiple.html)      | [Live](https://www.andreaverlicchi.eu/lazyload/demos/container_multiple.html)      |
-| Settings  | Single scrolling container                                                                | [Code](demos/container_single.html)        | [Live](https://www.andreaverlicchi.eu/lazyload/demos/container_single.html)        |
-| Settings  | Delay loading of lazy images                                                              | [Code](demos/delay.html)                   | [Live](https://www.andreaverlicchi.eu/lazyload/demos/delay.html)                   |
-| Methods   | How to `destroy()` LazyLoad                                                               | [Code](demos/destroy.html)                 | [Live](https://www.andreaverlicchi.eu/lazyload/demos/destroy.html)                 |
-| Methods   | Adding dynamic content, then `update()` LazyLoad                                          | [Code](demos/dynamic_content.html)         | [Live](https://www.andreaverlicchi.eu/lazyload/demos/dynamic_content.html)         |
-| Methods   | Adding dynamic content, then `update()` LazyLoad passing a NodeSet of elements            | [Code](demos/dynamic_content_nodeset.html) | [Live](https://www.andreaverlicchi.eu/lazyload/demos/dynamic_content_nodeset.html) |
-| Methods   | Load punctual images using the `load()` method                                            | [Code](demos/load.html)                    | [Live](https://www.andreaverlicchi.eu/lazyload/demos/load.html)                    |
-| Methods   | Load all images at once using `loadAll()`                                                 | [Code](demos/load_all.html)                | [Live](https://www.andreaverlicchi.eu/lazyload/demos/load_all.html)                |
-| Test      | Test for multiple thresholds                                                              | [Code](demos/thresholds.html)              | [Live](https://www.andreaverlicchi.eu/lazyload/demos/thresholds.html)              |
-| Test      | Test behaviour with hidden images                                                         | [Code](demos/image_hidden.html)            | [Live](https://www.andreaverlicchi.eu/lazyload/demos/ime_hidden.html)              |
-| Test      | Test of delay loading                                                                     | [Code](demos/delay_test.html)              | [Live](https://www.andreaverlicchi.eu/lazyload/demos/delay_test.html)              |
-| Test      | Test performance, lazy loading of hundreds of images                                      | [Code](demos/hundreds.html)                | [Live](https://www.andreaverlicchi.eu/lazyload/demos/hundreds.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)     |
+| Type      | Title                                                                                          | Code                                           | Live demo                                                                              |
+| --------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------- | -------------------------------------------------------------------------------------- |
+| Content   | Simple lazy loaded image                                                                       | [Code](demos/image_simple.html)                | [Live](https://www.andreaverlicchi.eu/lazyload/demos/image_simple.html)                |
+| Content   | Lazy responsive images with `srcset`                                                           | [Code](demos/image_srcset.html)                | [Live](https://www.andreaverlicchi.eu/lazyload/demos/image_srcset.html)                |
+| Content   | Lazy responsive images with the `<picture>` tag and the `media` attribute (art direction)      | [Code](demos/picture_media.html)               | [Live](https://www.andreaverlicchi.eu/lazyload/demos/picture_media.html)               |
+| Content   | Lazy responsive images with `srcset` and `sizes` (using `data-sizes`)                          | [Code](demos/image_srcset_lazy_sizes.html)     | [Live](https://www.andreaverlicchi.eu/lazyload/demos/image_srcset_lazy_sizes.html)     |
+| Content   | Lazy responsive images with `srcset` and `sizes` (using plain `sizes`)                         | [Code](demos/image_srcset_sizes.html)          | [Live](https://www.andreaverlicchi.eu/lazyload/demos/image_srcset_sizes.html)          |
+| Content   | Lazy video with multiple `<source>` tags                                                       | [Code](demos/video.html)                       | [Live](https://www.andreaverlicchi.eu/lazyload/demos/video.html)                       |
+| Content   | Lazy loading background images                                                                 | [Code](demos/background_images.html)           | [Live](https://www.andreaverlicchi.eu/lazyload/demos/background_images.html)           |
+| Content   | Lazy WebP images with the `<picture>` tag and the `type` attribute for WebP                    | [Code](demos/picture_type_webp.html)           | [Live](https://www.andreaverlicchi.eu/lazyload/demos/picture_type_webp.html)           |
+| Loading   | Asynchronous loading LazyLoad with requireJS                                                   | [Code](demos/amd.html)                         | [Live](https://www.andreaverlicchi.eu/lazyload/demos/amd.html)                         |
+| Loading   | Asynchronous loading LazyLoad + InterserctionObserver with requireJS                           | [Code](demos/amd_polyfill.html)                | [Live](https://www.andreaverlicchi.eu/lazyload/demos/amd_polyfill.html)                |
+| Loading   | Asynchronous loading LazyLoad with `<script async>`                                            | [Code](demos/async.html)                       | [Live](https://www.andreaverlicchi.eu/lazyload/demos/async.html)                       |
+| Technique | Fade in images as they load                                                                    | [Code](demos/fade_in.html)                     | [Live](https://www.andreaverlicchi.eu/lazyload/demos/fade_in.html)                     |
+| Technique | Lazily create lazyload instances                                                               | [Code](demos/lazily_load_lazyLoad.html)        | [Live](https://www.andreaverlicchi.eu/lazyload/demos/lazily_load_lazyLoad.html)        |
+| Technique | How to manage the print of a page with lazy images                                             | [Code](demos/print.html)                       | [Live](https://www.andreaverlicchi.eu/lazyload/demos/print.html)                       |
+| Technique | A popup layer containing lazy images in a scrolling container                                  | [Code](demos/popup_layer.html)                 | [Live](https://www.andreaverlicchi.eu/lazyload/demos/popup_layer.html)                 |
+| Settings  | Multiple scrolling containers                                                                  | [Code](demos/container_multiple.html)          | [Live](https://www.andreaverlicchi.eu/lazyload/demos/container_multiple.html)          |
+| Settings  | Single scrolling container                                                                     | [Code](demos/container_single.html)            | [Live](https://www.andreaverlicchi.eu/lazyload/demos/container_single.html)            |
+| Settings  | Delay loading of lazy images                                                                   | [Code](demos/delay.html)                       | [Live](https://www.andreaverlicchi.eu/lazyload/demos/delay.html)                       |
+| Methods   | How to `destroy()` LazyLoad                                                                    | [Code](demos/destroy.html)                     | [Live](https://www.andreaverlicchi.eu/lazyload/demos/destroy.html)                     |
+| Methods   | Adding dynamic content, then `update()` LazyLoad                                               | [Code](demos/dynamic_content.html)             | [Live](https://www.andreaverlicchi.eu/lazyload/demos/dynamic_content.html)             |
+| Methods   | Adding dynamic content, then `update()` LazyLoad passing a NodeSet of elements                 | [Code](demos/dynamic_content_nodeset.html)     | [Live](https://www.andreaverlicchi.eu/lazyload/demos/dynamic_content_nodeset.html)     |
+| Methods   | Load punctual images using the `load()` method                                                 | [Code](demos/load.html)                        | [Live](https://www.andreaverlicchi.eu/lazyload/demos/load.html)                        |
+| Methods   | Load all images at once using `loadAll()`                                                      | [Code](demos/load_all.html)                    | [Live](https://www.andreaverlicchi.eu/lazyload/demos/load_all.html)                    |
+| Test      | Test for multiple thresholds                                                                   | [Code](demos/thresholds.html)                  | [Live](https://www.andreaverlicchi.eu/lazyload/demos/thresholds.html)                  |
+| Test      | Test behaviour with hidden images                                                              | [Code](demos/image_hidden.html)                | [Live](https://www.andreaverlicchi.eu/lazyload/demos/image_hidden.html)                |
+| Test      | Test of delay loading                                                                          | [Code](demos/delay_test.html)                  | [Live](https://www.andreaverlicchi.eu/lazyload/demos/delay_test.html)                  |
+| Test      | Test performance, lazy loading of hundreds of images                                           | [Code](demos/hundreds.html)                    | [Live](https://www.andreaverlicchi.eu/lazyload/demos/hundreds.html)                    |
+| Native    | Test the native lazy loading of images _WITHOUT_ any line of javascript, not even this script  | [Code](demos/native_lazyload.html)             | [Live](https://www.andreaverlicchi.eu/lazyload/demos/native_lazyload.html)             |
+| 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)         |
 
@@ -644,9 +646,10 @@ ---
 | `auto_unobserve`    | A boolean that defines whether or not to automatically unobserve elements that was already revealed                                                                                                                                                                                                                                                                                                                                                          | `true`        | `false`                                  |
-| `callback_enter`    | A callback function which is called when an element enters the viewport.                                                                                                                                                                                                                                                                                                                                                                                     | `null`        | `(el)=>{console.log("Entered", el)}`     |
-| `callback_exit`     | A callback function which is called when an element exits the viewport.                                                                                                                                                                                                                                                                                                                                                                                      | `null`        | `(el)=>{console.log("Exited", el)}`      |
-| `callback_reveal`   | A callback function which is called when an element is activated (usually when it starts loading).                                                                                                                                                                                                                                                                                                                                                           | `null`        | `(el)=>{console.log("Loading", el)}`     |
-| `callback_set`      | **Deprecated from v.11** &rarr; Use `callback_reveal` instead.                                                                                                                                                                                                                                                                                                                                                                                               | `null`        | `(el)=>{console.log("Loading", el)}`     |
-| `callback_loaded`   | A callback function which is called when an element was loaded.                                                                                                                                                                                                                                                                                                                                                                                              | `null`        | `(el)=>{console.log("Loaded", el)}`      |
-| `callback_error`    | A callback function which is called when an element triggered an error.                                                                                                                                                                                                                                                                                                                                                                                      | `null`        | `(el)=>{console.log("Error", el)}`       |
-| `callback_finish`   | A callback function which is called when there are no more elements to load and all elements have been downloaded.                                                                                                                                                                                                                                                                                                                                           | `null`        | `()=>{console.log("Finish")}`            |
+| `callback_enter`    | A callback function which is called whenever an element enters the viewport.                                                                                                                                                                                                                                                                                                                                                                                 | `null`        | `(el)=>{console.log("Entered", el)}`     |
+| `callback_exit`     | A callback function which is called whenever an element exits the viewport.                                                                                                                                                                                                                                                                                                                                                                                  | `null`        | `(el)=>{console.log("Exited", el)}`      |
+| `callback_reveal`   | A callback function which is called whenever an element starts loading.                                                                                                                                                                                                                                                                                                                                                                                      | `null`        | `(el)=>{console.log("Loading", el)}`     |
+| `callback_set`      | **Deprecated from version 11** &rarr; It still works, but please update your code to use `callback_reveal` instead.                                                                                                                                                                                                                                                                                                                                          | `null`        | `(el)=>{console.log("Loading", el)}`     |
+| `callback_loaded`   | A callback function which is called whenever an element finishes loading.                                                                                                                                                                                                                                                                                                                                                                                    | `null`        | `(el)=>{console.log("Loaded", el)}`      |
+| `callback_error`    | A callback function which is called whenever an element triggers an error.                                                                                                                                                                                                                                                                                                                                                                                   | `null`        | `(el)=>{console.log("Error", el)}`       |
+| `callback_finish`   | A callback function which is called when there are no more elements to load _and_ all elements have been downloaded.                                                                                                                                                                                                                                                                                                                                         | `null`        | `()=>{console.log("Finish")}`            |
+| `use_native`        | This boolean sets whether or not to use [native lazy loading](https://addyosmani.com/blog/lazy-loading/). On browsers that supports it, LazyLoad will set the `loading="lazy"` attribute on images and iframes, and delegate their loading to the browser.                                                                                                                                                                                                   | `false`       | `true`                                   |
 
@@ -653,0 +656,0 @@ ### Methods

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

208285

increased by6.36%

Lines of code

1623

increased by5.94%

Number of lines in readme file

688

increased by0.44%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes