New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.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 10.15.0 to 10.16.0-beta

demos/delay_test.html
demos/delay.html

12

CHANGELOG.md

@@ -5,2 +5,7 @@ # CHANGELOG

#### 10.16.0-beta
Added new option `load_delay` to skip loading when fast scrolling occurs, as requested in issues #235 and #166.
Pass in a number of milliseconds, and each image will be loaded after it stayed inside that viewport for that time.
#### 10.15.0

@@ -135,3 +140,3 @@

## Version 9
#### 9.0.1

@@ -150,2 +155,7 @@

#### 8.15.0
- Refactorized code & improved script performance
- **BUGFIX**: Fixed webpack import (issue #230) `TypeError: default is not a constructor`
#### 8.14.0

@@ -152,0 +162,0 @@

115

dist/lazyload.amd.js

@@ -17,2 +17,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

class_error: "error",
load_delay: 0,
callback_load: null,

@@ -30,3 +31,4 @@ callback_error: null,

var processedDataName = "was-processed";
var processedDataValue = "true";
var timeoutDataName = "ll-timeout";
var trueString = "true";

@@ -38,16 +40,29 @@ var getData = function getData(element, attribute) {

var setData = function 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);
};
var setWasProcessed = function setWasProcessed(element) {
return setData(element, processedDataName, processedDataValue);
var setWasProcessedData = function setWasProcessedData(element) {
return setData(element, processedDataName, trueString);
};
var getWasProcessed = function getWasProcessed(element) {
return getData(element, processedDataName) === processedDataValue;
var getWasProcessedData = function getWasProcessedData(element) {
return getData(element, processedDataName) === trueString;
};
var setTimeoutData = function setTimeoutData(element, value) {
return setData(element, timeoutDataName, value);
};
var getTimeoutData = function getTimeoutData(element) {
return getData(element, timeoutDataName);
};
function purgeElements(elements) {
return elements.filter(function (element) {
return !getWasProcessed(element);
return !getWasProcessedData(element);
});

@@ -238,4 +253,31 @@ }

var loadAndUnobserve = function loadAndUnobserve(element, observer, settings) {
revealElement(element, settings);
observer.unobserve(element);
};
var cancelDelayLoad = function cancelDelayLoad(element) {
var timeoutId = getTimeoutData(element);
if (!timeoutId) {
return; // do nothing if timeout doesn't exist
}
clearTimeout(timeoutId);
setTimeoutData(element, null);
};
var delayLoad = function delayLoad(element, observer, settings) {
var loadDelay = settings.load_delay;
var timeoutId = getTimeoutData(element);
if (timeoutId) {
return; // do nothing if timeout already set
}
timeoutId = setTimeout(function () {
loadAndUnobserve(element, observer, settings);
cancelDelayLoad(element);
}, loadDelay);
setTimeoutData(element, timeoutId);
};
function revealElement(element, settings, force) {
if (!force && getWasProcessed(element)) {
if (!force && getWasProcessedData(element)) {
return; // element has already been processed and force wasn't true

@@ -249,3 +291,3 @@ }

setSources(element, settings);
setWasProcessed(element);
setWasProcessedData(element);
callCallback(settings.callback_set, element);

@@ -256,4 +298,4 @@ }

entry.intersectionRatio is not enough alone because it could be 0 on some intersecting elements */
var isIntersecting = function isIntersecting(element) {
return element.isIntersecting || element.intersectionRatio > 0;
var isIntersecting = function isIntersecting(entry) {
return entry.isIntersecting || entry.intersectionRatio > 0;
};

@@ -264,3 +306,4 @@

root: settings.container === document ? null : settings.container,
rootMargin: settings.threshold + "px"
rootMargin: settings.threshold + "px",
threshold: 0
};

@@ -276,26 +319,36 @@ };

LazyLoad.prototype = {
_manageIntersection: function _manageIntersection(entry) {
var observer = this._observer;
var settings = this._settings;
var loadDelay = this._settings.load_delay;
var element = entry.target;
if (isIntersecting(entry)) {
if (!loadDelay) {
loadAndUnobserve(element, observer, settings);
} else {
delayLoad(element, observer, settings);
}
}
// Writes in and outs in a data-attribute
if (!isIntersecting(entry)) {
cancelDelayLoad(element);
}
},
_onIntersection: function _onIntersection(entries) {
entries.forEach(this._manageIntersection.bind(this));
this._elements = purgeElements(this._elements);
},
_setObserver: function _setObserver() {
var _this = this;
if (!supportsIntersectionObserver) {
return;
}
var revealIntersectingElements = function revealIntersectingElements(entries) {
entries.forEach(function (entry) {
if (isIntersecting(entry)) {
var element = entry.target;
_this.load(element);
_this._observer.unobserve(element);
}
});
_this._elements = purgeElements(_this._elements);
};
this._observer = new IntersectionObserver(revealIntersectingElements, getObserverSettings(this._settings));
this._observer = new IntersectionObserver(this._onIntersection.bind(this), getObserverSettings(this._settings));
},
loadAll: function loadAll() {
var _this2 = this;
var _this = this;
this._elements.forEach(function (element) {
_this2.load(element);
_this.load(element);
});

@@ -306,3 +359,3 @@ this._elements = purgeElements(this._elements);

update: function update(elements) {
var _this3 = this;
var _this2 = this;

@@ -320,3 +373,3 @@ var settings = this._settings;

this._elements.forEach(function (element) {
_this3._observer.observe(element);
_this2._observer.observe(element);
});

@@ -326,7 +379,7 @@ },

destroy: function destroy() {
var _this4 = this;
var _this3 = this;
if (this._observer) {
purgeElements(this._elements).forEach(function (element) {
_this4._observer.unobserve(element);
_this3._observer.unobserve(element);
});

@@ -333,0 +386,0 @@ this._observer = null;

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

98

dist/lazyload.es2015.js

@@ -12,2 +12,3 @@ var getInstanceSettings = customSettings => {

class_error: "error",
load_delay: 0,
callback_load: null,

@@ -25,3 +26,4 @@ callback_error: null,

const processedDataName = "was-processed";
const processedDataValue = "true";
const timeoutDataName = "ll-timeout";
const trueString = "true";

@@ -33,13 +35,23 @@ const getData = (element, attribute) => {

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);
};
const setWasProcessed = element =>
setData(element, processedDataName, processedDataValue);
const setWasProcessedData = element =>
setData(element, processedDataName, trueString);
const getWasProcessed = element =>
getData(element, processedDataName) === processedDataValue;
const getWasProcessedData = element =>
getData(element, processedDataName) === trueString;
const setTimeoutData = (element, value) =>
setData(element, timeoutDataName, value);
const getTimeoutData = element => getData(element, timeoutDataName);
function purgeElements(elements) {
return elements.filter(element => !getWasProcessed(element));
return elements.filter(element => !getWasProcessedData(element));
}

@@ -248,4 +260,31 @@

const loadAndUnobserve = (element, observer, settings) => {
revealElement(element, settings);
observer.unobserve(element);
};
const cancelDelayLoad = element => {
var timeoutId = getTimeoutData(element);
if (!timeoutId) {
return; // do nothing if timeout doesn't exist
}
clearTimeout(timeoutId);
setTimeoutData(element, null);
};
const delayLoad = (element, observer, settings) => {
var loadDelay = settings.load_delay;
var timeoutId = getTimeoutData(element);
if (timeoutId) {
return; // do nothing if timeout already set
}
timeoutId = setTimeout(function() {
loadAndUnobserve(element, observer, settings);
cancelDelayLoad(element);
}, loadDelay);
setTimeoutData(element, timeoutId);
};
function revealElement(element, settings, force) {
if (!force && getWasProcessed(element)) {
if (!force && getWasProcessedData(element)) {
return; // element has already been processed and force wasn't true

@@ -259,3 +298,3 @@ }

setSources(element, settings);
setWasProcessed(element);
setWasProcessedData(element);
callCallback(settings.callback_set, element);

@@ -266,8 +305,9 @@ }

entry.intersectionRatio is not enough alone because it could be 0 on some intersecting elements */
const isIntersecting = element =>
element.isIntersecting || element.intersectionRatio > 0;
const isIntersecting = entry =>
entry.isIntersecting || entry.intersectionRatio > 0;
const getObserverSettings = settings => ({
root: settings.container === document ? null : settings.container,
rootMargin: settings.threshold + "px"
rootMargin: settings.threshold + "px",
threshold: 0
});

@@ -282,2 +322,24 @@

LazyLoad.prototype = {
_manageIntersection: function(entry) {
var observer = this._observer;
var settings = this._settings;
var loadDelay = this._settings.load_delay;
var element = entry.target;
if (isIntersecting(entry)) {
if (!loadDelay) {
loadAndUnobserve(element, observer, settings);
} else {
delayLoad(element, observer, settings);
}
}
// Writes in and outs in a data-attribute
if (!isIntersecting(entry)) {
cancelDelayLoad(element);
}
},
_onIntersection: function(entries) {
entries.forEach(this._manageIntersection.bind(this));
this._elements = purgeElements(this._elements);
},
_setObserver: function() {

@@ -287,14 +349,4 @@ if (!supportsIntersectionObserver) {

}
const revealIntersectingElements = entries => {
entries.forEach(entry => {
if (isIntersecting(entry)) {
let element = entry.target;
this.load(element);
this._observer.unobserve(element);
}
});
this._elements = purgeElements(this._elements);
};
this._observer = new IntersectionObserver(
revealIntersectingElements,
this._onIntersection.bind(this),
getObserverSettings(this._settings)

@@ -301,0 +353,0 @@ );

115

dist/lazyload.iife.js

@@ -17,2 +17,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

class_error: "error",
load_delay: 0,
callback_load: null,

@@ -30,3 +31,4 @@ callback_error: null,

var processedDataName = "was-processed";
var processedDataValue = "true";
var timeoutDataName = "ll-timeout";
var trueString = "true";

@@ -38,16 +40,29 @@ var getData = function getData(element, attribute) {

var setData = function 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);
};
var setWasProcessed = function setWasProcessed(element) {
return setData(element, processedDataName, processedDataValue);
var setWasProcessedData = function setWasProcessedData(element) {
return setData(element, processedDataName, trueString);
};
var getWasProcessed = function getWasProcessed(element) {
return getData(element, processedDataName) === processedDataValue;
var getWasProcessedData = function getWasProcessedData(element) {
return getData(element, processedDataName) === trueString;
};
var setTimeoutData = function setTimeoutData(element, value) {
return setData(element, timeoutDataName, value);
};
var getTimeoutData = function getTimeoutData(element) {
return getData(element, timeoutDataName);
};
function purgeElements(elements) {
return elements.filter(function (element) {
return !getWasProcessed(element);
return !getWasProcessedData(element);
});

@@ -238,4 +253,31 @@ }

var loadAndUnobserve = function loadAndUnobserve(element, observer, settings) {
revealElement(element, settings);
observer.unobserve(element);
};
var cancelDelayLoad = function cancelDelayLoad(element) {
var timeoutId = getTimeoutData(element);
if (!timeoutId) {
return; // do nothing if timeout doesn't exist
}
clearTimeout(timeoutId);
setTimeoutData(element, null);
};
var delayLoad = function delayLoad(element, observer, settings) {
var loadDelay = settings.load_delay;
var timeoutId = getTimeoutData(element);
if (timeoutId) {
return; // do nothing if timeout already set
}
timeoutId = setTimeout(function () {
loadAndUnobserve(element, observer, settings);
cancelDelayLoad(element);
}, loadDelay);
setTimeoutData(element, timeoutId);
};
function revealElement(element, settings, force) {
if (!force && getWasProcessed(element)) {
if (!force && getWasProcessedData(element)) {
return; // element has already been processed and force wasn't true

@@ -249,3 +291,3 @@ }

setSources(element, settings);
setWasProcessed(element);
setWasProcessedData(element);
callCallback(settings.callback_set, element);

@@ -256,4 +298,4 @@ }

entry.intersectionRatio is not enough alone because it could be 0 on some intersecting elements */
var isIntersecting = function isIntersecting(element) {
return element.isIntersecting || element.intersectionRatio > 0;
var isIntersecting = function isIntersecting(entry) {
return entry.isIntersecting || entry.intersectionRatio > 0;
};

@@ -264,3 +306,4 @@

root: settings.container === document ? null : settings.container,
rootMargin: settings.threshold + "px"
rootMargin: settings.threshold + "px",
threshold: 0
};

@@ -276,26 +319,36 @@ };

LazyLoad.prototype = {
_manageIntersection: function _manageIntersection(entry) {
var observer = this._observer;
var settings = this._settings;
var loadDelay = this._settings.load_delay;
var element = entry.target;
if (isIntersecting(entry)) {
if (!loadDelay) {
loadAndUnobserve(element, observer, settings);
} else {
delayLoad(element, observer, settings);
}
}
// Writes in and outs in a data-attribute
if (!isIntersecting(entry)) {
cancelDelayLoad(element);
}
},
_onIntersection: function _onIntersection(entries) {
entries.forEach(this._manageIntersection.bind(this));
this._elements = purgeElements(this._elements);
},
_setObserver: function _setObserver() {
var _this = this;
if (!supportsIntersectionObserver) {
return;
}
var revealIntersectingElements = function revealIntersectingElements(entries) {
entries.forEach(function (entry) {
if (isIntersecting(entry)) {
var element = entry.target;
_this.load(element);
_this._observer.unobserve(element);
}
});
_this._elements = purgeElements(_this._elements);
};
this._observer = new IntersectionObserver(revealIntersectingElements, getObserverSettings(this._settings));
this._observer = new IntersectionObserver(this._onIntersection.bind(this), getObserverSettings(this._settings));
},
loadAll: function loadAll() {
var _this2 = this;
var _this = this;
this._elements.forEach(function (element) {
_this2.load(element);
_this.load(element);
});

@@ -306,3 +359,3 @@ this._elements = purgeElements(this._elements);

update: function update(elements) {
var _this3 = this;
var _this2 = this;

@@ -320,3 +373,3 @@ var settings = this._settings;

this._elements.forEach(function (element) {
_this3._observer.observe(element);
_this2._observer.observe(element);
});

@@ -326,7 +379,7 @@ },

destroy: function destroy() {
var _this4 = this;
var _this3 = this;
if (this._observer) {
purgeElements(this._elements).forEach(function (element) {
_this4._observer.unobserve(element);
_this3._observer.unobserve(element);
});

@@ -333,0 +386,0 @@ this._observer = null;

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

115

dist/lazyload.js

@@ -21,2 +21,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

class_error: "error",
load_delay: 0,
callback_load: null,

@@ -34,3 +35,4 @@ callback_error: null,

var processedDataName = "was-processed";
var processedDataValue = "true";
var timeoutDataName = "ll-timeout";
var trueString = "true";

@@ -42,16 +44,29 @@ var getData = function getData(element, attribute) {

var setData = function 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);
};
var setWasProcessed = function setWasProcessed(element) {
return setData(element, processedDataName, processedDataValue);
var setWasProcessedData = function setWasProcessedData(element) {
return setData(element, processedDataName, trueString);
};
var getWasProcessed = function getWasProcessed(element) {
return getData(element, processedDataName) === processedDataValue;
var getWasProcessedData = function getWasProcessedData(element) {
return getData(element, processedDataName) === trueString;
};
var setTimeoutData = function setTimeoutData(element, value) {
return setData(element, timeoutDataName, value);
};
var getTimeoutData = function getTimeoutData(element) {
return getData(element, timeoutDataName);
};
function purgeElements(elements) {
return elements.filter(function (element) {
return !getWasProcessed(element);
return !getWasProcessedData(element);
});

@@ -242,4 +257,31 @@ }

var loadAndUnobserve = function loadAndUnobserve(element, observer, settings) {
revealElement(element, settings);
observer.unobserve(element);
};
var cancelDelayLoad = function cancelDelayLoad(element) {
var timeoutId = getTimeoutData(element);
if (!timeoutId) {
return; // do nothing if timeout doesn't exist
}
clearTimeout(timeoutId);
setTimeoutData(element, null);
};
var delayLoad = function delayLoad(element, observer, settings) {
var loadDelay = settings.load_delay;
var timeoutId = getTimeoutData(element);
if (timeoutId) {
return; // do nothing if timeout already set
}
timeoutId = setTimeout(function () {
loadAndUnobserve(element, observer, settings);
cancelDelayLoad(element);
}, loadDelay);
setTimeoutData(element, timeoutId);
};
function revealElement(element, settings, force) {
if (!force && getWasProcessed(element)) {
if (!force && getWasProcessedData(element)) {
return; // element has already been processed and force wasn't true

@@ -253,3 +295,3 @@ }

setSources(element, settings);
setWasProcessed(element);
setWasProcessedData(element);
callCallback(settings.callback_set, element);

@@ -260,4 +302,4 @@ }

entry.intersectionRatio is not enough alone because it could be 0 on some intersecting elements */
var isIntersecting = function isIntersecting(element) {
return element.isIntersecting || element.intersectionRatio > 0;
var isIntersecting = function isIntersecting(entry) {
return entry.isIntersecting || entry.intersectionRatio > 0;
};

@@ -268,3 +310,4 @@

root: settings.container === document ? null : settings.container,
rootMargin: settings.threshold + "px"
rootMargin: settings.threshold + "px",
threshold: 0
};

@@ -280,26 +323,36 @@ };

LazyLoad.prototype = {
_manageIntersection: function _manageIntersection(entry) {
var observer = this._observer;
var settings = this._settings;
var loadDelay = this._settings.load_delay;
var element = entry.target;
if (isIntersecting(entry)) {
if (!loadDelay) {
loadAndUnobserve(element, observer, settings);
} else {
delayLoad(element, observer, settings);
}
}
// Writes in and outs in a data-attribute
if (!isIntersecting(entry)) {
cancelDelayLoad(element);
}
},
_onIntersection: function _onIntersection(entries) {
entries.forEach(this._manageIntersection.bind(this));
this._elements = purgeElements(this._elements);
},
_setObserver: function _setObserver() {
var _this = this;
if (!supportsIntersectionObserver) {
return;
}
var revealIntersectingElements = function revealIntersectingElements(entries) {
entries.forEach(function (entry) {
if (isIntersecting(entry)) {
var element = entry.target;
_this.load(element);
_this._observer.unobserve(element);
}
});
_this._elements = purgeElements(_this._elements);
};
this._observer = new IntersectionObserver(revealIntersectingElements, getObserverSettings(this._settings));
this._observer = new IntersectionObserver(this._onIntersection.bind(this), getObserverSettings(this._settings));
},
loadAll: function loadAll() {
var _this2 = this;
var _this = this;
this._elements.forEach(function (element) {
_this2.load(element);
_this.load(element);
});

@@ -310,3 +363,3 @@ this._elements = purgeElements(this._elements);

update: function update(elements) {
var _this3 = this;
var _this2 = this;

@@ -324,3 +377,3 @@ var settings = this._settings;

this._elements.forEach(function (element) {
_this3._observer.observe(element);
_this2._observer.observe(element);
});

@@ -330,7 +383,7 @@ },

destroy: function destroy() {
var _this4 = this;
var _this3 = this;
if (this._observer) {
purgeElements(this._elements).forEach(function (element) {
_this4._observer.unobserve(element);
_this3._observer.unobserve(element);
});

@@ -337,0 +390,0 @@ this._observer = null;

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

2

package.json
{
"name": "vanilla-lazyload",
"version": "10.15.0",
"version": "10.16.0-beta",
"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",

407

README.md
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).
Jump to:
➡️ Jump to: [👨‍💻 Include the script](#-include-the-script) - [🥧 Recipes](#-recipes) - [📺 Demos](#-demos) - [😋 Tips & tricks](#-tips--tricks) - [🔌 API](#-api) - [😯 Notable features](#-notable-features)
[Include the script](#include-the-script) | [Recipes](#recipes) | [Demos](#demos) | [Tips & tricks](#tips--tricks) | [API](#api) | [Notable features](#notable-features)
---
## 👨‍💻 Include the script
## Include the script / browser support
### Versions information
### Simple: direct include from cdnjs
The **universal, recommended version** of LazyLoad is **8.x** as it **supports ALL browsers** from IE9 up.
The **universal, recommended version** of LazyLoad is 8.x since it **supports ALL browsers** from IE9 up.
Version **10.x** is best for performance since it leverages IntersectionObserver API, which is [not supported by Internet Explorer and Safari](https://caniuse.com/#feat=intersectionobserver), therefore all the images would be loaded at once in those browsers.
Version **8.x** is recommended for [local install](#local-install), but you can be smart and [conditionally load the best version](#conditional-load) from cdnjs instead.
### Include as script from cdnjs
Version 8.x - [versions info](#versions-information)
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.14.0/lazyload.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.15.0/lazyload.min.js"></script>
```
Starting from version 9, LazyLoad uses the IntersectionObserver API, which is not supported by Internet Explorer and Safari (yet). As a result, if you included the latest version of LazyLoad, all the images would be loaded at once in those browsers.
Version 10.x - [versions info](#versions-information)
To include the [latest version](https://cdnjs.com/libraries/vanilla-lazyload) of LazyLoad, use the following script:
```html

@@ -26,5 +31,13 @@ <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.15.0/lazyload.min.js"></script>

### Advanced and best option: conditionally load version 8 or 10
The file `lazyload.min.js` is provided as UMD (<small>Universal Module Definition</small>).
<br>See [bundles](#bundles) for more module types like AMD, IIFE and ES6 module.
The best thing you can do is to conditionally load the best version of LazyLoad **depending on the browser's support of the IntersectionObserver API**.
#### Async script
It's possible to include it as an `async` script, see the [recipes](#recipes) section for more information.
#### Conditional load
The best thing you can do for **runtime performance** is to **conditionally load** the appropriate version of LazyLoad depending on browser support of IntersectionObserver.
You can do it with the following script:

@@ -34,35 +47,88 @@

(function(w, d){
var b = d.getElementsByTagName('body')[0];
var s = d.createElement("script"); s.async = true;
var v = !("IntersectionObserver" in w) ? "8.14.0" : "10.15.0";
s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
w.lazyLoadOptions = {}; // Your options here. See "recipes" for more information about async.
b.appendChild(s);
var b = d.getElementsByTagName('body')[0];
var s = d.createElement("script");
var v = !("IntersectionObserver" in w) ? "8.15.0" : "10.15.0";
s.async = true; // This includes the script as async. See the "recipes" section for more information about async loading of LazyLoad.
s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
w.lazyLoadOptions = {/* Your options here */};
b.appendChild(s);
}(window, document));
```
See the conditional_load.html file in the demos folder to try it or play around with it.
See `demos/conditional_load.html` to try and play around with it.
The file `lazyload.min.js` is provided as UMD (<small>Universal Module Definition</small>).
<br>See [bundles](#bundles) for more module types like AMD, IIFE and ES6 module.
### Include via require.js
If you use [require-js](https://requirejs.org) to dynamically load modules in your website, you can take advantage of it.
```js
define("vanilla-lazyLoad", ["https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.15.0/lazyload.amd.min.js"], function (LazyLoad) {
return LazyLoad;
});
```
You can also [conditionally load](#conditional-load) the best version.
```js
(function (w) {
var v = !("IntersectionObserver" in w) ? "8.15.0" : "10.15.0";
define("vanilla-lazyLoad", ["https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.amd.min.js"], function (LazyLoad) {
return LazyLoad;
});
}(window));
```
### Local install
If you prefer to install LazyLoad locally in your project, you can either:
- **download it** from the [`dist` folder](https://github.com/verlok/lazyload/tree/master/dist)
The file you typically want to use is `lazyload.min.js`
If you prefer the ES2015 version, use `lazyload.es2015.js`
- **install it with npm**
Recommended version `npm install vanilla-lazyload@8.14.0`
Latest version `npm install vanilla-lazyload`
- **install it with bower**
Recommended version `bower install vanilla-lazyload#8.14.0`
Latest version `bower install vanilla-lazyload`
### Async script
It's possible to include it as an `async` script, see [Recipes](#recipes) below.
#### Install with npm
## Recipes
Version 8.x, _recommended_ - [versions info](#versions-information)
```
npm install vanilla-lazyload@8.15.0
```
Version 10.x - [versions info](#versions-information)
```
npm install vanilla-lazyload@10.15.0
```
#### Install with bower
Install with bower is also possible using `bower install vanilla-lazyload#{version}`
#### Manual download
Download one the latest [releases](https://github.com/verlok/lazyload/releases/). The files you need are inside the `dist` folder.
The file `lazyload.min.js` is provided as UMD (<small>Universal Module Definition</small>).
<br>See [bundles](#bundles) for more module types like AMD, IIFE and ES6 module.
### Bundles
Inside `dist` folder you find different bundles.
| Filename | Module Type | Advantages |
| ---------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `lazyload.min.js` | UMD <small>(Universal Module Definition)</small> | Works pretty much everywhere, even in common-js contexts |
| `lazyload.iife.min.js` | IIFE <small>(Immediately Invoked Function Expression)</small> | Works as in-page `<script src="...">`, ~0.5kb smaller than UMD version |
| `lazyload.amd.min.js` | AMD <small>(Asynchronous Module Definition)</small> | Works with *require.js* module loader, ~0.5kb smaller than UMD version |
| `lazyload.es2015.js` | ES6 Module | Exports `LazyLoad` so you can import it in your project both using `<script type="module" src="...">` and a bundler like WebPack or Rollup |
---
## 🥧 Recipes
This is the section where you can find _copy & paste_ code for your convenience.
### Simple
**When to use**: your lazy images are (normally) located in the body of a scrolling page.
> 💡 **Use case**: your lazy images are (normally) located in the body of a scrolling page.

@@ -85,8 +151,85 @@ HTML

[DEMO](http://verlok.github.io/lazyload/demos/simple.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/simple.html) | [API](#api)
[DEMO](http://verlok.github.io/lazyload/demos/simple.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/simple.html) - [API](#api)
### Responsive images - srcset and sizes
### Scrolling panel
> **When to use**: you want to lazily load responsive images using the `srcset` and the `sizes` attribute.
> 💡 **Use case**: when your scrolling container is not the main browser window, but a scrolling container.
HTML
```html
<div class="scrollingPanel">
<img alt="Image description"
data-src="../img/44721746JJ_15_a.jpg"
width="220" height="280">
<!-- More images -->
</div>
```
CSS
```css
.scrollingPanel {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
```
Javascript
```js
var myLazyLoad = new LazyLoad({
container: document.getElementById('scrollingPanel')
});
```
[DEMO](http://verlok.github.io/lazyload/demos/single_container.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/single_container.html) - [API](#api)
### Multiple scrolling panels
> 💡 **Use case**: when your scrolling container is not the main browser window, and you have multiple scrolling containers.
HTML
```html
<div id="scrollingPanel1" class="scrollingPanel">
<img alt="Image description"
data-src="../img/44721746JJ_15_a.jpg"
width="220" height="280">
<!-- More images -->
</div>
<div id="scrollingPanel2" class="scrollingPanel">
<img alt="Image description"
data-src="../img/44721746JJ_15_a.jpg"
width="220" height="280">
<!-- More images -->
</div>
```
CSS
```css
.scrollingPanel {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
```
Javascript
```js
var myLazyLoad1 = new LazyLoad({
container: document.getElementById('scrollingPanel1')
});
var myLazyLoad2 = new LazyLoad({
container: document.getElementById('scrollingPanel2')
});
```
[DEMO](http://verlok.github.io/lazyload/demos/multiple_container.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/multiple_container.html) - [API](#api)
### Responsive images - img tag with srcset / sizes
> 💡 **Use case**: you want to lazily load responsive images using the `srcset` and the `sizes` attribute.
HTML

@@ -108,7 +251,7 @@

[DEMO](http://verlok.github.io/lazyload/demos/with_srcset_lazy_sizes.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/with_srcset_lazy_sizes.html) | [API](#api)
[DEMO](http://verlok.github.io/lazyload/demos/with_srcset_lazy_sizes.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/with_srcset_lazy_sizes.html) - [API](#api)
### Responsive images - picture
### Responsive images - picture tag
> **When to use**: you want to lazily load responsive images using the `picture` tag.
> 💡 **Use case**: you want to lazily load responsive images using the `picture` tag.

@@ -125,2 +268,4 @@ HTML

Please note that you just need to put the `lazy` class on the `<img>` tag but **not in the `<source>` tags**.
Javascript

@@ -134,7 +279,57 @@

[DEMO](http://verlok.github.io/lazyload/demos/with_picture.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/with_picture.html) | [API](#api)
[DEMO](http://verlok.github.io/lazyload/demos/with_picture.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/with_picture.html) - [API](#api)
### Switch to WebP
> 💡 **Use case**: you want to dynamically switch your images' filename extension to `.webp` if the user's browser supports it.
HTML
```html
<img class="lazy" data-src="/your/image1.jpg"
data-srcset="/your/image1.jpg 200w, /your/image1@2x.jpg 400w"
data-sizes="(min-width: 20em) 35vw, 100vw">
```
Javascript
```js
var myLazyLoad = new LazyLoad({
elements_selector: ".lazy",
to_webp: true
});
```
**Hint**: if you provide **only some images** in the WebP format, it's advisable to create 2 different instances of LazyLoad, as shown in the [this demo](http://verlok.github.io/lazyload/demos/to_webp_some.html) and [source code](https://github.com/verlok/lazyload/blob/master/demos/to_webp_some.html).
[DEMO](http://verlok.github.io/lazyload/demos/to_webp_all.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/to_webp_all.html) - [API](#api)
### Delay load
> 💡 **Use case**: you want the images to stay inside the viewport for some time before to start loading them, e.g. to skip loading some images them if the user scrolled fast after them.
HTML
```html
<img class="lazy" alt="..."
data-src="../img/44721746JJ_15_a.jpg"
width="220" height="280">
```
Javascript
```js
var myLazyLoad = new LazyLoad({
elements_selector: ".lazy",
load_delay: 300 //adjust according to use case
});
```
[DEMO](http://verlok.github.io/lazyload/demos/delay.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/delay.html) | [API](#api)
### Videos
> **When to use**: you want to lazily load videos using the `video` tag.
> 💡 **Use case**: you want to lazily load videos using the `video` tag.

@@ -160,7 +355,7 @@ HTML

[DEMO](http://verlok.github.io/lazyload/demos/video.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/video.html) | [API](#api)
[DEMO](http://verlok.github.io/lazyload/demos/video.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/video.html) - [API](#api)
### Iframes
> **When to use**: you want to lazily load `iframe`s.
> 💡 **Use case**: you want to lazily load `iframe`s.

@@ -181,7 +376,7 @@ HTML

[DEMO](http://verlok.github.io/lazyload/demos/iframes.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/iframes.html) | [API](#api)
[DEMO](http://verlok.github.io/lazyload/demos/iframes.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/iframes.html) - [API](#api)
### Async script + auto initialization
> **When to use**: you want to use a non-blocking script (which is faster), and you don't need to have control on the exact moment when LazyLoad is created.
> 💡 **Use case**: you want to use a non-blocking script (which is faster), and you don't need to have control on the exact moment when LazyLoad is created.

@@ -221,7 +416,7 @@ Include the following scripts **at the end of** your HTML page, right before closing the `body` tag.

[DEMO](http://verlok.github.io/lazyload/demos/async.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/async.html) | [API](#api)
[DEMO](http://verlok.github.io/lazyload/demos/async.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/async.html) - [API](#api)
#### Auto init + store the instance in a variable
> **When to use**: you want to use a non-blocking script (which is faster), you don't need to have control on the exact moment when LazyLoad is created, but you need to assign the an auto-initialized instance to a variable, e.g. to use the [API](#api) on it.
> 💡 **Use case**: you want to use a non-blocking script (which is faster), you don't need to have control on the exact moment when LazyLoad is created, but you need to assign the an auto-initialized instance to a variable, e.g. to use the [API](#api) on it.

@@ -250,3 +445,3 @@ HTML + Javascript

[DEMO](http://verlok.github.io/lazyload/demos/async.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/async.html) | [API](#api)
[DEMO](http://verlok.github.io/lazyload/demos/async.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/async.html) - [API](#api)

@@ -275,83 +470,5 @@ **Note about Internet Explorer**

### Scrolling panel
> **When to use**: when your scrolling container is not the main browser window, but a scrolling container.
HTML
```html
<div class="scrollingPanel">
<img alt="Image description"
data-src="../img/44721746JJ_15_a.jpg"
width="220" height="280">
<!-- More images -->
</div>
```
CSS
```css
.scrollingPanel {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
```
Javascript
```js
var myLazyLoad = new LazyLoad({
container: document.getElementById('scrollingPanel')
});
```
[DEMO](http://verlok.github.io/lazyload/demos/single_container.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/single_container.html) | [API](#api)
### Multiple scrolling panels
> **When to use**: when your scrolling container is not the main browser window, and you have multiple scrolling containers.
HTML
```html
<div id="scrollingPanel1" class="scrollingPanel">
<img alt="Image description"
data-src="../img/44721746JJ_15_a.jpg"
width="220" height="280">
<!-- More images -->
</div>
<div id="scrollingPanel2" class="scrollingPanel">
<img alt="Image description"
data-src="../img/44721746JJ_15_a.jpg"
width="220" height="280">
<!-- More images -->
</div>
```
CSS
```css
.scrollingPanel {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
```
Javascript
```js
var myLazyLoad1 = new LazyLoad({
container: document.getElementById('scrollingPanel1')
});
var myLazyLoad2 = new LazyLoad({
container: document.getElementById('scrollingPanel2')
});
```
[DEMO](http://verlok.github.io/lazyload/demos/multiple_container.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/multiple_container.html) | [API](#api)
### Dynamic content
> **When to use**: when you want to lazily load images, but the number of images change in the scrolling area changes, maybe because they are added asynchronously.
> 💡 **Use case**: when you want to lazily load images, but the number of images change in the scrolling area changes, maybe because they are added asynchronously.

@@ -370,7 +487,7 @@ HTML

[DEMO](http://verlok.github.io/lazyload/demos/dynamic_content.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/dynamic_content.html) | [API](#api)
[DEMO](http://verlok.github.io/lazyload/demos/dynamic_content.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/dynamic_content.html) - [API](#api)
### Lazy iframes
> **When to use**: you want to lazily load `iframe`s in your web page, maybe because you have many or just because you want to load only what your users actually want to see.
> 💡 **Use case**: you want to lazily load `iframe`s in your web page, maybe because you have many or just because you want to load only what your users actually want to see.

@@ -391,7 +508,7 @@ HTML

[DEMO](http://verlok.github.io/lazyload/demos/iframes.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/iframes.html) | [API](#api)
[DEMO](http://verlok.github.io/lazyload/demos/iframes.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/iframes.html) - [API](#api)
### Lazy background images
> **When to use**: your images are set as CSS background images instead of real `img`, but you still want to lazily load them.
> 💡 **Use case**: your images are set as CSS background images instead of real `img`, but you still want to lazily load them.

@@ -414,7 +531,7 @@ HTML

[DEMO](http://verlok.github.io/lazyload/demos/background_images.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/background_images.html) | [API](#api)
[DEMO](http://verlok.github.io/lazyload/demos/background_images.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/background_images.html) - [API](#api)
### Lazy LazyLoad
> **When to use**: when you have a lot of scrolling containers in the page and you want to instantiate a LazyLoad only on the ones that are in the viewport.
> 💡 **Use case**: when you have a lot of scrolling containers in the page and you want to instantiate a LazyLoad only on the ones that are in the viewport.

@@ -459,6 +576,8 @@ HTML

[DEMO](http://verlok.github.io/lazyload/demos/lazily_load_lazyLoad.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/lazily_load_lazyLoad.html) | [API](#api)
[DEMO](http://verlok.github.io/lazyload/demos/lazily_load_lazyLoad.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/lazily_load_lazyLoad.html) - [API](#api)
## Demos
---
## 📺 Demos
Didn't find the [recipe](#recipes) that exactly matches your case? We have demos!

@@ -468,4 +587,6 @@

## Tips & tricks
---
## 😋 Tips & tricks
### Occupy vertical space and maintain ratio

@@ -563,4 +684,6 @@

## API
---
## 🔌 API
### Constructor arguments

@@ -606,2 +729,6 @@

| `class_error` | The class applied to the elements when the element causes an error | `"error"` |
| `to_webp` | A boolean flag that activates the dynamic switch to WEBP feature. [More info](#switch-to-webp). | false |
| `load_delay` | [**Available only in version 10.16.0-beta**] The time (in milliseconds) each image needs to stay inside the viewport before its loading begins. | 0 |
| `callback_enter` | A function to be called when the DOM element enters the viewport. | `null` |

@@ -623,4 +750,6 @@ | `callback_set` | A function to be called after the src of an image is set in the DOM. | `null` |

## Notable features
---
## 😯 Notable features
### SEO friendly

@@ -642,2 +771,6 @@

### Dynamic switch to WEBP
[WebP](https://developers.google.com/speed/webp/) is a modern image format that provides superior lossless and lossy compression for images on the web. If you are providing your images in the WebP format too, LazyLoad can switch the filenames extension to `.webp` before the image is loaded, given that the user's browser supports it. See [WebP support table](https://caniuse.com/#feat=webp).
### Intersection Observer API for optimized CPU usage

@@ -644,0 +777,0 @@

23

src/lazyload.data.js
const dataPrefix = "data-";
const processedDataName = "was-processed";
const processedDataValue = "true";
const timeoutDataName = "ll-timeout";
const trueString = "true";

@@ -10,9 +11,19 @@ export const getData = (element, attribute) => {

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 =>
setData(element, processedDataName, processedDataValue);
export const setWasProcessedData = element =>
setData(element, processedDataName, trueString);
export const getWasProcessed = element =>
getData(element, processedDataName) === processedDataValue;
export const getWasProcessedData = element =>
getData(element, processedDataName) === trueString;
export const setTimeoutData = (element, value) =>
setData(element, timeoutDataName, value);
export const getTimeoutData = element => getData(element, timeoutDataName);

1

src/lazyload.defaults.js

@@ -12,2 +12,3 @@ export default customSettings => {

class_error: "error",
load_delay: 0,
callback_load: null,

@@ -14,0 +15,0 @@ callback_error: null,

7

src/lazyload.intersectionObserver.js
/* entry.isIntersecting needs fallback because is null on some versions of MS Edge, and
entry.intersectionRatio is not enough alone because it could be 0 on some intersecting elements */
export const isIntersecting = element =>
element.isIntersecting || element.intersectionRatio > 0;
export const isIntersecting = entry =>
entry.isIntersecting || entry.intersectionRatio > 0;
export const getObserverSettings = settings => ({
root: settings.container === document ? null : settings.container,
rootMargin: settings.threshold + "px"
rootMargin: settings.threshold + "px",
threshold: 0
});

41

src/lazyload.js
import getInstanceSettings from "./lazyload.defaults";
import purgeElements from "./lazyload.purge";
import autoInitialize from "./lazyload.autoInitialize";
import revealElement from "./lazyload.reveal";
import {
revealElement,
loadAndUnobserve,
delayLoad,
cancelDelayLoad
} from "./lazyload.reveal";
import {
isIntersecting,

@@ -22,2 +27,24 @@ getObserverSettings

LazyLoad.prototype = {
_manageIntersection: function(entry) {
var observer = this._observer;
var settings = this._settings;
var loadDelay = this._settings.load_delay;
var element = entry.target;
if (isIntersecting(entry)) {
if (!loadDelay) {
loadAndUnobserve(element, observer, settings);
} else {
delayLoad(element, observer, settings);
}
}
// Writes in and outs in a data-attribute
if (!isIntersecting(entry)) {
cancelDelayLoad(element);
}
},
_onIntersection: function(entries) {
entries.forEach(this._manageIntersection.bind(this));
this._elements = purgeElements(this._elements);
},
_setObserver: function() {

@@ -27,14 +54,4 @@ if (!supportsIntersectionObserver) {

}
const revealIntersectingElements = entries => {
entries.forEach(entry => {
if (isIntersecting(entry)) {
let element = entry.target;
this.load(element);
this._observer.unobserve(element);
}
});
this._elements = purgeElements(this._elements);
};
this._observer = new IntersectionObserver(
revealIntersectingElements,
this._onIntersection.bind(this),
getObserverSettings(this._settings)

@@ -41,0 +58,0 @@ );

4

src/lazyload.purge.js

@@ -1,5 +0,5 @@

import { getWasProcessed } from "./lazyload.data";
import { getWasProcessedData } from "./lazyload.data";
export default function(elements) {
return elements.filter(element => !getWasProcessed(element));
return elements.filter(element => !getWasProcessedData(element));
}

40

src/lazyload.reveal.js
import { setSources } from "./lazyload.setSources";
import { getWasProcessed, setWasProcessed } from "./lazyload.data";
import {
setTimeoutData,
getTimeoutData,
getWasProcessedData,
setWasProcessedData
} from "./lazyload.data";
import { addClass, removeClass } from "./lazyload.class";

@@ -44,4 +49,31 @@

export default function(element, settings, force) {
if (!force && getWasProcessed(element)) {
export const loadAndUnobserve = (element, observer, settings) => {
revealElement(element, settings);
observer.unobserve(element);
};
export const cancelDelayLoad = element => {
var timeoutId = getTimeoutData(element);
if (!timeoutId) {
return; // do nothing if timeout doesn't exist
}
clearTimeout(timeoutId);
setTimeoutData(element, null);
};
export const delayLoad = (element, observer, settings) => {
var loadDelay = settings.load_delay;
var timeoutId = getTimeoutData(element);
if (timeoutId) {
return; // do nothing if timeout already set
}
timeoutId = setTimeout(function() {
loadAndUnobserve(element, observer, settings);
cancelDelayLoad(element);
}, loadDelay);
setTimeoutData(element, timeoutId);
};
export function revealElement(element, settings, force) {
if (!force && getWasProcessedData(element)) {
return; // element has already been processed and force wasn't true

@@ -55,4 +87,4 @@ }

setSources(element, settings);
setWasProcessed(element);
setWasProcessedData(element);
callCallback(settings.callback_set, element);
}
_config.yml

Sorry, the diff of this file is not supported yet

demos/conditional_load.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