vanilla-lazyload - npm Package Compare versions

Comparing version 10.16.1 to 10.16.2

CHANGELOG.md

@@ -5,2 +5,6 @@ # CHANGELOG
 
+#### 10.16.2
+
+**BUGFIX**: Class `loaded` was not applied to a loaded video (issue #239).
+
 #### 10.16.1
@@ -158,2 +162,10 @@
 
+#### 8.15.2
+
+**BUGFIX**: Class `loaded` was not applied to a loaded video (issue #239).
+
+#### 8.15.1
+
+**BUGFIX**: Autoplaying video not loaded correctly after entering the viewport (issue #240). Thanks to @maeligg.
+
 #### 8.15.0
@@ -160,0 +172,0 @@

dist/lazyload.amd.js

@@ -215,5 +215,3 @@ var _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; };
 
-	var managedTags = ["IMG", "IFRAME", "VIDEO"];
-
-	var callCallback = function callCallback(callback, argument) {
+	var callbackIfSet = function callbackIfSet(callback, argument) {
 		if (callback) {
@@ -224,30 +222,50 @@ callback(argument);
 
-	var loadString = "load";
-	var errorString = "error";
+	var genericLoadEventName = "load";
+	var mediaLoadEventName = "loadeddata";
+	var errorEventName = "error";
 
-	var removeListeners = function removeListeners(element, loadHandler, errorHandler) {
-		element.removeEventListener(loadString, loadHandler);
-		element.removeEventListener(errorString, errorHandler);
+	var addEventListener = function addEventListener(element, eventName, handler) {
+		element.addEventListener(eventName, handler);
 	};
 
-	var addOneShotListeners = function addOneShotListeners(element, settings) {
-		var onLoad = function onLoad(event) {
-			onEvent(event, true, settings);
-			removeListeners(element, onLoad, onError);
-		};
-		var onError = function onError(event) {
-			onEvent(event, false, settings);
-			removeListeners(element, onLoad, onError);
-		};
-		element.addEventListener(loadString, onLoad);
-		element.addEventListener(errorString, onError);
+	var removeEventListener = function removeEventListener(element, eventName, handler) {
+		element.removeEventListener(eventName, handler);
 	};
 
-	var onEvent = function onEvent(event, success, settings) {
+	var addAllEventListeners = function addAllEventListeners(element, loadHandler, errorHandler) {
+		addEventListener(element, genericLoadEventName, loadHandler);
+		addEventListener(element, mediaLoadEventName, loadHandler);
+		addEventListener(element, errorEventName, errorHandler);
+	};
+
+	var removeAllEventListeners = function removeAllEventListeners(element, loadHandler, errorHandler) {
+		removeEventListener(element, genericLoadEventName, loadHandler);
+		removeEventListener(element, mediaLoadEventName, loadHandler);
+		removeEventListener(element, errorEventName, errorHandler);
+	};
+
+	var eventHandler = function eventHandler(event, success, settings) {
+		var className = success ? settings.class_loaded : settings.class_error;
+		var callback = success ? settings.callback_load : settings.callback_error;
 		var element = event.target;
+
 		removeClass(element, settings.class_loading);
-		addClass(element, success ? settings.class_loaded : settings.class_error); // Setting loaded or error class
-		callCallback(success ? settings.callback_load : settings.callback_error, element);
+		addClass(element, className);
+		callbackIfSet(callback, element);
 	};
 
+	var addOneShotEventListeners = function addOneShotEventListeners(element, settings) {
+		var loadHandler = function loadHandler(event) {
+			eventHandler(event, true, settings);
+			removeAllEventListeners(element, loadHandler, errorHandler);
+		};
+		var errorHandler = function errorHandler(event) {
+			eventHandler(event, false, settings);
+			removeAllEventListeners(element, loadHandler, errorHandler);
+		};
+		addAllEventListeners(element, loadHandler, errorHandler);
+	};
+
+	var managedTags = ["IMG", "IFRAME", "VIDEO"];
+
 	var loadAndUnobserve = function loadAndUnobserve(element, observer, settings) {
@@ -284,5 +302,5 @@ revealElement(element, settings);
 		}
-		callCallback(settings.callback_enter, element);
+		callbackIfSet(settings.callback_enter, element);
 		if (managedTags.indexOf(element.tagName) > -1) {
-			addOneShotListeners(element, settings);
+			addOneShotEventListeners(element, settings);
 			addClass(element, settings.class_loading);
@@ -292,3 +310,3 @@ }
 		setWasProcessedData(element);
-		callCallback(settings.callback_set, element);
+		callbackIfSet(settings.callback_set, element);
 	}
@@ -295,0 +313,0 @@

dist/lazyload.amd.min.js

@@ -1,2 +0,2 @@
-var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};define(function(){"use strict";function e(e){return e.filter(function(e){return!o(e)})}function t(e,t,n){!n&&o(e)||(O(t.callback_enter,e),L.indexOf(e.tagName)>-1&&(k(e,t),I(e,t.class_loading)),E(e,t),i(e),O(t.callback_set,e))}var n={elements_selector:"img",container:document,threshold:300,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,callback_load:null,callback_error:null,callback_set:null,callback_enter:null,to_webp:!1},r=function(e){return _extends({},n,e)},s=function(e,t){return e.getAttribute("data-"+t)},a=function(e,t,n){var r="data-"+t;null!==n?e.setAttribute(r,n):e.removeAttribute(r)},i=function(e){return a(e,"was-processed","true")},o=function(e){return"true"===s(e,"was-processed")},c=function(e,t){return a(e,"ll-timeout",t)},l=function(e){return s(e,"ll-timeout")},u=function(e,t){var n,r=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:r}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:r})}window.dispatchEvent(n)},d=function(e,t){return t?e.replace(/\.(jpe?g|png)/gi,".webp"):e},f="undefined"!=typeof window,_=f&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),v=f&&"IntersectionObserver"in window,h=f&&"classList"in document.createElement("p"),m=f&&function(){var e=document.createElement("canvas");return!(!e.getContext||!e.getContext("2d"))&&0===e.toDataURL("image/webp").indexOf("data:image/webp")}(),g=function(e,t,n,r){for(var a,i=0;a=e.children[i];i+=1)if("SOURCE"===a.tagName){var o=s(a,n);b(a,t,o,r)}},b=function(e,t,n,r){n&&e.setAttribute(t,d(n,r))},p=function(e,t){var n=m&&t.to_webp,r=s(e,t.data_src);if(r){var a=d(r,n);e.style.backgroundImage='url("'+a+'")'}},w={IMG:function(e,t){var n=m&&t.to_webp,r=t.data_srcset,a=e.parentNode;a&&"PICTURE"===a.tagName&&g(a,"srcset",r,n);var i=s(e,t.data_sizes);b(e,"sizes",i);var o=s(e,r);b(e,"srcset",o,n);var c=s(e,t.data_src);b(e,"src",c,n)},IFRAME:function(e,t){var n=s(e,t.data_src);b(e,"src",n)},VIDEO:function(e,t){var n=t.data_src,r=s(e,n);g(e,"src",n),b(e,"src",r),e.load()}},E=function(e,t){var n=e.tagName,r=w[n];r?r(e,t):p(e,t)},I=function(e,t){h?e.classList.add(t):e.className+=(e.className?" ":"")+t},y=function(e,t){h?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},L=["IMG","IFRAME","VIDEO"],O=function(e,t){e&&e(t)},A=function(e,t,n){e.removeEventListener("load",t),e.removeEventListener("error",n)},k=function(e,t){var n=function n(s){z(s,!0,t),A(e,n,r)},r=function r(s){z(s,!1,t),A(e,n,r)};e.addEventListener("load",n),e.addEventListener("error",r)},z=function(e,t,n){var r=e.target;y(r,n.class_loading),I(r,t?n.class_loaded:n.class_error),O(t?n.callback_load:n.callback_error,r)},N=function(e,n,r){t(e,r),n.unobserve(e)},x=function(e){var t=l(e);t&&(clearTimeout(t),c(e,null))},C=function(e,t,n){var r=n.load_delay,s=l(e);s||(s=setTimeout(function(){N(e,t,n),x(e)},r),c(e,s))},R=function(e){return e.isIntersecting||e.intersectionRatio>0},M=function(e){return{root:e.container===document?null:e.container,rootMargin:e.threshold+"px",threshold:0}},j=function(e,t){this._settings=r(e),this._setObserver(),this.update(t)};return j.prototype={_manageIntersection:function(e){var t=this._observer,n=this._settings,r=this._settings.load_delay,s=e.target;R(e)&&(r?C(s,t,n):N(s,t,n)),R(e)||x(s)},_onIntersection:function(t){t.forEach(this._manageIntersection.bind(this)),this._elements=e(this._elements)},_setObserver:function(){v&&(this._observer=new IntersectionObserver(this._onIntersection.bind(this),M(this._settings)))},loadAll:function(){var t=this;this._elements.forEach(function(e){t.load(e)}),this._elements=e(this._elements)},update:function(t){var n=this,r=this._settings,s=t||r.container.querySelectorAll(r.elements_selector);this._elements=e(Array.prototype.slice.call(s)),!_&&this._observer?this._elements.forEach(function(e){n._observer.observe(e)}):this.loadAll()},destroy:function(){var t=this;this._observer&&(e(this._elements).forEach(function(e){t._observer.unobserve(e)}),this._observer=null),this._elements=null,this._settings=null},load:function(e,n){t(e,this._settings,n)}},f&&function(e,t){if(t)if(t.length)for(var n,r=0;n=t[r];r+=1)u(e,n);else u(e,t)}(j,window.lazyLoadOptions),j});
+var _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};define(function(){"use strict";function t(t){return t.filter(function(t){return!o(t)})}function e(t,e,n){!n&&o(t)||(O(e.callback_enter,t),C.indexOf(t.tagName)>-1&&(x(t,e),I(t,e.class_loading)),E(t,e),i(t),O(e.callback_set,t))}var n={elements_selector:"img",container:document,threshold:300,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,callback_load:null,callback_error:null,callback_set:null,callback_enter:null,to_webp:!1},r=function(t){return _extends({},n,t)},s=function(t,e){return t.getAttribute("data-"+e)},a=function(t,e,n){var r="data-"+e;null!==n?t.setAttribute(r,n):t.removeAttribute(r)},i=function(t){return a(t,"was-processed","true")},o=function(t){return"true"===s(t,"was-processed")},c=function(t,e){return a(t,"ll-timeout",e)},l=function(t){return s(t,"ll-timeout")},u=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)},d=function(t,e){return e?t.replace(/\.(jpe?g|png)/gi,".webp"):t},f="undefined"!=typeof window,_=f&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),v=f&&"IntersectionObserver"in window,h=f&&"classList"in document.createElement("p"),m=f&&function(){var t=document.createElement("canvas");return!(!t.getContext||!t.getContext("2d"))&&0===t.toDataURL("image/webp").indexOf("data:image/webp")}(),g=function(t,e,n,r){for(var a,i=0;a=t.children[i];i+=1)if("SOURCE"===a.tagName){var o=s(a,n);b(a,e,o,r)}},b=function(t,e,n,r){n&&t.setAttribute(e,d(n,r))},p=function(t,e){var n=m&&e.to_webp,r=s(t,e.data_src);if(r){var a=d(r,n);t.style.backgroundImage='url("'+a+'")'}},w={IMG:function(t,e){var n=m&&e.to_webp,r=e.data_srcset,a=t.parentNode;a&&"PICTURE"===a.tagName&&g(a,"srcset",r,n);var i=s(t,e.data_sizes);b(t,"sizes",i);var o=s(t,r);b(t,"srcset",o,n);var c=s(t,e.data_src);b(t,"src",c,n)},IFRAME:function(t,e){var n=s(t,e.data_src);b(t,"src",n)},VIDEO:function(t,e){var n=e.data_src,r=s(t,n);g(t,"src",n),b(t,"src",r),t.load()}},E=function(t,e){var n=t.tagName,r=w[n];r?r(t,e):p(t,e)},I=function(t,e){h?t.classList.add(e):t.className+=(t.className?" ":"")+e},y=function(t,e){h?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},O=function(t,e){t&&t(e)},A=function(t,e,n){t.addEventListener(e,n)},L=function(t,e,n){t.removeEventListener(e,n)},k=function(t,e,n){A(t,"load",e),A(t,"loadeddata",e),A(t,"error",n)},z=function(t,e,n){L(t,"load",e),L(t,"loadeddata",e),L(t,"error",n)},N=function(t,e,n){var r=e?n.class_loaded:n.class_error,s=e?n.callback_load:n.callback_error,a=t.target;y(a,n.class_loading),I(a,r),O(s,a)},x=function(t,e){var n=function n(s){N(s,!0,e),z(t,n,r)},r=function r(s){N(s,!1,e),z(t,n,r)};k(t,n,r)},C=["IMG","IFRAME","VIDEO"],R=function(t,n,r){e(t,r),n.unobserve(t)},M=function(t){var e=l(t);e&&(clearTimeout(e),c(t,null))},j=function(t,e,n){var r=n.load_delay,s=l(t);s||(s=setTimeout(function(){R(t,e,n),M(t)},r),c(t,s))},D=function(t){return t.isIntersecting||t.intersectionRatio>0},T=function(t){return{root:t.container===document?null:t.container,rootMargin:t.threshold+"px",threshold:0}},U=function(t,e){this._settings=r(t),this._setObserver(),this.update(e)};return U.prototype={_manageIntersection:function(t){var e=this._observer,n=this._settings,r=this._settings.load_delay,s=t.target;D(t)&&(r?j(s,e,n):R(s,e,n)),D(t)||M(s)},_onIntersection:function(e){e.forEach(this._manageIntersection.bind(this)),this._elements=t(this._elements)},_setObserver:function(){v&&(this._observer=new IntersectionObserver(this._onIntersection.bind(this),T(this._settings)))},loadAll:function(){var e=this;this._elements.forEach(function(t){e.load(t)}),this._elements=t(this._elements)},update:function(e){var n=this,r=this._settings,s=e||r.container.querySelectorAll(r.elements_selector);this._elements=t(Array.prototype.slice.call(s)),!_&&this._observer?this._elements.forEach(function(t){n._observer.observe(t)}):this.loadAll()},destroy:function(){var e=this;this._observer&&(t(this._elements).forEach(function(t){e._observer.unobserve(t)}),this._observer=null),this._elements=null,this._settings=null},load:function(t,n){e(t,this._settings,n)}},f&&function(t,e){if(e)if(e.length)for(var n,r=0;n=e[r];r+=1)u(t,n);else u(t,e)}(U,window.lazyLoadOptions),U});
 //# sourceMappingURL=lazyload.amd.min.js.map

dist/lazyload.es2015.js

@@ -219,5 +219,3 @@ const defaultSettings = {
 
-const managedTags = ["IMG", "IFRAME", "VIDEO"];
-
-const callCallback = function(callback, argument) {
+const callbackIfSet = (callback, argument) => {
 	if (callback) {
@@ -228,33 +226,50 @@ callback(argument);
 
-const loadString = "load";
-const errorString = "error";
+const genericLoadEventName = "load";
+const mediaLoadEventName = "loadeddata";
+const errorEventName = "error";
 
-const removeListeners = function(element, loadHandler, errorHandler) {
-	element.removeEventListener(loadString, loadHandler);
-	element.removeEventListener(errorString, errorHandler);
+const addEventListener = (element, eventName, handler) => {
+	element.addEventListener(eventName, handler);
 };
 
-const addOneShotListeners = function(element, settings) {
-	const onLoad = event => {
-		onEvent(event, true, settings);
-		removeListeners(element, onLoad, onError);
-	};
-	const onError = event => {
-		onEvent(event, false, settings);
-		removeListeners(element, onLoad, onError);
-	};
-	element.addEventListener(loadString, onLoad);
-	element.addEventListener(errorString, onError);
+const removeEventListener = (element, eventName, handler) => {
+	element.removeEventListener(eventName, handler);
 };
 
-const onEvent = function(event, success, settings) {
+const addAllEventListeners = (element, loadHandler, errorHandler) => {
+	addEventListener(element, genericLoadEventName, loadHandler);
+	addEventListener(element, mediaLoadEventName, loadHandler);
+	addEventListener(element, errorEventName, errorHandler);
+};
+
+const removeAllEventListeners = (element, loadHandler, errorHandler) => {
+	removeEventListener(element, genericLoadEventName, loadHandler);
+	removeEventListener(element, mediaLoadEventName, loadHandler);
+	removeEventListener(element, errorEventName, errorHandler);
+};
+
+const eventHandler = function(event, success, settings) {
+	const className = success ? settings.class_loaded : settings.class_error;
+	const callback = success ? settings.callback_load : settings.callback_error;
 	const element = event.target;
+
 	removeClass(element, settings.class_loading);
-	addClass(element, success ? settings.class_loaded : settings.class_error); // Setting loaded or error class
-	callCallback(
-		success ? settings.callback_load : settings.callback_error,
-		element
-	);
+	addClass(element, className);
+	callbackIfSet(callback, element);
 };
 
+const addOneShotEventListeners = (element, settings) => {
+	const loadHandler = event => {
+		eventHandler(event, true, settings);
+		removeAllEventListeners(element, loadHandler, errorHandler);
+	};
+	const errorHandler = event => {
+		eventHandler(event, false, settings);
+		removeAllEventListeners(element, loadHandler, errorHandler);
+	};
+	addAllEventListeners(element, loadHandler, errorHandler);
+};
+
+const managedTags = ["IMG", "IFRAME", "VIDEO"];
+
 const loadAndUnobserve = (element, observer, settings) => {
@@ -291,5 +306,5 @@ revealElement(element, settings);
 	}
-	callCallback(settings.callback_enter, element);
+	callbackIfSet(settings.callback_enter, element);
 	if (managedTags.indexOf(element.tagName) > -1) {
-		addOneShotListeners(element, settings);
+		addOneShotEventListeners(element, settings);
 		addClass(element, settings.class_loading);
@@ -299,3 +314,3 @@ }
 	setWasProcessedData(element);
-	callCallback(settings.callback_set, element);
+	callbackIfSet(settings.callback_set, element);
 }
@@ -302,0 +317,0 @@

dist/lazyload.iife.js

@@ -215,5 +215,3 @@ var _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; };
 
-	var managedTags = ["IMG", "IFRAME", "VIDEO"];
-
-	var callCallback = function callCallback(callback, argument) {
+	var callbackIfSet = function callbackIfSet(callback, argument) {
 		if (callback) {
@@ -224,30 +222,50 @@ callback(argument);
 
-	var loadString = "load";
-	var errorString = "error";
+	var genericLoadEventName = "load";
+	var mediaLoadEventName = "loadeddata";
+	var errorEventName = "error";
 
-	var removeListeners = function removeListeners(element, loadHandler, errorHandler) {
-		element.removeEventListener(loadString, loadHandler);
-		element.removeEventListener(errorString, errorHandler);
+	var addEventListener = function addEventListener(element, eventName, handler) {
+		element.addEventListener(eventName, handler);
 	};
 
-	var addOneShotListeners = function addOneShotListeners(element, settings) {
-		var onLoad = function onLoad(event) {
-			onEvent(event, true, settings);
-			removeListeners(element, onLoad, onError);
-		};
-		var onError = function onError(event) {
-			onEvent(event, false, settings);
-			removeListeners(element, onLoad, onError);
-		};
-		element.addEventListener(loadString, onLoad);
-		element.addEventListener(errorString, onError);
+	var removeEventListener = function removeEventListener(element, eventName, handler) {
+		element.removeEventListener(eventName, handler);
 	};
 
-	var onEvent = function onEvent(event, success, settings) {
+	var addAllEventListeners = function addAllEventListeners(element, loadHandler, errorHandler) {
+		addEventListener(element, genericLoadEventName, loadHandler);
+		addEventListener(element, mediaLoadEventName, loadHandler);
+		addEventListener(element, errorEventName, errorHandler);
+	};
+
+	var removeAllEventListeners = function removeAllEventListeners(element, loadHandler, errorHandler) {
+		removeEventListener(element, genericLoadEventName, loadHandler);
+		removeEventListener(element, mediaLoadEventName, loadHandler);
+		removeEventListener(element, errorEventName, errorHandler);
+	};
+
+	var eventHandler = function eventHandler(event, success, settings) {
+		var className = success ? settings.class_loaded : settings.class_error;
+		var callback = success ? settings.callback_load : settings.callback_error;
 		var element = event.target;
+
 		removeClass(element, settings.class_loading);
-		addClass(element, success ? settings.class_loaded : settings.class_error); // Setting loaded or error class
-		callCallback(success ? settings.callback_load : settings.callback_error, element);
+		addClass(element, className);
+		callbackIfSet(callback, element);
 	};
 
+	var addOneShotEventListeners = function addOneShotEventListeners(element, settings) {
+		var loadHandler = function loadHandler(event) {
+			eventHandler(event, true, settings);
+			removeAllEventListeners(element, loadHandler, errorHandler);
+		};
+		var errorHandler = function errorHandler(event) {
+			eventHandler(event, false, settings);
+			removeAllEventListeners(element, loadHandler, errorHandler);
+		};
+		addAllEventListeners(element, loadHandler, errorHandler);
+	};
+
+	var managedTags = ["IMG", "IFRAME", "VIDEO"];
+
 	var loadAndUnobserve = function loadAndUnobserve(element, observer, settings) {
@@ -284,5 +302,5 @@ revealElement(element, settings);
 		}
-		callCallback(settings.callback_enter, element);
+		callbackIfSet(settings.callback_enter, element);
 		if (managedTags.indexOf(element.tagName) > -1) {
-			addOneShotListeners(element, settings);
+			addOneShotEventListeners(element, settings);
 			addClass(element, settings.class_loading);
@@ -292,3 +310,3 @@ }
 		setWasProcessedData(element);
-		callCallback(settings.callback_set, element);
+		callbackIfSet(settings.callback_set, element);
 	}
@@ -295,0 +313,0 @@

dist/lazyload.iife.min.js

@@ -1,2 +0,2 @@
-var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},LazyLoad=function(){"use strict";function e(e){return e.filter(function(e){return!o(e)})}function t(e,t,n){!n&&o(e)||(O(t.callback_enter,e),L.indexOf(e.tagName)>-1&&(z(e,t),y(e,t.class_loading)),E(e,t),i(e),O(t.callback_set,e))}var n={elements_selector:"img",container:document,threshold:300,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,callback_load:null,callback_error:null,callback_set:null,callback_enter:null,to_webp:!1},r=function(e){return _extends({},n,e)},s=function(e,t){return e.getAttribute("data-"+t)},a=function(e,t,n){var r="data-"+t;null!==n?e.setAttribute(r,n):e.removeAttribute(r)},i=function(e){return a(e,"was-processed","true")},o=function(e){return"true"===s(e,"was-processed")},c=function(e,t){return a(e,"ll-timeout",t)},l=function(e){return s(e,"ll-timeout")},u=function(e,t){var n,r=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:r}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:r})}window.dispatchEvent(n)},d=function(e,t){return t?e.replace(/\.(jpe?g|png)/gi,".webp"):e},f="undefined"!=typeof window,_=f&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),v=f&&"IntersectionObserver"in window,h=f&&"classList"in document.createElement("p"),m=f&&function(){var e=document.createElement("canvas");return!(!e.getContext||!e.getContext("2d"))&&0===e.toDataURL("image/webp").indexOf("data:image/webp")}(),g=function(e,t,n,r){for(var a,i=0;a=e.children[i];i+=1)if("SOURCE"===a.tagName){var o=s(a,n);b(a,t,o,r)}},b=function(e,t,n,r){n&&e.setAttribute(t,d(n,r))},p=function(e,t){var n=m&&t.to_webp,r=s(e,t.data_src);if(r){var a=d(r,n);e.style.backgroundImage='url("'+a+'")'}},w={IMG:function(e,t){var n=m&&t.to_webp,r=t.data_srcset,a=e.parentNode;a&&"PICTURE"===a.tagName&&g(a,"srcset",r,n);var i=s(e,t.data_sizes);b(e,"sizes",i);var o=s(e,r);b(e,"srcset",o,n);var c=s(e,t.data_src);b(e,"src",c,n)},IFRAME:function(e,t){var n=s(e,t.data_src);b(e,"src",n)},VIDEO:function(e,t){var n=t.data_src,r=s(e,n);g(e,"src",n),b(e,"src",r),e.load()}},E=function(e,t){var n=e.tagName,r=w[n];r?r(e,t):p(e,t)},y=function(e,t){h?e.classList.add(t):e.className+=(e.className?" ":"")+t},I=function(e,t){h?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},L=["IMG","IFRAME","VIDEO"],O=function(e,t){e&&e(t)},A=function(e,t,n){e.removeEventListener("load",t),e.removeEventListener("error",n)},z=function(e,t){var n=function n(s){k(s,!0,t),A(e,n,r)},r=function r(s){k(s,!1,t),A(e,n,r)};e.addEventListener("load",n),e.addEventListener("error",r)},k=function(e,t,n){var r=e.target;I(r,n.class_loading),y(r,t?n.class_loaded:n.class_error),O(t?n.callback_load:n.callback_error,r)},N=function(e,n,r){t(e,r),n.unobserve(e)},x=function(e){var t=l(e);t&&(clearTimeout(t),c(e,null))},C=function(e,t,n){var r=n.load_delay,s=l(e);s||(s=setTimeout(function(){N(e,t,n),x(e)},r),c(e,s))},R=function(e){return e.isIntersecting||e.intersectionRatio>0},M=function(e){return{root:e.container===document?null:e.container,rootMargin:e.threshold+"px",threshold:0}},j=function(e,t){this._settings=r(e),this._setObserver(),this.update(t)};return j.prototype={_manageIntersection:function(e){var t=this._observer,n=this._settings,r=this._settings.load_delay,s=e.target;R(e)&&(r?C(s,t,n):N(s,t,n)),R(e)||x(s)},_onIntersection:function(t){t.forEach(this._manageIntersection.bind(this)),this._elements=e(this._elements)},_setObserver:function(){v&&(this._observer=new IntersectionObserver(this._onIntersection.bind(this),M(this._settings)))},loadAll:function(){var t=this;this._elements.forEach(function(e){t.load(e)}),this._elements=e(this._elements)},update:function(t){var n=this,r=this._settings,s=t||r.container.querySelectorAll(r.elements_selector);this._elements=e(Array.prototype.slice.call(s)),!_&&this._observer?this._elements.forEach(function(e){n._observer.observe(e)}):this.loadAll()},destroy:function(){var t=this;this._observer&&(e(this._elements).forEach(function(e){t._observer.unobserve(e)}),this._observer=null),this._elements=null,this._settings=null},load:function(e,n){t(e,this._settings,n)}},f&&function(e,t){if(t)if(t.length)for(var n,r=0;n=t[r];r+=1)u(e,n);else u(e,t)}(j,window.lazyLoadOptions),j}();
+var _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},LazyLoad=function(){"use strict";function t(t){return t.filter(function(t){return!o(t)})}function e(t,e,n){!n&&o(t)||(L(e.callback_enter,t),C.indexOf(t.tagName)>-1&&(x(t,e),y(t,e.class_loading)),E(t,e),i(t),L(e.callback_set,t))}var n={elements_selector:"img",container:document,threshold:300,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,callback_load:null,callback_error:null,callback_set:null,callback_enter:null,to_webp:!1},r=function(t){return _extends({},n,t)},s=function(t,e){return t.getAttribute("data-"+e)},a=function(t,e,n){var r="data-"+e;null!==n?t.setAttribute(r,n):t.removeAttribute(r)},i=function(t){return a(t,"was-processed","true")},o=function(t){return"true"===s(t,"was-processed")},c=function(t,e){return a(t,"ll-timeout",e)},l=function(t){return s(t,"ll-timeout")},u=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)},d=function(t,e){return e?t.replace(/\.(jpe?g|png)/gi,".webp"):t},f="undefined"!=typeof window,_=f&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),v=f&&"IntersectionObserver"in window,h=f&&"classList"in document.createElement("p"),m=f&&function(){var t=document.createElement("canvas");return!(!t.getContext||!t.getContext("2d"))&&0===t.toDataURL("image/webp").indexOf("data:image/webp")}(),g=function(t,e,n,r){for(var a,i=0;a=t.children[i];i+=1)if("SOURCE"===a.tagName){var o=s(a,n);b(a,e,o,r)}},b=function(t,e,n,r){n&&t.setAttribute(e,d(n,r))},p=function(t,e){var n=m&&e.to_webp,r=s(t,e.data_src);if(r){var a=d(r,n);t.style.backgroundImage='url("'+a+'")'}},w={IMG:function(t,e){var n=m&&e.to_webp,r=e.data_srcset,a=t.parentNode;a&&"PICTURE"===a.tagName&&g(a,"srcset",r,n);var i=s(t,e.data_sizes);b(t,"sizes",i);var o=s(t,r);b(t,"srcset",o,n);var c=s(t,e.data_src);b(t,"src",c,n)},IFRAME:function(t,e){var n=s(t,e.data_src);b(t,"src",n)},VIDEO:function(t,e){var n=e.data_src,r=s(t,n);g(t,"src",n),b(t,"src",r),t.load()}},E=function(t,e){var n=t.tagName,r=w[n];r?r(t,e):p(t,e)},y=function(t,e){h?t.classList.add(e):t.className+=(t.className?" ":"")+e},I=function(t,e){h?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},L=function(t,e){t&&t(e)},O=function(t,e,n){t.addEventListener(e,n)},A=function(t,e,n){t.removeEventListener(e,n)},z=function(t,e,n){O(t,"load",e),O(t,"loadeddata",e),O(t,"error",n)},k=function(t,e,n){A(t,"load",e),A(t,"loadeddata",e),A(t,"error",n)},N=function(t,e,n){var r=e?n.class_loaded:n.class_error,s=e?n.callback_load:n.callback_error,a=t.target;I(a,n.class_loading),y(a,r),L(s,a)},x=function(t,e){var n=function n(s){N(s,!0,e),k(t,n,r)},r=function r(s){N(s,!1,e),k(t,n,r)};z(t,n,r)},C=["IMG","IFRAME","VIDEO"],R=function(t,n,r){e(t,r),n.unobserve(t)},M=function(t){var e=l(t);e&&(clearTimeout(e),c(t,null))},j=function(t,e,n){var r=n.load_delay,s=l(t);s||(s=setTimeout(function(){R(t,e,n),M(t)},r),c(t,s))},D=function(t){return t.isIntersecting||t.intersectionRatio>0},T=function(t){return{root:t.container===document?null:t.container,rootMargin:t.threshold+"px",threshold:0}},U=function(t,e){this._settings=r(t),this._setObserver(),this.update(e)};return U.prototype={_manageIntersection:function(t){var e=this._observer,n=this._settings,r=this._settings.load_delay,s=t.target;D(t)&&(r?j(s,e,n):R(s,e,n)),D(t)||M(s)},_onIntersection:function(e){e.forEach(this._manageIntersection.bind(this)),this._elements=t(this._elements)},_setObserver:function(){v&&(this._observer=new IntersectionObserver(this._onIntersection.bind(this),T(this._settings)))},loadAll:function(){var e=this;this._elements.forEach(function(t){e.load(t)}),this._elements=t(this._elements)},update:function(e){var n=this,r=this._settings,s=e||r.container.querySelectorAll(r.elements_selector);this._elements=t(Array.prototype.slice.call(s)),!_&&this._observer?this._elements.forEach(function(t){n._observer.observe(t)}):this.loadAll()},destroy:function(){var e=this;this._observer&&(t(this._elements).forEach(function(t){e._observer.unobserve(t)}),this._observer=null),this._elements=null,this._settings=null},load:function(t,n){e(t,this._settings,n)}},f&&function(t,e){if(e)if(e.length)for(var n,r=0;n=e[r];r+=1)u(t,n);else u(t,e)}(U,window.lazyLoadOptions),U}();
 //# sourceMappingURL=lazyload.iife.min.js.map

dist/lazyload.js

@@ -219,5 +219,3 @@ var _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; };
 
-	var managedTags = ["IMG", "IFRAME", "VIDEO"];
-
-	var callCallback = function callCallback(callback, argument) {
+	var callbackIfSet = function callbackIfSet(callback, argument) {
 		if (callback) {
@@ -228,30 +226,50 @@ callback(argument);
 
-	var loadString = "load";
-	var errorString = "error";
+	var genericLoadEventName = "load";
+	var mediaLoadEventName = "loadeddata";
+	var errorEventName = "error";
 
-	var removeListeners = function removeListeners(element, loadHandler, errorHandler) {
-		element.removeEventListener(loadString, loadHandler);
-		element.removeEventListener(errorString, errorHandler);
+	var addEventListener = function addEventListener(element, eventName, handler) {
+		element.addEventListener(eventName, handler);
 	};
 
-	var addOneShotListeners = function addOneShotListeners(element, settings) {
-		var onLoad = function onLoad(event) {
-			onEvent(event, true, settings);
-			removeListeners(element, onLoad, onError);
-		};
-		var onError = function onError(event) {
-			onEvent(event, false, settings);
-			removeListeners(element, onLoad, onError);
-		};
-		element.addEventListener(loadString, onLoad);
-		element.addEventListener(errorString, onError);
+	var removeEventListener = function removeEventListener(element, eventName, handler) {
+		element.removeEventListener(eventName, handler);
 	};
 
-	var onEvent = function onEvent(event, success, settings) {
+	var addAllEventListeners = function addAllEventListeners(element, loadHandler, errorHandler) {
+		addEventListener(element, genericLoadEventName, loadHandler);
+		addEventListener(element, mediaLoadEventName, loadHandler);
+		addEventListener(element, errorEventName, errorHandler);
+	};
+
+	var removeAllEventListeners = function removeAllEventListeners(element, loadHandler, errorHandler) {
+		removeEventListener(element, genericLoadEventName, loadHandler);
+		removeEventListener(element, mediaLoadEventName, loadHandler);
+		removeEventListener(element, errorEventName, errorHandler);
+	};
+
+	var eventHandler = function eventHandler(event, success, settings) {
+		var className = success ? settings.class_loaded : settings.class_error;
+		var callback = success ? settings.callback_load : settings.callback_error;
 		var element = event.target;
+
 		removeClass(element, settings.class_loading);
-		addClass(element, success ? settings.class_loaded : settings.class_error); // Setting loaded or error class
-		callCallback(success ? settings.callback_load : settings.callback_error, element);
+		addClass(element, className);
+		callbackIfSet(callback, element);
 	};
 
+	var addOneShotEventListeners = function addOneShotEventListeners(element, settings) {
+		var loadHandler = function loadHandler(event) {
+			eventHandler(event, true, settings);
+			removeAllEventListeners(element, loadHandler, errorHandler);
+		};
+		var errorHandler = function errorHandler(event) {
+			eventHandler(event, false, settings);
+			removeAllEventListeners(element, loadHandler, errorHandler);
+		};
+		addAllEventListeners(element, loadHandler, errorHandler);
+	};
+
+	var managedTags = ["IMG", "IFRAME", "VIDEO"];
+
 	var loadAndUnobserve = function loadAndUnobserve(element, observer, settings) {
@@ -288,5 +306,5 @@ revealElement(element, settings);
 		}
-		callCallback(settings.callback_enter, element);
+		callbackIfSet(settings.callback_enter, element);
 		if (managedTags.indexOf(element.tagName) > -1) {
-			addOneShotListeners(element, settings);
+			addOneShotEventListeners(element, settings);
 			addClass(element, settings.class_loading);
@@ -296,3 +314,3 @@ }
 		setWasProcessedData(element);
-		callCallback(settings.callback_set, element);
+		callbackIfSet(settings.callback_set, element);
 	}
@@ -299,0 +317,0 @@

dist/lazyload.min.js

@@ -1,2 +0,2 @@
-var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(e,t){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.LazyLoad=t()}(this,function(){"use strict";function e(e){return e.filter(function(e){return!a(e)})}function t(e,t,n){!n&&a(e)||(O(t.callback_enter,e),L.indexOf(e.tagName)>-1&&(A(e,t),E(e,t.class_loading)),w(e,t),i(e),O(t.callback_set,e))}var n={elements_selector:"img",container:document,threshold:300,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,callback_load:null,callback_error:null,callback_set:null,callback_enter:null,to_webp:!1},r=function(e){return _extends({},n,e)},o=function(e,t){return e.getAttribute("data-"+t)},s=function(e,t,n){var r="data-"+t;null!==n?e.setAttribute(r,n):e.removeAttribute(r)},i=function(e){return s(e,"was-processed","true")},a=function(e){return"true"===o(e,"was-processed")},c=function(e,t){return s(e,"ll-timeout",t)},l=function(e){return o(e,"ll-timeout")},u=function(e,t){var n,r=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:r}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:r})}window.dispatchEvent(n)},d=function(e,t){return t?e.replace(/\.(jpe?g|png)/gi,".webp"):e},f="undefined"!=typeof window,_=f&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),v=f&&"IntersectionObserver"in window,m=f&&"classList"in document.createElement("p"),h=f&&function(){var e=document.createElement("canvas");return!(!e.getContext||!e.getContext("2d"))&&0===e.toDataURL("image/webp").indexOf("data:image/webp")}(),b=function(e,t,n,r){for(var s,i=0;s=e.children[i];i+=1)if("SOURCE"===s.tagName){var a=o(s,n);p(s,t,a,r)}},p=function(e,t,n,r){n&&e.setAttribute(t,d(n,r))},g=function(e,t){var n=h&&t.to_webp,r=o(e,t.data_src);if(r){var s=d(r,n);e.style.backgroundImage='url("'+s+'")'}},y={IMG:function(e,t){var n=h&&t.to_webp,r=t.data_srcset,s=e.parentNode;s&&"PICTURE"===s.tagName&&b(s,"srcset",r,n);var i=o(e,t.data_sizes);p(e,"sizes",i);var a=o(e,r);p(e,"srcset",a,n);var c=o(e,t.data_src);p(e,"src",c,n)},IFRAME:function(e,t){var n=o(e,t.data_src);p(e,"src",n)},VIDEO:function(e,t){var n=t.data_src,r=o(e,n);b(e,"src",n),p(e,"src",r),e.load()}},w=function(e,t){var n=e.tagName,r=y[n];r?r(e,t):g(e,t)},E=function(e,t){m?e.classList.add(t):e.className+=(e.className?" ":"")+t},I=function(e,t){m?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},L=["IMG","IFRAME","VIDEO"],O=function(e,t){e&&e(t)},x=function(e,t,n){e.removeEventListener("load",t),e.removeEventListener("error",n)},A=function(e,t){var n=function n(o){z(o,!0,t),x(e,n,r)},r=function r(o){z(o,!1,t),x(e,n,r)};e.addEventListener("load",n),e.addEventListener("error",r)},z=function(e,t,n){var r=e.target;I(r,n.class_loading),E(r,t?n.class_loaded:n.class_error),O(t?n.callback_load:n.callback_error,r)},k=function(e,n,r){t(e,r),n.unobserve(e)},N=function(e){var t=l(e);t&&(clearTimeout(t),c(e,null))},C=function(e,t,n){var r=n.load_delay,o=l(e);o||(o=setTimeout(function(){k(e,t,n),N(e)},r),c(e,o))},R=function(e){return e.isIntersecting||e.intersectionRatio>0},S=function(e){return{root:e.container===document?null:e.container,rootMargin:e.threshold+"px",threshold:0}},M=function(e,t){this._settings=r(e),this._setObserver(),this.update(t)};return M.prototype={_manageIntersection:function(e){var t=this._observer,n=this._settings,r=this._settings.load_delay,o=e.target;R(e)&&(r?C(o,t,n):k(o,t,n)),R(e)||N(o)},_onIntersection:function(t){t.forEach(this._manageIntersection.bind(this)),this._elements=e(this._elements)},_setObserver:function(){v&&(this._observer=new IntersectionObserver(this._onIntersection.bind(this),S(this._settings)))},loadAll:function(){var t=this;this._elements.forEach(function(e){t.load(e)}),this._elements=e(this._elements)},update:function(t){var n=this,r=this._settings,o=t||r.container.querySelectorAll(r.elements_selector);this._elements=e(Array.prototype.slice.call(o)),!_&&this._observer?this._elements.forEach(function(e){n._observer.observe(e)}):this.loadAll()},destroy:function(){var t=this;this._observer&&(e(this._elements).forEach(function(e){t._observer.unobserve(e)}),this._observer=null),this._elements=null,this._settings=null},load:function(e,n){t(e,this._settings,n)}},f&&function(e,t){if(t)if(t.length)for(var n,r=0;n=t[r];r+=1)u(e,n);else u(e,t)}(M,window.lazyLoadOptions),M});
+var _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},_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};!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";function t(t){return t.filter(function(t){return!i(t)})}function e(t,e,n){!n&&i(t)||(L(e.callback_enter,t),C.indexOf(t.tagName)>-1&&(N(t,e),E(t,e.class_loading)),w(t,e),a(t),L(e.callback_set,t))}var n={elements_selector:"img",container:document,threshold:300,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,callback_load:null,callback_error:null,callback_set:null,callback_enter:null,to_webp:!1},r=function(t){return _extends({},n,t)},o=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)},a=function(t){return s(t,"was-processed","true")},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,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)},d=function(t,e){return e?t.replace(/\.(jpe?g|png)/gi,".webp"):t},f="undefined"!=typeof window,_=f&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),v=f&&"IntersectionObserver"in window,m=f&&"classList"in document.createElement("p"),h=f&&function(){var t=document.createElement("canvas");return!(!t.getContext||!t.getContext("2d"))&&0===t.toDataURL("image/webp").indexOf("data:image/webp")}(),b=function(t,e,n,r){for(var s,a=0;s=t.children[a];a+=1)if("SOURCE"===s.tagName){var i=o(s,n);p(s,e,i,r)}},p=function(t,e,n,r){n&&t.setAttribute(e,d(n,r))},g=function(t,e){var n=h&&e.to_webp,r=o(t,e.data_src);if(r){var s=d(r,n);t.style.backgroundImage='url("'+s+'")'}},y={IMG:function(t,e){var n=h&&e.to_webp,r=e.data_srcset,s=t.parentNode;s&&"PICTURE"===s.tagName&&b(s,"srcset",r,n);var a=o(t,e.data_sizes);p(t,"sizes",a);var i=o(t,r);p(t,"srcset",i,n);var c=o(t,e.data_src);p(t,"src",c,n)},IFRAME:function(t,e){var n=o(t,e.data_src);p(t,"src",n)},VIDEO:function(t,e){var n=e.data_src,r=o(t,n);b(t,"src",n),p(t,"src",r),t.load()}},w=function(t,e){var n=t.tagName,r=y[n];r?r(t,e):g(t,e)},E=function(t,e){m?t.classList.add(e):t.className+=(t.className?" ":"")+e},I=function(t,e){m?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},L=function(t,e){t&&t(e)},O=function(t,e,n){t.addEventListener(e,n)},x=function(t,e,n){t.removeEventListener(e,n)},A=function(t,e,n){O(t,"load",e),O(t,"loadeddata",e),O(t,"error",n)},z=function(t,e,n){x(t,"load",e),x(t,"loadeddata",e),x(t,"error",n)},k=function(t,e,n){var r=e?n.class_loaded:n.class_error,o=e?n.callback_load:n.callback_error,s=t.target;I(s,n.class_loading),E(s,r),L(o,s)},N=function(t,e){var n=function n(o){k(o,!0,e),z(t,n,r)},r=function r(o){k(o,!1,e),z(t,n,r)};A(t,n,r)},C=["IMG","IFRAME","VIDEO"],R=function(t,n,r){e(t,r),n.unobserve(t)},S=function(t){var e=l(t);e&&(clearTimeout(e),c(t,null))},M=function(t,e,n){var r=n.load_delay,o=l(t);o||(o=setTimeout(function(){R(t,e,n),S(t)},r),c(t,o))},j=function(t){return t.isIntersecting||t.intersectionRatio>0},D=function(t){return{root:t.container===document?null:t.container,rootMargin:t.threshold+"px",threshold:0}},T=function(t,e){this._settings=r(t),this._setObserver(),this.update(e)};return T.prototype={_manageIntersection:function(t){var e=this._observer,n=this._settings,r=this._settings.load_delay,o=t.target;j(t)&&(r?M(o,e,n):R(o,e,n)),j(t)||S(o)},_onIntersection:function(e){e.forEach(this._manageIntersection.bind(this)),this._elements=t(this._elements)},_setObserver:function(){v&&(this._observer=new IntersectionObserver(this._onIntersection.bind(this),D(this._settings)))},loadAll:function(){var e=this;this._elements.forEach(function(t){e.load(t)}),this._elements=t(this._elements)},update:function(e){var n=this,r=this._settings,o=e||r.container.querySelectorAll(r.elements_selector);this._elements=t(Array.prototype.slice.call(o)),!_&&this._observer?this._elements.forEach(function(t){n._observer.observe(t)}):this.loadAll()},destroy:function(){var e=this;this._observer&&(t(this._elements).forEach(function(t){e._observer.unobserve(t)}),this._observer=null),this._elements=null,this._settings=null},load:function(t,n){e(t,this._settings,n)}},f&&function(t,e){if(e)if(e.length)for(var n,r=0;n=e[r];r+=1)u(t,n);else u(t,e)}(T,window.lazyLoadOptions),T});
 //# sourceMappingURL=lazyload.min.js.map

package.json

 {
 	"name": "vanilla-lazyload",
-	"version": "10.16.1",
+	"version": "10.16.2",
 	"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

@@ -22,3 +22,3 @@ LazyLoad is a fast, lightweight and flexible script that _speeds up your web application_ by **loading images, video or iframes as they enter the viewport**. It's written in plain "vanilla" JavaScript, uses [Intersection Observers](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API), and 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).
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.15.0/lazyload.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.15.2/lazyload.min.js"></script>
 ```
@@ -29,3 +29,3 @@
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.16.1/lazyload.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.16.2/lazyload.min.js"></script>
 ```
@@ -50,3 +50,3 @@
     var s = d.createElement("script"); 
-    var v = !("IntersectionObserver" in w) ? "8.15.0" : "10.16.1";
+    var v = !("IntersectionObserver" in w) ? "8.15.2" : "10.16.2";
     s.async = true; // This includes the script as async. See the "recipes" section for more information about async loading of LazyLoad.
@@ -69,3 +69,3 @@ s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
 ```js
-define("vanilla-lazyLoad", ["https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.15.0/lazyload.amd.min.js"], function (LazyLoad) {
+define("vanilla-lazyLoad", ["https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.15.2/lazyload.amd.min.js"], function (LazyLoad) {
     return LazyLoad;
@@ -78,3 +78,3 @@ });
 ```js
-var v = !("IntersectionObserver" in window) ? "8.15.0" : "10.16.1";
+var v = !("IntersectionObserver" in window) ? "8.15.2" : "10.16.2";
 define("vanilla-lazyLoad", ["https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.amd.min.js"], function (LazyLoad) {
@@ -94,3 +94,3 @@ return LazyLoad;
 ```
-npm install vanilla-lazyload@8.15.0
+npm install vanilla-lazyload@8.15.2
 ```
@@ -101,3 +101,3 @@
 ```
-npm install vanilla-lazyload@10.16.1
+npm install vanilla-lazyload@10.16.2
 ```
@@ -736,3 +736,3 @@
 | `to_webp`           | A boolean flag that activates the dynamic switch to WEBP feature. [More info](#switch-to-webp).                                                                                                                                                                                                                                                                       | `false`       |
-| `load_delay`        | [**Available only in version 10.16.1-beta**] The time (in milliseconds) each image needs to stay inside the viewport before its loading begins.                                                                                                                                                                                                                       | `0`           |
+| `load_delay`        | [**Available only in version 10.16.2-beta**] The time (in milliseconds) each image needs to stay inside the viewport before its loading begins.                                                                                                                                                                                                                       | `0`           |
 | `callback_enter`    | A function to be called when the DOM element enters the viewport.                                                                                                                                                                                                                                                                                                     | `null`        |
@@ -739,0 +739,0 @@ | `callback_set`      | A function to be called after the src of an image is set in the DOM.                                                                                                                                                                                                                                                                                                  | `null`        |

src/lazyload.reveal.js

@@ -8,43 +8,8 @@ import { setSources } from "./lazyload.setSources";
 } from "./lazyload.data";
-import { addClass, removeClass } from "./lazyload.class";
+import { addOneShotEventListeners } from "./lazyload.event";
+import { addClass } from "./lazyload.class";
+import { callbackIfSet } from "./lazyload.callback";
 
 const managedTags = ["IMG", "IFRAME", "VIDEO"];
 
-const callCallback = function(callback, argument) {
-	if (callback) {
-		callback(argument);
-	}
-};
-
-const loadString = "load";
-const errorString = "error";
-
-const removeListeners = function(element, loadHandler, errorHandler) {
-	element.removeEventListener(loadString, loadHandler);
-	element.removeEventListener(errorString, errorHandler);
-};
-
-const addOneShotListeners = function(element, settings) {
-	const onLoad = event => {
-		onEvent(event, true, settings);
-		removeListeners(element, onLoad, onError);
-	};
-	const onError = event => {
-		onEvent(event, false, settings);
-		removeListeners(element, onLoad, onError);
-	};
-	element.addEventListener(loadString, onLoad);
-	element.addEventListener(errorString, onError);
-};
-
-const onEvent = function(event, success, settings) {
-	const element = event.target;
-	removeClass(element, settings.class_loading);
-	addClass(element, success ? settings.class_loaded : settings.class_error); // Setting loaded or error class
-	callCallback(
-		success ? settings.callback_load : settings.callback_error,
-		element
-	);
-};
-
 export const loadAndUnobserve = (element, observer, settings) => {
@@ -81,5 +46,5 @@ revealElement(element, settings);
 	}
-	callCallback(settings.callback_enter, element);
+	callbackIfSet(settings.callback_enter, element);
 	if (managedTags.indexOf(element.tagName) > -1) {
-		addOneShotListeners(element, settings);
+		addOneShotEventListeners(element, settings);
 		addClass(element, settings.class_loading);
@@ -89,3 +54,3 @@ }
 	setWasProcessedData(element);
-	callCallback(settings.callback_set, element);
+	callbackIfSet(settings.callback_set, element);
 }

No alert changes

Improved metrics

Total package byte prevSize

1119129

increased by0.81%

Number of package files

156

increased by1.3%

Lines of code

2354

increased by2.97%

No dependency changes