vanilla-lazyload - npm Package Compare versions

Comparing version 8.16.0 to 8.17.0

CHANGELOG.md

@@ -5,2 +5,7 @@ # CHANGELOG
 
+#### 10.19.0
+
+- Added the ability to know when all images have been downloaded through the `callback_finish` callback.
+- Added the file `demos/print.html` to demo how to print lazy images.
+
 #### 10.18.0
@@ -170,2 +175,7 @@
 
+#### 8.17.0
+
+- Added the ability to know when all images have been downloaded through the `callback_finish` callback.
+- Added the file `demos/print.html` to demo how to print lazy images.
+
 #### 8.16.0
@@ -172,0 +182,0 @@

dist/lazyload.amd.js

@@ -24,4 +24,4 @@ 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; };
 			callback_set: null,
-			callback_processed: null,
 			callback_enter: null,
+			callback_finish: null,
 			to_webp: false
@@ -31,2 +31,39 @@ };
 
+	var dataPrefix = "data-";
+	var processedDataName = "was-processed";
+	var processedDataValue = "true";
+
+	var getData = function getData(element, attribute) {
+		return element.getAttribute(dataPrefix + attribute);
+	};
+
+	var setData = function setData(element, attribute, value) {
+		var attrName = dataPrefix + attribute;
+		if (value === null) {
+			element.removeAttribute(attrName);
+			return;
+		}
+		element.setAttribute(attrName, value);
+	};
+
+	var setWasProcessedData = function setWasProcessedData(element) {
+		return setData(element, processedDataName, processedDataValue);
+	};
+
+	var getWasProcessedData = function getWasProcessedData(element) {
+		return getData(element, processedDataName) === processedDataValue;
+	};
+
+	var purgeProcessedElements = function purgeProcessedElements(elements) {
+		return elements.filter(function (element) {
+			return !getWasProcessedData(element);
+		});
+	};
+
+	var purgeOneElement = function purgeOneElement(elements, elementToPurge) {
+		return elements.filter(function (element) {
+			return element !== elementToPurge;
+		});
+	};
+
 	var getTopOffset = function getTopOffset(element) {
@@ -136,27 +173,2 @@ return element.getBoundingClientRect().top + window.pageYOffset - element.ownerDocument.documentElement.clientTop;
 
-	var dataPrefix = "data-";
-	var processedDataName = "was-processed";
-	var processedDataValue = "true";
-
-	var getData = function getData(element, attribute) {
-		return element.getAttribute(dataPrefix + attribute);
-	};
-
-	var setData = function setData(element, attribute, value) {
-		var attrName = dataPrefix + attribute;
-		if (value === null) {
-			element.removeAttribute(attrName);
-			return;
-		}
-		element.setAttribute(attrName, value);
-	};
-
-	var setWasProcessedData = function setWasProcessedData(element) {
-		return setData(element, processedDataName, processedDataValue);
-	};
-
-	var getWasProcessedData = function getWasProcessedData(element) {
-		return getData(element, processedDataName) === processedDataValue;
-	};
-
 	var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName, toWebpFlag) {
@@ -231,3 +243,4 @@ for (var i = 0, childTag; childTag = parentTag.children[i]; i += 1) {
 
-	var setSources = function setSources(element, settings) {
+	var setSources = function setSources(element, instance) {
+		var settings = instance._settings;
 		var tagName = element.tagName;
@@ -237,2 +250,4 @@ var setSourcesFunction = setSourcesFunctions[tagName];
 			setSourcesFunction(element, settings);
+			instance._updateLoadingCount(1);
+			instance._elements = purgeOneElement(instance._elements, element);
 			return;
@@ -273,3 +288,4 @@ }
 
-	var eventHandler = function eventHandler(event, success, settings) {
+	var eventHandler = function eventHandler(event, success, instance) {
+		var settings = instance._settings;
 		var className = success ? settings.class_loaded : settings.class_error;
@@ -282,11 +298,13 @@ var callback = success ? settings.callback_load : settings.callback_error;
 		callbackIfSet(callback, element);
+
+		instance._updateLoadingCount(-1);
 	};
 
-	var addOneShotEventListeners = function addOneShotEventListeners(element, settings) {
+	var addOneShotEventListeners = function addOneShotEventListeners(element, instance) {
 		var loadHandler = function loadHandler(event) {
-			eventHandler(event, true, settings);
+			eventHandler(event, true, instance);
 			removeAllEventListeners(element, loadHandler, errorHandler);
 		};
 		var errorHandler = function errorHandler(event) {
-			eventHandler(event, false, settings);
+			eventHandler(event, false, instance);
 			removeAllEventListeners(element, loadHandler, errorHandler);
@@ -299,3 +317,4 @@ };
 
-	function revealElement(element, settings, force) {
+	function revealElement(element, instance, force) {
+		var settings = instance._settings;
 		if (!force && getWasProcessedData(element)) {
@@ -306,6 +325,6 @@ return; // element has already been processed and force wasn't true
 		if (managedTags.indexOf(element.tagName) > -1) {
-			addOneShotEventListeners(element, settings);
+			addOneShotEventListeners(element, instance);
 			addClass(element, settings.class_loading);
 		}
-		setSources(element, settings);
+		setSources(element, instance);
 		setWasProcessedData(element);
@@ -327,2 +346,3 @@ callbackIfSet(settings.callback_set, element);
 		this._settings = _extends({}, getDefaultSettings(), instanceSettings);
+		this._loadingCount = 0;
 		this._queryOriginNode = this._settings.container === window ? document : this._settings.container;
@@ -364,3 +384,3 @@
 
-				if (isBot || forceDownload || isInsideViewport(element, settings.container, settings.threshold)) {
+				if (forceDownload || isInsideViewport(element, settings.container, settings.threshold)) {
 					if (isFirstLoop) {
@@ -378,16 +398,2 @@ addClass(element, settings.class_initial);
 
-		_purgeElements: function _purgeElements() {
-			var elements = this._elements,
-			    elementsLength = elements.length;
-			var i = void 0,
-			    processedIndexes = [];
-
-			for (i = 0; i < elementsLength; i++) {
-				if (getWasProcessedData(elements[i])) {
-					processedIndexes.push(i);
-				}
-			}
-			removeFromArray(elements, processedIndexes);
-		},
-
 		_startScrollHandler: function _startScrollHandler() {
@@ -407,2 +413,9 @@ if (!this._isHandlingScroll) {
 
+		_updateLoadingCount: function _updateLoadingCount(plusMinus) {
+			this._loadingCount += plusMinus;
+			if (this._elements.length === 0 && this._loadingCount === 0) {
+				callbackIfSet(this._settings.callback_finish);
+			}
+		},
+
 		handleScroll: function handleScroll() {
@@ -437,6 +450,14 @@ var throttle = this._settings.throttle;
 
-		update: function update() {
-			// Converts to array the nodeset obtained querying the DOM from _queryOriginNode with elements_selector
-			this._elements = Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector));
-			this._purgeElements();
+		update: function update(elements) {
+			var settings = this._settings;
+			var nodeSet = elements || this._queryOriginNode.querySelectorAll(settings.elements_selector);
+
+			this._elements = purgeProcessedElements(Array.prototype.slice.call(nodeSet) // NOTE: nodeset to array for IE compatibility
+			);
+
+			if (isBot) {
+				this.loadAll();
+				return;
+			}
+
 			this._loopThroughElements();
@@ -459,3 +480,3 @@ this._startScrollHandler();
 		load: function load(element, force) {
-			revealElement(element, this._settings, force);
+			revealElement(element, this, force);
 		}
@@ -462,0 +483,0 @@ };

dist/lazyload.amd.min.js

@@ -1,2 +0,2 @@
-var _extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t};define(function(){"use strict";function t(t,e,n){return!(o(t,e,n)||l(t,e,n)||r(t,e,n)||a(t,e,n))}function e(t,e,n){!n&&b(t)||(y(e.callback_enter,t),C.indexOf(t.tagName)>-1&&(A(t,e),p(t,e.class_loading)),S(t,e),v(t),y(e.callback_set,t))}var n=function(){return{elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_processed:null,callback_enter:null,to_webp:!1}},i=function(t){return t.getBoundingClientRect().top+window.pageYOffset-t.ownerDocument.documentElement.clientTop},o=function(t,e,n){return(e===window?window.innerHeight+window.pageYOffset:i(e)+e.offsetHeight)<=i(t)-n},s=function(t){return t.getBoundingClientRect().left+window.pageXOffset-t.ownerDocument.documentElement.clientLeft},r=function(t,e,n){var i=window.innerWidth;return(e===window?i+window.pageXOffset:s(e)+i)<=s(t)-n},l=function(t,e,n){return(e===window?window.pageYOffset:i(e))>=i(t)+n+t.offsetHeight},a=function(t,e,n){return(e===window?window.pageXOffset:s(e))>=s(t)+n+t.offsetWidth},c=function(t,e){var n,i=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(n)},u=function(t,e){return e?t.replace(/\.(jpe?g|png)/gi,".webp"):t},d="undefined"!=typeof window,_=d&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),h=d&&"classList"in document.createElement("p"),f=d&&function(){var t=document.createElement("canvas");return!(!t.getContext||!t.getContext("2d"))&&0===t.toDataURL("image/webp").indexOf("data:image/webp")}(),p=function(t,e){h?t.classList.add(e):t.className+=(t.className?" ":"")+e},g=function(t,e){h?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},m=function(t,e){return t.getAttribute("data-"+e)},w=function(t,e,n){var i="data-"+e;null!==n?t.setAttribute(i,n):t.removeAttribute(i)},v=function(t){return w(t,"was-processed","true")},b=function(t){return"true"===m(t,"was-processed")},E=function(t,e,n,i){for(var o,s=0;o=t.children[s];s+=1)if("SOURCE"===o.tagName){var r=m(o,n);T(o,e,r,i)}},T=function(t,e,n,i){n&&t.setAttribute(e,u(n,i))},L=function(t,e){var n=f&&e.to_webp,i=m(t,e.data_src),o=m(t,e.data_bg);if(i){var s=u(i,n);t.style.backgroundImage='url("'+s+'")'}if(o){var r=u(o,n);t.style.backgroundImage=r}},O={IMG:function(t,e){var n=f&&e.to_webp,i=e.data_srcset,o=t.parentNode;o&&"PICTURE"===o.tagName&&E(o,"srcset",i,n);var s=m(t,e.data_sizes);T(t,"sizes",s);var r=m(t,i);T(t,"srcset",r,n);var l=m(t,e.data_src);T(t,"src",l,n)},IFRAME:function(t,e){var n=m(t,e.data_src);T(t,"src",n)},VIDEO:function(t,e){var n=e.data_src,i=m(t,n);E(t,"src",n),T(t,"src",i),t.load()}},S=function(t,e){var n=t.tagName,i=O[n];i?i(t,e):L(t,e)},y=function(t,e){t&&t(e)},H=function(t,e,n){t.addEventListener(e,n)},k=function(t,e,n){t.removeEventListener(e,n)},N=function(t,e,n){H(t,"load",e),H(t,"loadeddata",e),H(t,"error",n)},z=function(t,e,n){k(t,"load",e),k(t,"loadeddata",e),k(t,"error",n)},I=function(t,e,n){var i=e?n.class_loaded:n.class_error,o=e?n.callback_load:n.callback_error,s=t.target;g(s,n.class_loading),p(s,i),y(o,s)},A=function(t,e){var n=function n(o){I(o,!0,e),z(t,n,i)},i=function i(o){I(o,!1,e),z(t,n,i)};N(t,n,i)},C=["IMG","IFRAME","VIDEO"],R=function(t,e){for(;e.length;)t.splice(e.pop(),1)},x=function(t){this._settings=_extends({},n(),t),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};return x.prototype={_loopThroughElements:function(e){var n=this._settings,i=this._elements,o=i?i.length:0,s=void 0,r=[],l=this._isFirstLoop;if(l&&(this._isFirstLoop=!1),0!==o){for(s=0;s<o;s++){var a=i[s];n.skip_invisible&&null===a.offsetParent||(_||e||t(a,n.container,n.threshold))&&(l&&p(a,n.class_initial),this.load(a),r.push(s))}R(i,r)}else this._stopScrollHandler()},_purgeElements:function(){var t=this._elements,e=t.length,n=void 0,i=[];for(n=0;n<e;n++)b(t[n])&&i.push(n);R(t,i)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var t=this._settings.throttle;if(0!==t){var e=Date.now(),n=t-(e-this._previousLoopTime);n<=0||n>t?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=e,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},loadAll:function(){this._loopThroughElements(!0)},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},load:function(t,n){e(t,this._settings,n)}},d&&function(t,e){if(e)if(e.length)for(var n,i=0;n=e[i];i+=1)c(t,n);else c(t,e)}(x,window.lazyLoadOptions),x});
+var _extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t};define(function(){"use strict";function t(t,e,n){return!(u(t,e,n)||f(t,e,n)||_(t,e,n)||h(t,e,n))}function e(t,e,n){var i=e._settings;!n&&r(t)||(C(i.callback_enter,t),x.indexOf(t.tagName)>-1&&(R(t,e),E(t,i.class_loading)),H(t,e),s(t),C(i.callback_set,t))}var n=function(){return{elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_enter:null,callback_finish:null,to_webp:!1}},i=function(t,e){return t.getAttribute("data-"+e)},o=function(t,e,n){var i="data-"+e;null!==n?t.setAttribute(i,n):t.removeAttribute(i)},s=function(t){return o(t,"was-processed","true")},r=function(t){return"true"===i(t,"was-processed")},l=function(t){return t.filter(function(t){return!r(t)})},a=function(t,e){return t.filter(function(t){return t!==e})},c=function(t){return t.getBoundingClientRect().top+window.pageYOffset-t.ownerDocument.documentElement.clientTop},u=function(t,e,n){return(e===window?window.innerHeight+window.pageYOffset:c(e)+e.offsetHeight)<=c(t)-n},d=function(t){return t.getBoundingClientRect().left+window.pageXOffset-t.ownerDocument.documentElement.clientLeft},_=function(t,e,n){var i=window.innerWidth;return(e===window?i+window.pageXOffset:d(e)+i)<=d(t)-n},f=function(t,e,n){return(e===window?window.pageYOffset:c(e))>=c(t)+n+t.offsetHeight},h=function(t,e,n){return(e===window?window.pageXOffset:d(e))>=d(t)+n+t.offsetWidth},g=function(t,e){var n,i=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(n)},p=function(t,e){return e?t.replace(/\.(jpe?g|png)/gi,".webp"):t},m="undefined"!=typeof window,w=m&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),v=m&&"classList"in document.createElement("p"),b=m&&function(){var t=document.createElement("canvas");return!(!t.getContext||!t.getContext("2d"))&&0===t.toDataURL("image/webp").indexOf("data:image/webp")}(),E=function(t,e){v?t.classList.add(e):t.className+=(t.className?" ":"")+e},L=function(t,e){v?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},T=function(t,e,n,o){for(var s,r=0;s=t.children[r];r+=1)if("SOURCE"===s.tagName){var l=i(s,n);O(s,e,l,o)}},O=function(t,e,n,i){n&&t.setAttribute(e,p(n,i))},S=function(t,e){var n=b&&e.to_webp,o=i(t,e.data_src),s=i(t,e.data_bg);if(o){var r=p(o,n);t.style.backgroundImage='url("'+r+'")'}if(s){var l=p(s,n);t.style.backgroundImage=l}},y={IMG:function(t,e){var n=b&&e.to_webp,o=e.data_srcset,s=t.parentNode;s&&"PICTURE"===s.tagName&&T(s,"srcset",o,n);var r=i(t,e.data_sizes);O(t,"sizes",r);var l=i(t,o);O(t,"srcset",l,n);var a=i(t,e.data_src);O(t,"src",a,n)},IFRAME:function(t,e){var n=i(t,e.data_src);O(t,"src",n)},VIDEO:function(t,e){var n=e.data_src,o=i(t,n);T(t,"src",n),O(t,"src",o),t.load()}},H=function(t,e){var n=e._settings,i=t.tagName,o=y[i];if(o)return o(t,n),e._updateLoadingCount(1),void(e._elements=a(e._elements,t));S(t,n)},C=function(t,e){t&&t(e)},k=function(t,e,n){t.addEventListener(e,n)},N=function(t,e,n){t.removeEventListener(e,n)},z=function(t,e,n){k(t,"load",e),k(t,"loadeddata",e),k(t,"error",n)},A=function(t,e,n){N(t,"load",e),N(t,"loadeddata",e),N(t,"error",n)},I=function(t,e,n){var i=n._settings,o=e?i.class_loaded:i.class_error,s=e?i.callback_load:i.callback_error,r=t.target;L(r,i.class_loading),E(r,o),C(s,r),n._updateLoadingCount(-1)},R=function(t,e){var n=function n(o){I(o,!0,e),A(t,n,i)},i=function i(o){I(o,!1,e),A(t,n,i)};z(t,n,i)},x=["IMG","IFRAME","VIDEO"],D=function(t,e){for(;e.length;)t.splice(e.pop(),1)},F=function(t){this._settings=_extends({},n(),t),this._loadingCount=0,this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};return F.prototype={_loopThroughElements:function(e){var n=this._settings,i=this._elements,o=i?i.length:0,s=void 0,r=[],l=this._isFirstLoop;if(l&&(this._isFirstLoop=!1),0!==o){for(s=0;s<o;s++){var a=i[s];n.skip_invisible&&null===a.offsetParent||(e||t(a,n.container,n.threshold))&&(l&&E(a,n.class_initial),this.load(a),r.push(s))}D(i,r)}else this._stopScrollHandler()},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},_updateLoadingCount:function(t){this._loadingCount+=t,0===this._elements.length&&0===this._loadingCount&&C(this._settings.callback_finish)},handleScroll:function(){var t=this._settings.throttle;if(0!==t){var e=Date.now(),n=t-(e-this._previousLoopTime);n<=0||n>t?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=e,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},loadAll:function(){this._loopThroughElements(!0)},update:function(t){var e=this._settings,n=t||this._queryOriginNode.querySelectorAll(e.elements_selector);this._elements=l(Array.prototype.slice.call(n)),w?this.loadAll():(this._loopThroughElements(),this._startScrollHandler())},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},load:function(t,n){e(t,this,n)}},m&&function(t,e){if(e)if(e.length)for(var n,i=0;n=e[i];i+=1)g(t,n);else g(t,e)}(F,window.lazyLoadOptions),F});
 //# sourceMappingURL=lazyload.amd.min.js.map

dist/lazyload.es2015.js

@@ -18,7 +18,38 @@ var getDefaultSettings = () => ({
 	callback_set: null,
-	callback_processed: null,
 	callback_enter: null,
+	callback_finish: null,
 	to_webp: false
 });
 
+const dataPrefix = "data-";
+const processedDataName = "was-processed";
+const processedDataValue = "true";
+
+const getData = (element, attribute) => {
+	return element.getAttribute(dataPrefix + attribute);
+};
+
+const setData = (element, attribute, value) => {
+	var attrName = dataPrefix + attribute;
+	if (value === null) {
+		element.removeAttribute(attrName);
+		return;
+	}
+	element.setAttribute(attrName, value);
+};
+
+const setWasProcessedData = element =>
+	setData(element, processedDataName, processedDataValue);
+
+const getWasProcessedData = element =>
+	getData(element, processedDataName) === processedDataValue;
+
+const purgeProcessedElements = elements => {
+	return elements.filter(element => !getWasProcessedData(element));
+};
+
+const purgeOneElement = (elements, elementToPurge) => {
+	return elements.filter(element => element !== elementToPurge);
+};
+
 const getTopOffset = function(element) {
@@ -154,25 +185,2 @@ return (
 
-const dataPrefix = "data-";
-const processedDataName = "was-processed";
-const processedDataValue = "true";
-
-const getData = (element, attribute) => {
-	return element.getAttribute(dataPrefix + attribute);
-};
-
-const setData = (element, attribute, value) => {
-	var attrName = dataPrefix + attribute;
-	if (value === null) {
-		element.removeAttribute(attrName);
-		return;
-	}
-	element.setAttribute(attrName, value);
-};
-
-const setWasProcessedData = element =>
-	setData(element, processedDataName, processedDataValue);
-
-const getWasProcessedData = element =>
-	getData(element, processedDataName) === processedDataValue;
-
 const setSourcesInChildren = function(
@@ -257,3 +265,4 @@ parentTag,
 
-const setSources = (element, settings) => {
+const setSources = (element, instance) => {
+	const settings = instance._settings;
 	const tagName = element.tagName;
@@ -263,2 +272,4 @@ const setSourcesFunction = setSourcesFunctions[tagName];
 		setSourcesFunction(element, settings);
+		instance._updateLoadingCount(1);
+		instance._elements = purgeOneElement(instance._elements, element);
 		return;
@@ -299,3 +310,4 @@ }
 
-const eventHandler = function(event, success, settings) {
+const eventHandler = function(event, success, instance) {
+	var settings = instance._settings;
 	const className = success ? settings.class_loaded : settings.class_error;
@@ -308,11 +320,13 @@ const callback = success ? settings.callback_load : settings.callback_error;
 	callbackIfSet(callback, element);
+
+	instance._updateLoadingCount(-1);
 };
 
-const addOneShotEventListeners = (element, settings) => {
+const addOneShotEventListeners = (element, instance) => {
 	const loadHandler = event => {
-		eventHandler(event, true, settings);
+		eventHandler(event, true, instance);
 		removeAllEventListeners(element, loadHandler, errorHandler);
 	};
 	const errorHandler = event => {
-		eventHandler(event, false, settings);
+		eventHandler(event, false, instance);
 		removeAllEventListeners(element, loadHandler, errorHandler);
@@ -325,3 +339,4 @@ };
 
-function revealElement(element, settings, force) {
+function revealElement(element, instance, force) {
+	var settings = instance._settings;
 	if (!force && getWasProcessedData(element)) {
@@ -332,6 +347,6 @@ return; // element has already been processed and force wasn't true
 	if (managedTags.indexOf(element.tagName) > -1) {
-		addOneShotEventListeners(element, settings);
+		addOneShotEventListeners(element, instance);
 		addClass(element, settings.class_loading);
 	}
-	setSources(element, settings);
+	setSources(element, instance);
 	setWasProcessedData(element);
@@ -353,2 +368,3 @@ callbackIfSet(settings.callback_set, element);
 	this._settings = Object.assign({}, getDefaultSettings(), instanceSettings);
+	this._loadingCount = 0;
 	this._queryOriginNode =
@@ -394,3 +410,2 @@ this._settings.container === window
 			if (
-				isBot ||
 				forceDownload ||
@@ -415,16 +430,2 @@ isInsideViewport(
 
-	_purgeElements: function() {
-		const elements = this._elements,
-			elementsLength = elements.length;
-		let i,
-			processedIndexes = [];
-
-		for (i = 0; i < elementsLength; i++) {
-			if (getWasProcessedData(elements[i])) {
-				processedIndexes.push(i);
-			}
-		}
-		removeFromArray(elements, processedIndexes);
-	},
-
 	_startScrollHandler: function() {
@@ -450,2 +451,9 @@ if (!this._isHandlingScroll) {
 
+	_updateLoadingCount: function(plusMinus) {
+		this._loadingCount += plusMinus;
+		if (this._elements.length === 0 && this._loadingCount === 0) {
+			callbackIfSet(this._settings.callback_finish);
+		}
+	},
+
 	handleScroll: function() {
@@ -483,10 +491,17 @@ const throttle = this._settings.throttle;
 
-	update: function() {
-		// Converts to array the nodeset obtained querying the DOM from _queryOriginNode with elements_selector
-		this._elements = Array.prototype.slice.call(
-			this._queryOriginNode.querySelectorAll(
-				this._settings.elements_selector
-			)
+	update: function(elements) {
+		const settings = this._settings;
+		const nodeSet =
+			elements ||
+			this._queryOriginNode.querySelectorAll(settings.elements_selector);
+
+		this._elements = purgeProcessedElements(
+			Array.prototype.slice.call(nodeSet) // NOTE: nodeset to array for IE compatibility
 		);
-		this._purgeElements();
+
+		if (isBot) {
+			this.loadAll();
+			return;
+		}
+
 		this._loopThroughElements();
@@ -509,3 +524,3 @@ this._startScrollHandler();
 	load: function(element, force) {
-		revealElement(element, this._settings, force);
+		revealElement(element, this, force);
 	}
@@ -512,0 +527,0 @@ };

dist/lazyload.iife.js

@@ -24,4 +24,4 @@ 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; };
 			callback_set: null,
-			callback_processed: null,
 			callback_enter: null,
+			callback_finish: null,
 			to_webp: false
@@ -31,2 +31,39 @@ };
 
+	var dataPrefix = "data-";
+	var processedDataName = "was-processed";
+	var processedDataValue = "true";
+
+	var getData = function getData(element, attribute) {
+		return element.getAttribute(dataPrefix + attribute);
+	};
+
+	var setData = function setData(element, attribute, value) {
+		var attrName = dataPrefix + attribute;
+		if (value === null) {
+			element.removeAttribute(attrName);
+			return;
+		}
+		element.setAttribute(attrName, value);
+	};
+
+	var setWasProcessedData = function setWasProcessedData(element) {
+		return setData(element, processedDataName, processedDataValue);
+	};
+
+	var getWasProcessedData = function getWasProcessedData(element) {
+		return getData(element, processedDataName) === processedDataValue;
+	};
+
+	var purgeProcessedElements = function purgeProcessedElements(elements) {
+		return elements.filter(function (element) {
+			return !getWasProcessedData(element);
+		});
+	};
+
+	var purgeOneElement = function purgeOneElement(elements, elementToPurge) {
+		return elements.filter(function (element) {
+			return element !== elementToPurge;
+		});
+	};
+
 	var getTopOffset = function getTopOffset(element) {
@@ -136,27 +173,2 @@ return element.getBoundingClientRect().top + window.pageYOffset - element.ownerDocument.documentElement.clientTop;
 
-	var dataPrefix = "data-";
-	var processedDataName = "was-processed";
-	var processedDataValue = "true";
-
-	var getData = function getData(element, attribute) {
-		return element.getAttribute(dataPrefix + attribute);
-	};
-
-	var setData = function setData(element, attribute, value) {
-		var attrName = dataPrefix + attribute;
-		if (value === null) {
-			element.removeAttribute(attrName);
-			return;
-		}
-		element.setAttribute(attrName, value);
-	};
-
-	var setWasProcessedData = function setWasProcessedData(element) {
-		return setData(element, processedDataName, processedDataValue);
-	};
-
-	var getWasProcessedData = function getWasProcessedData(element) {
-		return getData(element, processedDataName) === processedDataValue;
-	};
-
 	var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName, toWebpFlag) {
@@ -231,3 +243,4 @@ for (var i = 0, childTag; childTag = parentTag.children[i]; i += 1) {
 
-	var setSources = function setSources(element, settings) {
+	var setSources = function setSources(element, instance) {
+		var settings = instance._settings;
 		var tagName = element.tagName;
@@ -237,2 +250,4 @@ var setSourcesFunction = setSourcesFunctions[tagName];
 			setSourcesFunction(element, settings);
+			instance._updateLoadingCount(1);
+			instance._elements = purgeOneElement(instance._elements, element);
 			return;
@@ -273,3 +288,4 @@ }
 
-	var eventHandler = function eventHandler(event, success, settings) {
+	var eventHandler = function eventHandler(event, success, instance) {
+		var settings = instance._settings;
 		var className = success ? settings.class_loaded : settings.class_error;
@@ -282,11 +298,13 @@ var callback = success ? settings.callback_load : settings.callback_error;
 		callbackIfSet(callback, element);
+
+		instance._updateLoadingCount(-1);
 	};
 
-	var addOneShotEventListeners = function addOneShotEventListeners(element, settings) {
+	var addOneShotEventListeners = function addOneShotEventListeners(element, instance) {
 		var loadHandler = function loadHandler(event) {
-			eventHandler(event, true, settings);
+			eventHandler(event, true, instance);
 			removeAllEventListeners(element, loadHandler, errorHandler);
 		};
 		var errorHandler = function errorHandler(event) {
-			eventHandler(event, false, settings);
+			eventHandler(event, false, instance);
 			removeAllEventListeners(element, loadHandler, errorHandler);
@@ -299,3 +317,4 @@ };
 
-	function revealElement(element, settings, force) {
+	function revealElement(element, instance, force) {
+		var settings = instance._settings;
 		if (!force && getWasProcessedData(element)) {
@@ -306,6 +325,6 @@ return; // element has already been processed and force wasn't true
 		if (managedTags.indexOf(element.tagName) > -1) {
-			addOneShotEventListeners(element, settings);
+			addOneShotEventListeners(element, instance);
 			addClass(element, settings.class_loading);
 		}
-		setSources(element, settings);
+		setSources(element, instance);
 		setWasProcessedData(element);
@@ -327,2 +346,3 @@ callbackIfSet(settings.callback_set, element);
 		this._settings = _extends({}, getDefaultSettings(), instanceSettings);
+		this._loadingCount = 0;
 		this._queryOriginNode = this._settings.container === window ? document : this._settings.container;
@@ -364,3 +384,3 @@
 
-				if (isBot || forceDownload || isInsideViewport(element, settings.container, settings.threshold)) {
+				if (forceDownload || isInsideViewport(element, settings.container, settings.threshold)) {
 					if (isFirstLoop) {
@@ -378,16 +398,2 @@ addClass(element, settings.class_initial);
 
-		_purgeElements: function _purgeElements() {
-			var elements = this._elements,
-			    elementsLength = elements.length;
-			var i = void 0,
-			    processedIndexes = [];
-
-			for (i = 0; i < elementsLength; i++) {
-				if (getWasProcessedData(elements[i])) {
-					processedIndexes.push(i);
-				}
-			}
-			removeFromArray(elements, processedIndexes);
-		},
-
 		_startScrollHandler: function _startScrollHandler() {
@@ -407,2 +413,9 @@ if (!this._isHandlingScroll) {
 
+		_updateLoadingCount: function _updateLoadingCount(plusMinus) {
+			this._loadingCount += plusMinus;
+			if (this._elements.length === 0 && this._loadingCount === 0) {
+				callbackIfSet(this._settings.callback_finish);
+			}
+		},
+
 		handleScroll: function handleScroll() {
@@ -437,6 +450,14 @@ var throttle = this._settings.throttle;
 
-		update: function update() {
-			// Converts to array the nodeset obtained querying the DOM from _queryOriginNode with elements_selector
-			this._elements = Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector));
-			this._purgeElements();
+		update: function update(elements) {
+			var settings = this._settings;
+			var nodeSet = elements || this._queryOriginNode.querySelectorAll(settings.elements_selector);
+
+			this._elements = purgeProcessedElements(Array.prototype.slice.call(nodeSet) // NOTE: nodeset to array for IE compatibility
+			);
+
+			if (isBot) {
+				this.loadAll();
+				return;
+			}
+
 			this._loopThroughElements();
@@ -459,3 +480,3 @@ this._startScrollHandler();
 		load: function load(element, force) {
-			revealElement(element, this._settings, force);
+			revealElement(element, this, force);
 		}
@@ -462,0 +483,0 @@ };

dist/lazyload.iife.min.js

@@ -1,2 +0,2 @@
-var _extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},LazyLoad=function(){"use strict";function t(t,e,n){return!(o(t,e,n)||l(t,e,n)||r(t,e,n)||a(t,e,n))}function e(t,e,n){!n&&b(t)||(S(e.callback_enter,t),C.indexOf(t.tagName)>-1&&(A(t,e),p(t,e.class_loading)),O(t,e),v(t),S(e.callback_set,t))}var n=function(){return{elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_processed:null,callback_enter:null,to_webp:!1}},i=function(t){return t.getBoundingClientRect().top+window.pageYOffset-t.ownerDocument.documentElement.clientTop},o=function(t,e,n){return(e===window?window.innerHeight+window.pageYOffset:i(e)+e.offsetHeight)<=i(t)-n},s=function(t){return t.getBoundingClientRect().left+window.pageXOffset-t.ownerDocument.documentElement.clientLeft},r=function(t,e,n){var i=window.innerWidth;return(e===window?i+window.pageXOffset:s(e)+i)<=s(t)-n},l=function(t,e,n){return(e===window?window.pageYOffset:i(e))>=i(t)+n+t.offsetHeight},a=function(t,e,n){return(e===window?window.pageXOffset:s(e))>=s(t)+n+t.offsetWidth},c=function(t,e){var n,i=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(n)},u=function(t,e){return e?t.replace(/\.(jpe?g|png)/gi,".webp"):t},d="undefined"!=typeof window,_=d&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),h=d&&"classList"in document.createElement("p"),f=d&&function(){var t=document.createElement("canvas");return!(!t.getContext||!t.getContext("2d"))&&0===t.toDataURL("image/webp").indexOf("data:image/webp")}(),p=function(t,e){h?t.classList.add(e):t.className+=(t.className?" ":"")+e},g=function(t,e){h?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},m=function(t,e){return t.getAttribute("data-"+e)},w=function(t,e,n){var i="data-"+e;null!==n?t.setAttribute(i,n):t.removeAttribute(i)},v=function(t){return w(t,"was-processed","true")},b=function(t){return"true"===m(t,"was-processed")},E=function(t,e,n,i){for(var o,s=0;o=t.children[s];s+=1)if("SOURCE"===o.tagName){var r=m(o,n);L(o,e,r,i)}},L=function(t,e,n,i){n&&t.setAttribute(e,u(n,i))},T=function(t,e){var n=f&&e.to_webp,i=m(t,e.data_src),o=m(t,e.data_bg);if(i){var s=u(i,n);t.style.backgroundImage='url("'+s+'")'}if(o){var r=u(o,n);t.style.backgroundImage=r}},y={IMG:function(t,e){var n=f&&e.to_webp,i=e.data_srcset,o=t.parentNode;o&&"PICTURE"===o.tagName&&E(o,"srcset",i,n);var s=m(t,e.data_sizes);L(t,"sizes",s);var r=m(t,i);L(t,"srcset",r,n);var l=m(t,e.data_src);L(t,"src",l,n)},IFRAME:function(t,e){var n=m(t,e.data_src);L(t,"src",n)},VIDEO:function(t,e){var n=e.data_src,i=m(t,n);E(t,"src",n),L(t,"src",i),t.load()}},O=function(t,e){var n=t.tagName,i=y[n];i?i(t,e):T(t,e)},S=function(t,e){t&&t(e)},H=function(t,e,n){t.addEventListener(e,n)},k=function(t,e,n){t.removeEventListener(e,n)},z=function(t,e,n){H(t,"load",e),H(t,"loadeddata",e),H(t,"error",n)},N=function(t,e,n){k(t,"load",e),k(t,"loadeddata",e),k(t,"error",n)},I=function(t,e,n){var i=e?n.class_loaded:n.class_error,o=e?n.callback_load:n.callback_error,s=t.target;g(s,n.class_loading),p(s,i),S(o,s)},A=function(t,e){var n=function n(o){I(o,!0,e),N(t,n,i)},i=function i(o){I(o,!1,e),N(t,n,i)};z(t,n,i)},C=["IMG","IFRAME","VIDEO"],R=function(t,e){for(;e.length;)t.splice(e.pop(),1)},x=function(t){this._settings=_extends({},n(),t),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};return x.prototype={_loopThroughElements:function(e){var n=this._settings,i=this._elements,o=i?i.length:0,s=void 0,r=[],l=this._isFirstLoop;if(l&&(this._isFirstLoop=!1),0!==o){for(s=0;s<o;s++){var a=i[s];n.skip_invisible&&null===a.offsetParent||(_||e||t(a,n.container,n.threshold))&&(l&&p(a,n.class_initial),this.load(a),r.push(s))}R(i,r)}else this._stopScrollHandler()},_purgeElements:function(){var t=this._elements,e=t.length,n=void 0,i=[];for(n=0;n<e;n++)b(t[n])&&i.push(n);R(t,i)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var t=this._settings.throttle;if(0!==t){var e=Date.now(),n=t-(e-this._previousLoopTime);n<=0||n>t?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=e,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},loadAll:function(){this._loopThroughElements(!0)},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},load:function(t,n){e(t,this._settings,n)}},d&&function(t,e){if(e)if(e.length)for(var n,i=0;n=e[i];i+=1)c(t,n);else c(t,e)}(x,window.lazyLoadOptions),x}();
+var _extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},LazyLoad=function(){"use strict";function t(t,e,n){return!(u(t,e,n)||h(t,e,n)||_(t,e,n)||f(t,e,n))}function e(t,e,n){var i=e._settings;!n&&r(t)||(C(i.callback_enter,t),x.indexOf(t.tagName)>-1&&(R(t,e),E(t,i.class_loading)),H(t,e),s(t),C(i.callback_set,t))}var n=function(){return{elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_enter:null,callback_finish:null,to_webp:!1}},i=function(t,e){return t.getAttribute("data-"+e)},o=function(t,e,n){var i="data-"+e;null!==n?t.setAttribute(i,n):t.removeAttribute(i)},s=function(t){return o(t,"was-processed","true")},r=function(t){return"true"===i(t,"was-processed")},l=function(t){return t.filter(function(t){return!r(t)})},a=function(t,e){return t.filter(function(t){return t!==e})},c=function(t){return t.getBoundingClientRect().top+window.pageYOffset-t.ownerDocument.documentElement.clientTop},u=function(t,e,n){return(e===window?window.innerHeight+window.pageYOffset:c(e)+e.offsetHeight)<=c(t)-n},d=function(t){return t.getBoundingClientRect().left+window.pageXOffset-t.ownerDocument.documentElement.clientLeft},_=function(t,e,n){var i=window.innerWidth;return(e===window?i+window.pageXOffset:d(e)+i)<=d(t)-n},h=function(t,e,n){return(e===window?window.pageYOffset:c(e))>=c(t)+n+t.offsetHeight},f=function(t,e,n){return(e===window?window.pageXOffset:d(e))>=d(t)+n+t.offsetWidth},g=function(t,e){var n,i=new t(e);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(n)},p=function(t,e){return e?t.replace(/\.(jpe?g|png)/gi,".webp"):t},m="undefined"!=typeof window,w=m&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),v=m&&"classList"in document.createElement("p"),b=m&&function(){var t=document.createElement("canvas");return!(!t.getContext||!t.getContext("2d"))&&0===t.toDataURL("image/webp").indexOf("data:image/webp")}(),E=function(t,e){v?t.classList.add(e):t.className+=(t.className?" ":"")+e},L=function(t,e){v?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},T=function(t,e,n,o){for(var s,r=0;s=t.children[r];r+=1)if("SOURCE"===s.tagName){var l=i(s,n);y(s,e,l,o)}},y=function(t,e,n,i){n&&t.setAttribute(e,p(n,i))},O=function(t,e){var n=b&&e.to_webp,o=i(t,e.data_src),s=i(t,e.data_bg);if(o){var r=p(o,n);t.style.backgroundImage='url("'+r+'")'}if(s){var l=p(s,n);t.style.backgroundImage=l}},S={IMG:function(t,e){var n=b&&e.to_webp,o=e.data_srcset,s=t.parentNode;s&&"PICTURE"===s.tagName&&T(s,"srcset",o,n);var r=i(t,e.data_sizes);y(t,"sizes",r);var l=i(t,o);y(t,"srcset",l,n);var a=i(t,e.data_src);y(t,"src",a,n)},IFRAME:function(t,e){var n=i(t,e.data_src);y(t,"src",n)},VIDEO:function(t,e){var n=e.data_src,o=i(t,n);T(t,"src",n),y(t,"src",o),t.load()}},H=function(t,e){var n=e._settings,i=t.tagName,o=S[i];if(o)return o(t,n),e._updateLoadingCount(1),void(e._elements=a(e._elements,t));O(t,n)},C=function(t,e){t&&t(e)},k=function(t,e,n){t.addEventListener(e,n)},z=function(t,e,n){t.removeEventListener(e,n)},N=function(t,e,n){k(t,"load",e),k(t,"loadeddata",e),k(t,"error",n)},A=function(t,e,n){z(t,"load",e),z(t,"loadeddata",e),z(t,"error",n)},I=function(t,e,n){var i=n._settings,o=e?i.class_loaded:i.class_error,s=e?i.callback_load:i.callback_error,r=t.target;L(r,i.class_loading),E(r,o),C(s,r),n._updateLoadingCount(-1)},R=function(t,e){var n=function n(o){I(o,!0,e),A(t,n,i)},i=function i(o){I(o,!1,e),A(t,n,i)};N(t,n,i)},x=["IMG","IFRAME","VIDEO"],D=function(t,e){for(;e.length;)t.splice(e.pop(),1)},F=function(t){this._settings=_extends({},n(),t),this._loadingCount=0,this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};return F.prototype={_loopThroughElements:function(e){var n=this._settings,i=this._elements,o=i?i.length:0,s=void 0,r=[],l=this._isFirstLoop;if(l&&(this._isFirstLoop=!1),0!==o){for(s=0;s<o;s++){var a=i[s];n.skip_invisible&&null===a.offsetParent||(e||t(a,n.container,n.threshold))&&(l&&E(a,n.class_initial),this.load(a),r.push(s))}D(i,r)}else this._stopScrollHandler()},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},_updateLoadingCount:function(t){this._loadingCount+=t,0===this._elements.length&&0===this._loadingCount&&C(this._settings.callback_finish)},handleScroll:function(){var t=this._settings.throttle;if(0!==t){var e=Date.now(),n=t-(e-this._previousLoopTime);n<=0||n>t?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=e,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},loadAll:function(){this._loopThroughElements(!0)},update:function(t){var e=this._settings,n=t||this._queryOriginNode.querySelectorAll(e.elements_selector);this._elements=l(Array.prototype.slice.call(n)),w?this.loadAll():(this._loopThroughElements(),this._startScrollHandler())},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},load:function(t,n){e(t,this,n)}},m&&function(t,e){if(e)if(e.length)for(var n,i=0;n=e[i];i+=1)g(t,n);else g(t,e)}(F,window.lazyLoadOptions),F}();
 //# sourceMappingURL=lazyload.iife.min.js.map

dist/lazyload.js

@@ -28,4 +28,4 @@ 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; };
 			callback_set: null,
-			callback_processed: null,
 			callback_enter: null,
+			callback_finish: null,
 			to_webp: false
@@ -35,2 +35,39 @@ };
 
+	var dataPrefix = "data-";
+	var processedDataName = "was-processed";
+	var processedDataValue = "true";
+
+	var getData = function getData(element, attribute) {
+		return element.getAttribute(dataPrefix + attribute);
+	};
+
+	var setData = function setData(element, attribute, value) {
+		var attrName = dataPrefix + attribute;
+		if (value === null) {
+			element.removeAttribute(attrName);
+			return;
+		}
+		element.setAttribute(attrName, value);
+	};
+
+	var setWasProcessedData = function setWasProcessedData(element) {
+		return setData(element, processedDataName, processedDataValue);
+	};
+
+	var getWasProcessedData = function getWasProcessedData(element) {
+		return getData(element, processedDataName) === processedDataValue;
+	};
+
+	var purgeProcessedElements = function purgeProcessedElements(elements) {
+		return elements.filter(function (element) {
+			return !getWasProcessedData(element);
+		});
+	};
+
+	var purgeOneElement = function purgeOneElement(elements, elementToPurge) {
+		return elements.filter(function (element) {
+			return element !== elementToPurge;
+		});
+	};
+
 	var getTopOffset = function getTopOffset(element) {
@@ -140,27 +177,2 @@ return element.getBoundingClientRect().top + window.pageYOffset - element.ownerDocument.documentElement.clientTop;
 
-	var dataPrefix = "data-";
-	var processedDataName = "was-processed";
-	var processedDataValue = "true";
-
-	var getData = function getData(element, attribute) {
-		return element.getAttribute(dataPrefix + attribute);
-	};
-
-	var setData = function setData(element, attribute, value) {
-		var attrName = dataPrefix + attribute;
-		if (value === null) {
-			element.removeAttribute(attrName);
-			return;
-		}
-		element.setAttribute(attrName, value);
-	};
-
-	var setWasProcessedData = function setWasProcessedData(element) {
-		return setData(element, processedDataName, processedDataValue);
-	};
-
-	var getWasProcessedData = function getWasProcessedData(element) {
-		return getData(element, processedDataName) === processedDataValue;
-	};
-
 	var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName, toWebpFlag) {
@@ -235,3 +247,4 @@ for (var i = 0, childTag; childTag = parentTag.children[i]; i += 1) {
 
-	var setSources = function setSources(element, settings) {
+	var setSources = function setSources(element, instance) {
+		var settings = instance._settings;
 		var tagName = element.tagName;
@@ -241,2 +254,4 @@ var setSourcesFunction = setSourcesFunctions[tagName];
 			setSourcesFunction(element, settings);
+			instance._updateLoadingCount(1);
+			instance._elements = purgeOneElement(instance._elements, element);
 			return;
@@ -277,3 +292,4 @@ }
 
-	var eventHandler = function eventHandler(event, success, settings) {
+	var eventHandler = function eventHandler(event, success, instance) {
+		var settings = instance._settings;
 		var className = success ? settings.class_loaded : settings.class_error;
@@ -286,11 +302,13 @@ var callback = success ? settings.callback_load : settings.callback_error;
 		callbackIfSet(callback, element);
+
+		instance._updateLoadingCount(-1);
 	};
 
-	var addOneShotEventListeners = function addOneShotEventListeners(element, settings) {
+	var addOneShotEventListeners = function addOneShotEventListeners(element, instance) {
 		var loadHandler = function loadHandler(event) {
-			eventHandler(event, true, settings);
+			eventHandler(event, true, instance);
 			removeAllEventListeners(element, loadHandler, errorHandler);
 		};
 		var errorHandler = function errorHandler(event) {
-			eventHandler(event, false, settings);
+			eventHandler(event, false, instance);
 			removeAllEventListeners(element, loadHandler, errorHandler);
@@ -303,3 +321,4 @@ };
 
-	function revealElement(element, settings, force) {
+	function revealElement(element, instance, force) {
+		var settings = instance._settings;
 		if (!force && getWasProcessedData(element)) {
@@ -310,6 +329,6 @@ return; // element has already been processed and force wasn't true
 		if (managedTags.indexOf(element.tagName) > -1) {
-			addOneShotEventListeners(element, settings);
+			addOneShotEventListeners(element, instance);
 			addClass(element, settings.class_loading);
 		}
-		setSources(element, settings);
+		setSources(element, instance);
 		setWasProcessedData(element);
@@ -331,2 +350,3 @@ callbackIfSet(settings.callback_set, element);
 		this._settings = _extends({}, getDefaultSettings(), instanceSettings);
+		this._loadingCount = 0;
 		this._queryOriginNode = this._settings.container === window ? document : this._settings.container;
@@ -368,3 +388,3 @@
 
-				if (isBot || forceDownload || isInsideViewport(element, settings.container, settings.threshold)) {
+				if (forceDownload || isInsideViewport(element, settings.container, settings.threshold)) {
 					if (isFirstLoop) {
@@ -382,16 +402,2 @@ addClass(element, settings.class_initial);
 
-		_purgeElements: function _purgeElements() {
-			var elements = this._elements,
-			    elementsLength = elements.length;
-			var i = void 0,
-			    processedIndexes = [];
-
-			for (i = 0; i < elementsLength; i++) {
-				if (getWasProcessedData(elements[i])) {
-					processedIndexes.push(i);
-				}
-			}
-			removeFromArray(elements, processedIndexes);
-		},
-
 		_startScrollHandler: function _startScrollHandler() {
@@ -411,2 +417,9 @@ if (!this._isHandlingScroll) {
 
+		_updateLoadingCount: function _updateLoadingCount(plusMinus) {
+			this._loadingCount += plusMinus;
+			if (this._elements.length === 0 && this._loadingCount === 0) {
+				callbackIfSet(this._settings.callback_finish);
+			}
+		},
+
 		handleScroll: function handleScroll() {
@@ -441,6 +454,14 @@ var throttle = this._settings.throttle;
 
-		update: function update() {
-			// Converts to array the nodeset obtained querying the DOM from _queryOriginNode with elements_selector
-			this._elements = Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector));
-			this._purgeElements();
+		update: function update(elements) {
+			var settings = this._settings;
+			var nodeSet = elements || this._queryOriginNode.querySelectorAll(settings.elements_selector);
+
+			this._elements = purgeProcessedElements(Array.prototype.slice.call(nodeSet) // NOTE: nodeset to array for IE compatibility
+			);
+
+			if (isBot) {
+				this.loadAll();
+				return;
+			}
+
 			this._loopThroughElements();
@@ -463,3 +484,3 @@ this._startScrollHandler();
 		load: function load(element, force) {
-			revealElement(element, this._settings, force);
+			revealElement(element, this, force);
 		}
@@ -466,0 +487,0 @@ };

dist/lazyload.min.js

@@ -1,2 +0,2 @@
-var _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},_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,e,n){return!(i(t,e,n)||l(t,e,n)||r(t,e,n)||a(t,e,n))}function e(t,e,n){!n&&b(t)||(O(e.callback_enter,t),A.indexOf(t.tagName)>-1&&(x(t,e),p(t,e.class_loading)),S(t,e),v(t),O(e.callback_set,t))}var n=function(){return{elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_processed:null,callback_enter:null,to_webp:!1}},o=function(t){return t.getBoundingClientRect().top+window.pageYOffset-t.ownerDocument.documentElement.clientTop},i=function(t,e,n){return(e===window?window.innerHeight+window.pageYOffset:o(e)+e.offsetHeight)<=o(t)-n},s=function(t){return t.getBoundingClientRect().left+window.pageXOffset-t.ownerDocument.documentElement.clientLeft},r=function(t,e,n){var o=window.innerWidth;return(e===window?o+window.pageXOffset:s(e)+o)<=s(t)-n},l=function(t,e,n){return(e===window?window.pageYOffset:o(e))>=o(t)+n+t.offsetHeight},a=function(t,e,n){return(e===window?window.pageXOffset:s(e))>=s(t)+n+t.offsetWidth},c=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)},u=function(t,e){return e?t.replace(/\.(jpe?g|png)/gi,".webp"):t},d="undefined"!=typeof window,f=d&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),_=d&&"classList"in document.createElement("p"),h=d&&function(){var t=document.createElement("canvas");return!(!t.getContext||!t.getContext("2d"))&&0===t.toDataURL("image/webp").indexOf("data:image/webp")}(),p=function(t,e){_?t.classList.add(e):t.className+=(t.className?" ":"")+e},g=function(t,e){_?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},m=function(t,e){return t.getAttribute("data-"+e)},w=function(t,e,n){var o="data-"+e;null!==n?t.setAttribute(o,n):t.removeAttribute(o)},v=function(t){return w(t,"was-processed","true")},b=function(t){return"true"===m(t,"was-processed")},y=function(t,e,n,o){for(var i,s=0;i=t.children[s];s+=1)if("SOURCE"===i.tagName){var r=m(i,n);E(i,e,r,o)}},E=function(t,e,n,o){n&&t.setAttribute(e,u(n,o))},L=function(t,e){var n=h&&e.to_webp,o=m(t,e.data_src),i=m(t,e.data_bg);if(o){var s=u(o,n);t.style.backgroundImage='url("'+s+'")'}if(i){var r=u(i,n);t.style.backgroundImage=r}},T={IMG:function(t,e){var n=h&&e.to_webp,o=e.data_srcset,i=t.parentNode;i&&"PICTURE"===i.tagName&&y(i,"srcset",o,n);var s=m(t,e.data_sizes);E(t,"sizes",s);var r=m(t,o);E(t,"srcset",r,n);var l=m(t,e.data_src);E(t,"src",l,n)},IFRAME:function(t,e){var n=m(t,e.data_src);E(t,"src",n)},VIDEO:function(t,e){var n=e.data_src,o=m(t,n);y(t,"src",n),E(t,"src",o),t.load()}},S=function(t,e){var n=t.tagName,o=T[n];o?o(t,e):L(t,e)},O=function(t,e){t&&t(e)},H=function(t,e,n){t.addEventListener(e,n)},k=function(t,e,n){t.removeEventListener(e,n)},z=function(t,e,n){H(t,"load",e),H(t,"loadeddata",e),H(t,"error",n)},N=function(t,e,n){k(t,"load",e),k(t,"loadeddata",e),k(t,"error",n)},I=function(t,e,n){var o=e?n.class_loaded:n.class_error,i=e?n.callback_load:n.callback_error,s=t.target;g(s,n.class_loading),p(s,o),O(i,s)},x=function(t,e){var n=function n(i){I(i,!0,e),N(t,n,o)},o=function o(i){I(i,!1,e),N(t,n,o)};z(t,n,o)},A=["IMG","IFRAME","VIDEO"],C=function(t,e){for(;e.length;)t.splice(e.pop(),1)},R=function(t){this._settings=_extends({},n(),t),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};return R.prototype={_loopThroughElements:function(e){var n=this._settings,o=this._elements,i=o?o.length:0,s=void 0,r=[],l=this._isFirstLoop;if(l&&(this._isFirstLoop=!1),0!==i){for(s=0;s<i;s++){var a=o[s];n.skip_invisible&&null===a.offsetParent||(f||e||t(a,n.container,n.threshold))&&(l&&p(a,n.class_initial),this.load(a),r.push(s))}C(o,r)}else this._stopScrollHandler()},_purgeElements:function(){var t=this._elements,e=t.length,n=void 0,o=[];for(n=0;n<e;n++)b(t[n])&&o.push(n);C(t,o)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var t=this._settings.throttle;if(0!==t){var e=Date.now(),n=t-(e-this._previousLoopTime);n<=0||n>t?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=e,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},loadAll:function(){this._loopThroughElements(!0)},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},load:function(t,n){e(t,this._settings,n)}},d&&function(t,e){if(e)if(e.length)for(var n,o=0;n=e[o];o+=1)c(t,n);else c(t,e)}(R,window.lazyLoadOptions),R});
+var _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},_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,e,n){return!(u(t,e,n)||_(t,e,n)||f(t,e,n)||h(t,e,n))}function e(t,e,n){var o=e._settings;!n&&r(t)||(C(o.callback_enter,t),R.indexOf(t.tagName)>-1&&(x(t,e),y(t,o.class_loading)),H(t,e),s(t),C(o.callback_set,t))}var n=function(){return{elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_enter:null,callback_finish:null,to_webp:!1}},o=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 i(t,"was-processed","true")},r=function(t){return"true"===o(t,"was-processed")},l=function(t){return t.filter(function(t){return!r(t)})},a=function(t,e){return t.filter(function(t){return t!==e})},c=function(t){return t.getBoundingClientRect().top+window.pageYOffset-t.ownerDocument.documentElement.clientTop},u=function(t,e,n){return(e===window?window.innerHeight+window.pageYOffset:c(e)+e.offsetHeight)<=c(t)-n},d=function(t){return t.getBoundingClientRect().left+window.pageXOffset-t.ownerDocument.documentElement.clientLeft},f=function(t,e,n){var o=window.innerWidth;return(e===window?o+window.pageXOffset:d(e)+o)<=d(t)-n},_=function(t,e,n){return(e===window?window.pageYOffset:c(e))>=c(t)+n+t.offsetHeight},h=function(t,e,n){return(e===window?window.pageXOffset:d(e))>=d(t)+n+t.offsetWidth},p=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)},g=function(t,e){return e?t.replace(/\.(jpe?g|png)/gi,".webp"):t},m="undefined"!=typeof window,w=m&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),v=m&&"classList"in document.createElement("p"),b=m&&function(){var t=document.createElement("canvas");return!(!t.getContext||!t.getContext("2d"))&&0===t.toDataURL("image/webp").indexOf("data:image/webp")}(),y=function(t,e){v?t.classList.add(e):t.className+=(t.className?" ":"")+e},E=function(t,e){v?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},L=function(t,e,n,i){for(var s,r=0;s=t.children[r];r+=1)if("SOURCE"===s.tagName){var l=o(s,n);T(s,e,l,i)}},T=function(t,e,n,o){n&&t.setAttribute(e,g(n,o))},S=function(t,e){var n=b&&e.to_webp,i=o(t,e.data_src),s=o(t,e.data_bg);if(i){var r=g(i,n);t.style.backgroundImage='url("'+r+'")'}if(s){var l=g(s,n);t.style.backgroundImage=l}},O={IMG:function(t,e){var n=b&&e.to_webp,i=e.data_srcset,s=t.parentNode;s&&"PICTURE"===s.tagName&&L(s,"srcset",i,n);var r=o(t,e.data_sizes);T(t,"sizes",r);var l=o(t,i);T(t,"srcset",l,n);var a=o(t,e.data_src);T(t,"src",a,n)},IFRAME:function(t,e){var n=o(t,e.data_src);T(t,"src",n)},VIDEO:function(t,e){var n=e.data_src,i=o(t,n);L(t,"src",n),T(t,"src",i),t.load()}},H=function(t,e){var n=e._settings,o=t.tagName,i=O[o];if(i)return i(t,n),e._updateLoadingCount(1),void(e._elements=a(e._elements,t));S(t,n)},C=function(t,e){t&&t(e)},k=function(t,e,n){t.addEventListener(e,n)},z=function(t,e,n){t.removeEventListener(e,n)},N=function(t,e,n){k(t,"load",e),k(t,"loadeddata",e),k(t,"error",n)},A=function(t,e,n){z(t,"load",e),z(t,"loadeddata",e),z(t,"error",n)},I=function(t,e,n){var o=n._settings,i=e?o.class_loaded:o.class_error,s=e?o.callback_load:o.callback_error,r=t.target;E(r,o.class_loading),y(r,i),C(s,r),n._updateLoadingCount(-1)},x=function(t,e){var n=function n(i){I(i,!0,e),A(t,n,o)},o=function o(i){I(i,!1,e),A(t,n,o)};N(t,n,o)},R=["IMG","IFRAME","VIDEO"],D=function(t,e){for(;e.length;)t.splice(e.pop(),1)},F=function(t){this._settings=_extends({},n(),t),this._loadingCount=0,this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};return F.prototype={_loopThroughElements:function(e){var n=this._settings,o=this._elements,i=o?o.length:0,s=void 0,r=[],l=this._isFirstLoop;if(l&&(this._isFirstLoop=!1),0!==i){for(s=0;s<i;s++){var a=o[s];n.skip_invisible&&null===a.offsetParent||(e||t(a,n.container,n.threshold))&&(l&&y(a,n.class_initial),this.load(a),r.push(s))}D(o,r)}else this._stopScrollHandler()},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},_updateLoadingCount:function(t){this._loadingCount+=t,0===this._elements.length&&0===this._loadingCount&&C(this._settings.callback_finish)},handleScroll:function(){var t=this._settings.throttle;if(0!==t){var e=Date.now(),n=t-(e-this._previousLoopTime);n<=0||n>t?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=e,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},loadAll:function(){this._loopThroughElements(!0)},update:function(t){var e=this._settings,n=t||this._queryOriginNode.querySelectorAll(e.elements_selector);this._elements=l(Array.prototype.slice.call(n)),w?this.loadAll():(this._loopThroughElements(),this._startScrollHandler())},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},load:function(t,n){e(t,this,n)}},m&&function(t,e){if(e)if(e.length)for(var n,o=0;n=e[o];o+=1)p(t,n);else p(t,e)}(F,window.lazyLoadOptions),F});
 //# sourceMappingURL=lazyload.min.js.map

package.json

 {
 	"name": "vanilla-lazyload",
-	"version": "8.16.0",
+	"version": "8.17.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",

src/lazyload.defaults.js

@@ -18,5 +18,5 @@ export default () => ({
 	callback_set: null,
-	callback_processed: null,
 	callback_enter: null,
+	callback_finish: null,
 	to_webp: false
 });

src/lazyload.event.js

@@ -28,3 +28,4 @@ import { addClass, removeClass } from "./lazyload.class";
 
-const eventHandler = function(event, success, settings) {
+const eventHandler = function(event, success, instance) {
+	var settings = instance._settings;
 	const className = success ? settings.class_loaded : settings.class_error;
@@ -37,11 +38,13 @@ const callback = success ? settings.callback_load : settings.callback_error;
 	callbackIfSet(callback, element);
+
+	instance._updateLoadingCount(-1);
 };
 
-export const addOneShotEventListeners = (element, settings) => {
+export const addOneShotEventListeners = (element, instance) => {
 	const loadHandler = event => {
-		eventHandler(event, true, settings);
+		eventHandler(event, true, instance);
 		removeAllEventListeners(element, loadHandler, errorHandler);
 	};
 	const errorHandler = event => {
-		eventHandler(event, false, settings);
+		eventHandler(event, false, instance);
 		removeAllEventListeners(element, loadHandler, errorHandler);
@@ -48,0 +51,0 @@ };

src/lazyload.js

 import getDefaultSettings from "./lazyload.defaults";
+import { purgeProcessedElements } from "./lazyload.purge";
 import isInsideViewport from "./lazyload.viewport";
 import autoInitialize from "./lazyload.autoInitialize";
 import { addClass } from "./lazyload.class";
-import { getWasProcessedData } from "./lazyload.data";
 import { isBot, runningOnBrowser } from "./lazyload.environment";
 import { revealElement } from "./lazyload.reveal";
 import { removeFromArray } from "./lazyload.array";
+import { callbackIfSet } from "./lazyload.callback";
 
@@ -16,2 +17,3 @@ /*
 	this._settings = Object.assign({}, getDefaultSettings(), instanceSettings);
+	this._loadingCount = 0;
 	this._queryOriginNode =
@@ -57,3 +59,2 @@ this._settings.container === window
 			if (
-				isBot ||
 				forceDownload ||
@@ -78,16 +79,2 @@ isInsideViewport(
 
-	_purgeElements: function() {
-		const elements = this._elements,
-			elementsLength = elements.length;
-		let i,
-			processedIndexes = [];
-
-		for (i = 0; i < elementsLength; i++) {
-			if (getWasProcessedData(elements[i])) {
-				processedIndexes.push(i);
-			}
-		}
-		removeFromArray(elements, processedIndexes);
-	},
-
 	_startScrollHandler: function() {
@@ -113,2 +100,9 @@ if (!this._isHandlingScroll) {
 
+	_updateLoadingCount: function(plusMinus) {
+		this._loadingCount += plusMinus;
+		if (this._elements.length === 0 && this._loadingCount === 0) {
+			callbackIfSet(this._settings.callback_finish);
+		}
+	},
+
 	handleScroll: function() {
@@ -146,10 +140,17 @@ const throttle = this._settings.throttle;
 
-	update: function() {
-		// Converts to array the nodeset obtained querying the DOM from _queryOriginNode with elements_selector
-		this._elements = Array.prototype.slice.call(
-			this._queryOriginNode.querySelectorAll(
-				this._settings.elements_selector
-			)
+	update: function(elements) {
+		const settings = this._settings;
+		const nodeSet =
+			elements ||
+			this._queryOriginNode.querySelectorAll(settings.elements_selector);
+
+		this._elements = purgeProcessedElements(
+			Array.prototype.slice.call(nodeSet) // NOTE: nodeset to array for IE compatibility
 		);
-		this._purgeElements();
+
+		if (isBot) {
+			this.loadAll();
+			return;
+		}
+
 		this._loopThroughElements();
@@ -172,3 +173,3 @@ this._startScrollHandler();
 	load: function(element, force) {
-		revealElement(element, this._settings, force);
+		revealElement(element, this, force);
 	}
@@ -175,0 +176,0 @@ };

src/lazyload.reveal.js

@@ -9,3 +9,4 @@ import { setSources } from "./lazyload.setSources";
 
-export function revealElement(element, settings, force) {
+export function revealElement(element, instance, force) {
+	var settings = instance._settings;
 	if (!force && getWasProcessedData(element)) {
@@ -16,8 +17,8 @@ return; // element has already been processed and force wasn't true
 	if (managedTags.indexOf(element.tagName) > -1) {
-		addOneShotEventListeners(element, settings);
+		addOneShotEventListeners(element, instance);
 		addClass(element, settings.class_loading);
 	}
-	setSources(element, settings);
+	setSources(element, instance);
 	setWasProcessedData(element);
 	callbackIfSet(settings.callback_set, element);
 }

src/lazyload.setSources.js

 import { getData } from "./lazyload.data";
 import { supportsWebp } from "./lazyload.environment";
 import { replaceExtToWebp } from "./lazyload.webp";
+import { purgeOneElement } from "./lazyload.purge";
 
@@ -84,3 +85,4 @@ export const setSourcesInChildren = function(
 
-export const setSources = (element, settings) => {
+export const setSources = (element, instance) => {
+	const settings = instance._settings;
 	const tagName = element.tagName;
@@ -90,2 +92,4 @@ const setSourcesFunction = setSourcesFunctions[tagName];
 		setSourcesFunction(element, settings);
+		instance._updateLoadingCount(1);
+		instance._elements = purgeOneElement(instance._elements, element);
 		return;
@@ -92,0 +96,0 @@ }

typings/lazyload.d.ts

 interface ILazyLoadOptions {
-    threshold?: number;
-    container?: HTMLElement;
-    elements_selector?: string;
-    throttle?: number;
-    data_src?: string;
-    data_srcset?: string;
-    class_loading?: string;
-    class_loaded?: string;
-    class_error?: string;
-    skip_invisible?: boolean;
-    show_while_loading?: boolean;
-    callback_set?: (elt:HTMLImageElement) => void;
-    callback_load?: (elt:HTMLImageElement) => void;
-    callback_error?: (elt:HTMLImageElement) => void;
-    callback_processed?: (elts:HTMLImageElement[]) => void;
-    placeholder?: string;
+	elements_selector?: string;
+	container?: HTMLElement;
+	threshold?: number;
+	throttle?: number;
+	data_src?: string;
+	data_srcset?: string;
+	data_sizes?: string;
+	data_bg?: string;
+	class_loading?: string;
+	class_loaded?: string;
+	class_error?: string;
+	skip_invisible?: boolean;
+	callback_load?: (elt: HTMLImageElement) => void;
+	callback_error?: (elt: HTMLImageElement) => void;
+	callback_set?: (elt: HTMLImageElement) => void;
+	callback_enter?: (elt: HTMLImageElement) => void;
+	callback_finish?: () => void;
+	to_webp?: boolean;
 }
 interface ILazyLoad {
-    new (options?: ILazyLoadOptions);
-    update();
-    destroy();
-    handleScroll();
+	new (options?: ILazyLoadOptions);
+	update();
+	destroy();
+	handleScroll();
+	load();
+	loadAll();
 }
-declare var LazyLoad: ILazyLoad;
+declare var LazyLoad: ILazyLoad;

No alert changes

Improved metrics

Total package byte prevSize

1130144

increased by1.56%

Number of package files

147

increased by1.38%

Lines of code

2461

increased by3.36%

No dependency changes