Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vanilla-lazyload

Package Overview
Dependencies
Maintainers
1
Versions
148
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vanilla-lazyload - npm Package Compare versions

Comparing version 8.15.1 to 8.15.2

src/lazyload.array.js
src/lazyload.callback.js
src/lazyload.event.js
src/lazyload.reveal.js

4

CHANGELOG.md

@@ -157,2 +157,6 @@ # CHANGELOG

#### 8.15.2
**BUGFIX**: Class `loaded` was not applied to a loaded video (issue #239).
#### 8.15.1

@@ -159,0 +163,0 @@

233

dist/lazyload.amd.js

@@ -29,8 +29,2 @@ 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 callCallback = function callCallback(callback, argument) {
if (callback) {
callback(argument);
}
};
var getTopOffset = function getTopOffset(element) {

@@ -102,22 +96,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) {
return element.setAttribute(dataPrefix + attribute, value);
};
var setWasProcessed = function setWasProcessed(element) {
return setData(element, processedDataName, processedDataValue);
};
var getWasProcessed = function getWasProcessed(element) {
return getData(element, processedDataName) === processedDataValue;
};
var replaceExtToWebp = function replaceExtToWebp(value, condition) {

@@ -145,2 +119,43 @@ return condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;

var addClass = function addClass(element, className) {
if (supportsClassList) {
element.classList.add(className);
return;
}
element.className += (element.className ? " " : "") + className;
};
var removeClass = function removeClass(element, className) {
if (supportsClassList) {
element.classList.remove(className);
return;
}
element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
};
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) {

@@ -219,16 +234,74 @@ for (var i = 0, childTag; childTag = parentTag.children[i]; i += 1) {

var addClass = function addClass(element, className) {
if (supportsClassList) {
element.classList.add(className);
return;
var callbackIfSet = function callbackIfSet(callback, argument) {
if (callback) {
callback(argument);
}
element.className += (element.className ? " " : "") + className;
};
var removeClass = function removeClass(element, className) {
if (supportsClassList) {
element.classList.remove(className);
return;
var genericLoadEventName = "load";
var mediaLoadEventName = "loadeddata";
var errorEventName = "error";
var addEventListener = function addEventListener(element, eventName, handler) {
element.addEventListener(eventName, handler);
};
var removeEventListener = function removeEventListener(element, eventName, handler) {
element.removeEventListener(eventName, handler);
};
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, 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"];
function revealElement(element, settings, force) {
if (!force && getWasProcessedData(element)) {
return; // element has already been processed and force wasn't true
}
element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
callbackIfSet(settings.callback_enter, element);
if (managedTags.indexOf(element.tagName) > -1) {
addOneShotEventListeners(element, settings);
addClass(element, settings.class_loading);
}
setSources(element, settings);
setWasProcessedData(element);
callbackIfSet(settings.callback_set, element);
}
var removeFromArray = function removeFromArray(elements, indexes) {
while (indexes.length) {
elements.splice(indexes.pop(), 1);
}
};

@@ -254,43 +327,2 @@

LazyLoad.prototype = {
_reveal: function _reveal(element, force) {
if (!force && getWasProcessed(element)) {
return; // element has already been processed and force wasn't true
}
var settings = this._settings;
var errorCallback = function errorCallback() {
/* As this method is asynchronous, it must be protected against external destroy() calls */
if (!settings) {
return;
}
element.removeEventListener("load", loadCallback);
element.removeEventListener("error", errorCallback);
removeClass(element, settings.class_loading);
addClass(element, settings.class_error);
callCallback(settings.callback_error, element);
};
var loadCallback = function loadCallback() {
/* As this method is asynchronous, it must be protected against external destroy() calls */
if (!settings) {
return;
}
removeClass(element, settings.class_loading);
addClass(element, settings.class_loaded);
element.removeEventListener("load", loadCallback);
element.removeEventListener("error", errorCallback);
callCallback(settings.callback_load, element);
};
callCallback(settings.callback_enter, element);
if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) {
element.addEventListener("load", loadCallback);
element.addEventListener("error", errorCallback);
addClass(element, settings.class_loading);
}
setSources(element, settings);
callCallback(settings.callback_set, element);
},
_loopThroughElements: function _loopThroughElements(forceDownload) {

@@ -302,4 +334,13 @@ var settings = this._settings,

processedIndexes = [],
firstLoop = this._isFirstLoop;
isFirstLoop = this._isFirstLoop;
if (isFirstLoop) {
this._isFirstLoop = false;
}
if (elementsLength === 0) {
this._stopScrollHandler();
return;
}
for (i = 0; i < elementsLength; i++) {

@@ -313,25 +354,12 @@ var element = elements[i];

if (isBot || forceDownload || isInsideViewport(element, settings.container, settings.threshold)) {
if (firstLoop) {
if (isFirstLoop) {
addClass(element, settings.class_initial);
}
/* Start loading the image */
this.load(element);
/* Marking the element as processed. */
processedIndexes.push(i);
setWasProcessed(element);
}
}
/* Removing processed elements from this._elements. */
while (processedIndexes.length) {
elements.splice(processedIndexes.pop(), 1);
callCallback(settings.callback_processed, elements.length);
}
/* Stop listening to scroll event when 0 elements remains */
if (elementsLength === 0) {
this._stopScrollHandler();
}
/* Sets isFirstLoop to false */
if (firstLoop) {
this._isFirstLoop = false;
}
// Removing processed elements from this._elements.
removeFromArray(elements, processedIndexes);
},

@@ -343,15 +371,10 @@

var i = void 0,
elementsToPurge = [];
processedIndexes = [];
for (i = 0; i < elementsLength; i++) {
var element = elements[i];
/* If the element has already been processed, skip it */
if (getWasProcessed(element)) {
elementsToPurge.push(i);
if (getWasProcessedData(elements[i])) {
processedIndexes.push(i);
}
}
/* Removing elements to purge from this._elements. */
while (elementsToPurge.length > 0) {
elements.splice(elementsToPurge.pop(), 1);
}
removeFromArray(elements, processedIndexes);
},

@@ -423,3 +446,3 @@

load: function load(element, force) {
this._reveal(element, force);
revealElement(element, this._settings, force);
}

@@ -426,0 +449,0 @@ };

2

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

235

dist/lazyload.es2015.js

@@ -22,8 +22,2 @@ var getDefaultSettings = () => ({

const callCallback = function(callback, argument) {
if (callback) {
callback(argument);
}
};
const getTopOffset = function(element) {

@@ -116,20 +110,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) => {
return element.setAttribute(dataPrefix + attribute, value);
};
const setWasProcessed = element =>
setData(element, processedDataName, processedDataValue);
const getWasProcessed = element =>
getData(element, processedDataName) === processedDataValue;
const replaceExtToWebp = (value, condition) =>

@@ -159,2 +135,44 @@ condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;

const addClass = (element, className) => {
if (supportsClassList) {
element.classList.add(className);
return;
}
element.className += (element.className ? " " : "") + className;
};
const removeClass = (element, className) => {
if (supportsClassList) {
element.classList.remove(className);
return;
}
element.className = element.className.
replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").
replace(/^\s+/, "").
replace(/\s+$/, "");
};
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(

@@ -243,19 +261,74 @@ parentTag,

const addClass = (element, className) => {
if (supportsClassList) {
element.classList.add(className);
return;
const callbackIfSet = function(callback, argument) {
if (callback) {
callback(argument);
}
element.className += (element.className ? " " : "") + className;
};
const removeClass = (element, className) => {
if (supportsClassList) {
element.classList.remove(className);
return;
const genericLoadEventName = "load";
const mediaLoadEventName = "loadeddata";
const errorEventName = "error";
const addEventListener = (element, eventName, handler) => {
element.addEventListener(eventName, handler);
};
const removeEventListener = (element, eventName, handler) => {
element.removeEventListener(eventName, handler);
};
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, 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"];
function revealElement(element, settings, force) {
if (!force && getWasProcessedData(element)) {
return; // element has already been processed and force wasn't true
}
element.className = element.className.
replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").
replace(/^\s+/, "").
replace(/\s+$/, "");
callbackIfSet(settings.callback_enter, element);
if (managedTags.indexOf(element.tagName) > -1) {
addOneShotEventListeners(element, settings);
addClass(element, settings.class_loading);
}
setSources(element, settings);
setWasProcessedData(element);
callbackIfSet(settings.callback_set, element);
}
const removeFromArray = (elements, indexes) => {
while (indexes.length) {
elements.splice(indexes.pop(), 1);
}
};

@@ -284,43 +357,2 @@

LazyLoad.prototype = {
_reveal: function(element, force) {
if (!force && getWasProcessed(element)) {
return; // element has already been processed and force wasn't true
}
const settings = this._settings;
const errorCallback = function() {
/* As this method is asynchronous, it must be protected against external destroy() calls */
if (!settings) {
return;
}
element.removeEventListener("load", loadCallback);
element.removeEventListener("error", errorCallback);
removeClass(element, settings.class_loading);
addClass(element, settings.class_error);
callCallback(settings.callback_error, element);
};
const loadCallback = function() {
/* As this method is asynchronous, it must be protected against external destroy() calls */
if (!settings) {
return;
}
removeClass(element, settings.class_loading);
addClass(element, settings.class_loaded);
element.removeEventListener("load", loadCallback);
element.removeEventListener("error", errorCallback);
callCallback(settings.callback_load, element);
};
callCallback(settings.callback_enter, element);
if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) {
element.addEventListener("load", loadCallback);
element.addEventListener("error", errorCallback);
addClass(element, settings.class_loading);
}
setSources(element, settings);
callCallback(settings.callback_set, element);
},
_loopThroughElements: function(forceDownload) {

@@ -332,4 +364,13 @@ const settings = this._settings,

processedIndexes = [],
firstLoop = this._isFirstLoop;
isFirstLoop = this._isFirstLoop;
if (isFirstLoop) {
this._isFirstLoop = false;
}
if (elementsLength === 0) {
this._stopScrollHandler();
return;
}
for (i = 0; i < elementsLength; i++) {

@@ -351,25 +392,12 @@ let element = elements[i];

) {
if (firstLoop) {
if (isFirstLoop) {
addClass(element, settings.class_initial);
}
/* Start loading the image */
this.load(element);
/* Marking the element as processed. */
processedIndexes.push(i);
setWasProcessed(element);
}
}
/* Removing processed elements from this._elements. */
while (processedIndexes.length) {
elements.splice(processedIndexes.pop(), 1);
callCallback(settings.callback_processed, elements.length);
}
/* Stop listening to scroll event when 0 elements remains */
if (elementsLength === 0) {
this._stopScrollHandler();
}
/* Sets isFirstLoop to false */
if (firstLoop) {
this._isFirstLoop = false;
}
// Removing processed elements from this._elements.
removeFromArray(elements, processedIndexes);
},

@@ -381,15 +409,10 @@

let i,
elementsToPurge = [];
processedIndexes = [];
for (i = 0; i < elementsLength; i++) {
let element = elements[i];
/* If the element has already been processed, skip it */
if (getWasProcessed(element)) {
elementsToPurge.push(i);
if (getWasProcessedData(elements[i])) {
processedIndexes.push(i);
}
}
/* Removing elements to purge from this._elements. */
while (elementsToPurge.length > 0) {
elements.splice(elementsToPurge.pop(), 1);
}
removeFromArray(elements, processedIndexes);
},

@@ -474,3 +497,3 @@

load: function(element, force) {
this._reveal(element, force);
revealElement(element, this._settings, force);
}

@@ -477,0 +500,0 @@ };

233

dist/lazyload.iife.js

@@ -29,8 +29,2 @@ 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 callCallback = function callCallback(callback, argument) {
if (callback) {
callback(argument);
}
};
var getTopOffset = function getTopOffset(element) {

@@ -102,22 +96,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) {
return element.setAttribute(dataPrefix + attribute, value);
};
var setWasProcessed = function setWasProcessed(element) {
return setData(element, processedDataName, processedDataValue);
};
var getWasProcessed = function getWasProcessed(element) {
return getData(element, processedDataName) === processedDataValue;
};
var replaceExtToWebp = function replaceExtToWebp(value, condition) {

@@ -145,2 +119,43 @@ return condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;

var addClass = function addClass(element, className) {
if (supportsClassList) {
element.classList.add(className);
return;
}
element.className += (element.className ? " " : "") + className;
};
var removeClass = function removeClass(element, className) {
if (supportsClassList) {
element.classList.remove(className);
return;
}
element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
};
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) {

@@ -219,16 +234,74 @@ for (var i = 0, childTag; childTag = parentTag.children[i]; i += 1) {

var addClass = function addClass(element, className) {
if (supportsClassList) {
element.classList.add(className);
return;
var callbackIfSet = function callbackIfSet(callback, argument) {
if (callback) {
callback(argument);
}
element.className += (element.className ? " " : "") + className;
};
var removeClass = function removeClass(element, className) {
if (supportsClassList) {
element.classList.remove(className);
return;
var genericLoadEventName = "load";
var mediaLoadEventName = "loadeddata";
var errorEventName = "error";
var addEventListener = function addEventListener(element, eventName, handler) {
element.addEventListener(eventName, handler);
};
var removeEventListener = function removeEventListener(element, eventName, handler) {
element.removeEventListener(eventName, handler);
};
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, 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"];
function revealElement(element, settings, force) {
if (!force && getWasProcessedData(element)) {
return; // element has already been processed and force wasn't true
}
element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
callbackIfSet(settings.callback_enter, element);
if (managedTags.indexOf(element.tagName) > -1) {
addOneShotEventListeners(element, settings);
addClass(element, settings.class_loading);
}
setSources(element, settings);
setWasProcessedData(element);
callbackIfSet(settings.callback_set, element);
}
var removeFromArray = function removeFromArray(elements, indexes) {
while (indexes.length) {
elements.splice(indexes.pop(), 1);
}
};

@@ -254,43 +327,2 @@

LazyLoad.prototype = {
_reveal: function _reveal(element, force) {
if (!force && getWasProcessed(element)) {
return; // element has already been processed and force wasn't true
}
var settings = this._settings;
var errorCallback = function errorCallback() {
/* As this method is asynchronous, it must be protected against external destroy() calls */
if (!settings) {
return;
}
element.removeEventListener("load", loadCallback);
element.removeEventListener("error", errorCallback);
removeClass(element, settings.class_loading);
addClass(element, settings.class_error);
callCallback(settings.callback_error, element);
};
var loadCallback = function loadCallback() {
/* As this method is asynchronous, it must be protected against external destroy() calls */
if (!settings) {
return;
}
removeClass(element, settings.class_loading);
addClass(element, settings.class_loaded);
element.removeEventListener("load", loadCallback);
element.removeEventListener("error", errorCallback);
callCallback(settings.callback_load, element);
};
callCallback(settings.callback_enter, element);
if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) {
element.addEventListener("load", loadCallback);
element.addEventListener("error", errorCallback);
addClass(element, settings.class_loading);
}
setSources(element, settings);
callCallback(settings.callback_set, element);
},
_loopThroughElements: function _loopThroughElements(forceDownload) {

@@ -302,4 +334,13 @@ var settings = this._settings,

processedIndexes = [],
firstLoop = this._isFirstLoop;
isFirstLoop = this._isFirstLoop;
if (isFirstLoop) {
this._isFirstLoop = false;
}
if (elementsLength === 0) {
this._stopScrollHandler();
return;
}
for (i = 0; i < elementsLength; i++) {

@@ -313,25 +354,12 @@ var element = elements[i];

if (isBot || forceDownload || isInsideViewport(element, settings.container, settings.threshold)) {
if (firstLoop) {
if (isFirstLoop) {
addClass(element, settings.class_initial);
}
/* Start loading the image */
this.load(element);
/* Marking the element as processed. */
processedIndexes.push(i);
setWasProcessed(element);
}
}
/* Removing processed elements from this._elements. */
while (processedIndexes.length) {
elements.splice(processedIndexes.pop(), 1);
callCallback(settings.callback_processed, elements.length);
}
/* Stop listening to scroll event when 0 elements remains */
if (elementsLength === 0) {
this._stopScrollHandler();
}
/* Sets isFirstLoop to false */
if (firstLoop) {
this._isFirstLoop = false;
}
// Removing processed elements from this._elements.
removeFromArray(elements, processedIndexes);
},

@@ -343,15 +371,10 @@

var i = void 0,
elementsToPurge = [];
processedIndexes = [];
for (i = 0; i < elementsLength; i++) {
var element = elements[i];
/* If the element has already been processed, skip it */
if (getWasProcessed(element)) {
elementsToPurge.push(i);
if (getWasProcessedData(elements[i])) {
processedIndexes.push(i);
}
}
/* Removing elements to purge from this._elements. */
while (elementsToPurge.length > 0) {
elements.splice(elementsToPurge.pop(), 1);
}
removeFromArray(elements, processedIndexes);
},

@@ -423,3 +446,3 @@

load: function load(element, force) {
this._reveal(element, force);
revealElement(element, this._settings, force);
}

@@ -426,0 +449,0 @@ };

2

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

233

dist/lazyload.js

@@ -33,8 +33,2 @@ 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 callCallback = function callCallback(callback, argument) {
if (callback) {
callback(argument);
}
};
var getTopOffset = function getTopOffset(element) {

@@ -106,22 +100,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) {
return element.setAttribute(dataPrefix + attribute, value);
};
var setWasProcessed = function setWasProcessed(element) {
return setData(element, processedDataName, processedDataValue);
};
var getWasProcessed = function getWasProcessed(element) {
return getData(element, processedDataName) === processedDataValue;
};
var replaceExtToWebp = function replaceExtToWebp(value, condition) {

@@ -149,2 +123,43 @@ return condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;

var addClass = function addClass(element, className) {
if (supportsClassList) {
element.classList.add(className);
return;
}
element.className += (element.className ? " " : "") + className;
};
var removeClass = function removeClass(element, className) {
if (supportsClassList) {
element.classList.remove(className);
return;
}
element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
};
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) {

@@ -223,16 +238,74 @@ for (var i = 0, childTag; childTag = parentTag.children[i]; i += 1) {

var addClass = function addClass(element, className) {
if (supportsClassList) {
element.classList.add(className);
return;
var callbackIfSet = function callbackIfSet(callback, argument) {
if (callback) {
callback(argument);
}
element.className += (element.className ? " " : "") + className;
};
var removeClass = function removeClass(element, className) {
if (supportsClassList) {
element.classList.remove(className);
return;
var genericLoadEventName = "load";
var mediaLoadEventName = "loadeddata";
var errorEventName = "error";
var addEventListener = function addEventListener(element, eventName, handler) {
element.addEventListener(eventName, handler);
};
var removeEventListener = function removeEventListener(element, eventName, handler) {
element.removeEventListener(eventName, handler);
};
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, 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"];
function revealElement(element, settings, force) {
if (!force && getWasProcessedData(element)) {
return; // element has already been processed and force wasn't true
}
element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
callbackIfSet(settings.callback_enter, element);
if (managedTags.indexOf(element.tagName) > -1) {
addOneShotEventListeners(element, settings);
addClass(element, settings.class_loading);
}
setSources(element, settings);
setWasProcessedData(element);
callbackIfSet(settings.callback_set, element);
}
var removeFromArray = function removeFromArray(elements, indexes) {
while (indexes.length) {
elements.splice(indexes.pop(), 1);
}
};

@@ -258,43 +331,2 @@

LazyLoad.prototype = {
_reveal: function _reveal(element, force) {
if (!force && getWasProcessed(element)) {
return; // element has already been processed and force wasn't true
}
var settings = this._settings;
var errorCallback = function errorCallback() {
/* As this method is asynchronous, it must be protected against external destroy() calls */
if (!settings) {
return;
}
element.removeEventListener("load", loadCallback);
element.removeEventListener("error", errorCallback);
removeClass(element, settings.class_loading);
addClass(element, settings.class_error);
callCallback(settings.callback_error, element);
};
var loadCallback = function loadCallback() {
/* As this method is asynchronous, it must be protected against external destroy() calls */
if (!settings) {
return;
}
removeClass(element, settings.class_loading);
addClass(element, settings.class_loaded);
element.removeEventListener("load", loadCallback);
element.removeEventListener("error", errorCallback);
callCallback(settings.callback_load, element);
};
callCallback(settings.callback_enter, element);
if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) {
element.addEventListener("load", loadCallback);
element.addEventListener("error", errorCallback);
addClass(element, settings.class_loading);
}
setSources(element, settings);
callCallback(settings.callback_set, element);
},
_loopThroughElements: function _loopThroughElements(forceDownload) {

@@ -306,4 +338,13 @@ var settings = this._settings,

processedIndexes = [],
firstLoop = this._isFirstLoop;
isFirstLoop = this._isFirstLoop;
if (isFirstLoop) {
this._isFirstLoop = false;
}
if (elementsLength === 0) {
this._stopScrollHandler();
return;
}
for (i = 0; i < elementsLength; i++) {

@@ -317,25 +358,12 @@ var element = elements[i];

if (isBot || forceDownload || isInsideViewport(element, settings.container, settings.threshold)) {
if (firstLoop) {
if (isFirstLoop) {
addClass(element, settings.class_initial);
}
/* Start loading the image */
this.load(element);
/* Marking the element as processed. */
processedIndexes.push(i);
setWasProcessed(element);
}
}
/* Removing processed elements from this._elements. */
while (processedIndexes.length) {
elements.splice(processedIndexes.pop(), 1);
callCallback(settings.callback_processed, elements.length);
}
/* Stop listening to scroll event when 0 elements remains */
if (elementsLength === 0) {
this._stopScrollHandler();
}
/* Sets isFirstLoop to false */
if (firstLoop) {
this._isFirstLoop = false;
}
// Removing processed elements from this._elements.
removeFromArray(elements, processedIndexes);
},

@@ -347,15 +375,10 @@

var i = void 0,
elementsToPurge = [];
processedIndexes = [];
for (i = 0; i < elementsLength; i++) {
var element = elements[i];
/* If the element has already been processed, skip it */
if (getWasProcessed(element)) {
elementsToPurge.push(i);
if (getWasProcessedData(elements[i])) {
processedIndexes.push(i);
}
}
/* Removing elements to purge from this._elements. */
while (elementsToPurge.length > 0) {
elements.splice(elementsToPurge.pop(), 1);
}
removeFromArray(elements, processedIndexes);
},

@@ -427,3 +450,3 @@

load: function load(element, force) {
this._reveal(element, force);
revealElement(element, this._settings, force);
}

@@ -430,0 +453,0 @@ };

2

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

2

package.json
{
"name": "vanilla-lazyload",
"version": "8.15.1",
"version": "8.15.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",

10

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.1/lazyload.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.15.2/lazyload.min.js"></script>
```

@@ -49,3 +49,3 @@

var s = d.createElement("script");
var v = !("IntersectionObserver" in w) ? "8.15.1" : "10.16.1";
var v = !("IntersectionObserver" in w) ? "8.15.2" : "10.16.1";
s.async = true; // This includes the script as async. See the "recipes" section for more information about async loading of LazyLoad.

@@ -68,3 +68,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.1/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;

@@ -77,3 +77,3 @@ });

```js
var v = !("IntersectionObserver" in window) ? "8.15.1" : "10.16.1";
var v = !("IntersectionObserver" in window) ? "8.15.2" : "10.16.1";
define("vanilla-lazyLoad", ["https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.amd.min.js"], function (LazyLoad) {

@@ -93,3 +93,3 @@ return LazyLoad;

```
npm install vanilla-lazyload@8.15.1
npm install vanilla-lazyload@8.15.2
```

@@ -96,0 +96,0 @@

11

src/lazyload.data.js

@@ -10,9 +10,14 @@ const dataPrefix = "data-";

export const setData = (element, attribute, value) => {
return element.setAttribute(dataPrefix + attribute, value);
var attrName = dataPrefix + attribute;
if (value === null) {
element.removeAttribute(attrName);
return;
}
element.setAttribute(attrName, value);
};
export const setWasProcessed = element =>
export const setWasProcessedData = element =>
setData(element, processedDataName, processedDataValue);
export const getWasProcessed = element =>
export const getWasProcessedData = element =>
getData(element, processedDataName) === processedDataValue;

96

src/lazyload.js
import getDefaultSettings from "./lazyload.defaults";
import { callCallback } from "./lazyload.utils";
import isInsideViewport from "./lazyload.viewport";
import autoInitialize from "./lazyload.autoInitialize";
import { setSources } from "./lazyload.setSources";
import { addClass, removeClass } from "./lazyload.class";
import { getWasProcessed, setWasProcessed } from "./lazyload.data";
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";

@@ -31,43 +31,2 @@ /*

LazyLoad.prototype = {
_reveal: function(element, force) {
if (!force && getWasProcessed(element)) {
return; // element has already been processed and force wasn't true
}
const settings = this._settings;
const errorCallback = function() {
/* As this method is asynchronous, it must be protected against external destroy() calls */
if (!settings) {
return;
}
element.removeEventListener("load", loadCallback);
element.removeEventListener("error", errorCallback);
removeClass(element, settings.class_loading);
addClass(element, settings.class_error);
callCallback(settings.callback_error, element);
};
const loadCallback = function() {
/* As this method is asynchronous, it must be protected against external destroy() calls */
if (!settings) {
return;
}
removeClass(element, settings.class_loading);
addClass(element, settings.class_loaded);
element.removeEventListener("load", loadCallback);
element.removeEventListener("error", errorCallback);
callCallback(settings.callback_load, element);
};
callCallback(settings.callback_enter, element);
if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) {
element.addEventListener("load", loadCallback);
element.addEventListener("error", errorCallback);
addClass(element, settings.class_loading);
}
setSources(element, settings);
callCallback(settings.callback_set, element);
},
_loopThroughElements: function(forceDownload) {

@@ -79,4 +38,13 @@ const settings = this._settings,

processedIndexes = [],
firstLoop = this._isFirstLoop;
isFirstLoop = this._isFirstLoop;
if (isFirstLoop) {
this._isFirstLoop = false;
}
if (elementsLength === 0) {
this._stopScrollHandler();
return;
}
for (i = 0; i < elementsLength; i++) {

@@ -98,25 +66,12 @@ let element = elements[i];

) {
if (firstLoop) {
if (isFirstLoop) {
addClass(element, settings.class_initial);
}
/* Start loading the image */
this.load(element);
/* Marking the element as processed. */
processedIndexes.push(i);
setWasProcessed(element);
}
}
/* Removing processed elements from this._elements. */
while (processedIndexes.length) {
elements.splice(processedIndexes.pop(), 1);
callCallback(settings.callback_processed, elements.length);
}
/* Stop listening to scroll event when 0 elements remains */
if (elementsLength === 0) {
this._stopScrollHandler();
}
/* Sets isFirstLoop to false */
if (firstLoop) {
this._isFirstLoop = false;
}
// Removing processed elements from this._elements.
removeFromArray(elements, processedIndexes);
},

@@ -128,15 +83,10 @@

let i,
elementsToPurge = [];
processedIndexes = [];
for (i = 0; i < elementsLength; i++) {
let element = elements[i];
/* If the element has already been processed, skip it */
if (getWasProcessed(element)) {
elementsToPurge.push(i);
if (getWasProcessedData(elements[i])) {
processedIndexes.push(i);
}
}
/* Removing elements to purge from this._elements. */
while (elementsToPurge.length > 0) {
elements.splice(elementsToPurge.pop(), 1);
}
removeFromArray(elements, processedIndexes);
},

@@ -221,3 +171,3 @@

load: function(element, force) {
this._reveal(element, force);
revealElement(element, this._settings, force);
}

@@ -224,0 +174,0 @@ };

src/lazyload.utils.js
demos/video.html

Sorry, the diff of this file is not supported yet

dist/lazyload.amd.min.js.map

Sorry, the diff of this file is not supported yet

dist/lazyload.iife.min.js.map

Sorry, the diff of this file is not supported yet

dist/lazyload.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc