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 10.18.0 to 10.19.0

__tests__/lib/getFakeInstance.js
demos/print.html

6

__tests__/lazyload.reveal.test.js
import { revealElement } from "../src/lazyload.reveal";
import getSettings from "../src/lazyload.defaults";
import expectExtend from "./lib/expectExtend";
import getFakeInstance from "./lib/getFakeInstance";

@@ -37,3 +37,3 @@ test("revealElement is defined", () => {

test("...data-was-processed is set", () => {
revealElement(img, getSettings());
revealElement(img, getFakeInstance());
expect(img).toHaveAttributeValue("data-was-processed", "true");

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

img,
getSettings({
getFakeInstance({
callback_enter: callbackEnterMock,

@@ -50,0 +50,0 @@ callback_set: callbackSetMock

23

__tests__/lazyload.setSources.test.js
import { setSources, setSourcesInChildren } from "../src/lazyLoad.setSources";
import expectExtend from "./lib/expectExtend";
import getFakeInstance from "./lib/getFakeInstance";

@@ -30,3 +31,3 @@ const lazyloadSettings = {

img.setAttribute("data-srcset", img400);
setSources(img, lazyloadSettings);
setSources(img, getFakeInstance(lazyloadSettings));
expect(img).toHaveAttributeValue("src", img200);

@@ -41,3 +42,3 @@ expect(img).toHaveAttributeValue("srcset", img400);

img.setAttribute("srcset", img1);
setSources(img, lazyloadSettings);
setSources(img, getFakeInstance(lazyloadSettings));
expect(img).toHaveAttributeValue("src", img200);

@@ -51,3 +52,3 @@ expect(img).toHaveAttributeValue("srcset", img400);

img.setAttribute("srcset", img400);
setSources(img, lazyloadSettings);
setSources(img, getFakeInstance(lazyloadSettings));
expect(img).toHaveAttributeValue("src", img200);

@@ -68,3 +69,3 @@ expect(img).toHaveAttributeValue("srcset", img400);

iframe.setAttribute("data-src", srcToLoad);
setSources(iframe, lazyloadSettings);
setSources(iframe, getFakeInstance(lazyloadSettings));
expect(iframe).toHaveAttributeValue("src", srcToLoad);

@@ -75,3 +76,3 @@ });

iframe.setAttribute("src", preloadedSrc);
setSources(iframe, lazyloadSettings);
setSources(iframe, getFakeInstance(lazyloadSettings));
expect(iframe).toHaveAttributeValue("src", srcToLoad);

@@ -82,3 +83,3 @@ });

iframe.setAttribute("src", preloadedSrc);
setSources(iframe, lazyloadSettings);
setSources(iframe, getFakeInstance(lazyloadSettings));
expect(iframe).toHaveAttributeValue("src", preloadedSrc);

@@ -99,3 +100,3 @@ });

element.setAttribute("data-src", img200);
setSources(element, lazyloadSettings);
setSources(element, getFakeInstance(lazyloadSettings));
// Test cheating: bug in JsDOM doesn't return the url("") with quotes inside

@@ -109,3 +110,3 @@ expect(element.style.backgroundImage).toBe(`url(${img200})`);

};
setSources(element, lazyloadSettings);
setSources(element, getFakeInstance(lazyloadSettings));
// Test cheating: bug in JsDOM doesn't return the url("") with quotes inside

@@ -120,3 +121,3 @@ expect(element.style.backgroundImage).toBe(`url(${img100})`);

};
setSources(element, lazyloadSettings);
setSources(element, getFakeInstance(lazyloadSettings));
// Test cheating: bug in JsDOM doesn't return the url("") with quotes inside

@@ -209,3 +210,3 @@ expect(element.style.backgroundImage).toBe(`url(${img200})`);

video.setAttribute("data-src", videoUrl);
setSources(video, lazyloadSettings);
setSources(video, getFakeInstance(lazyloadSettings));
expect(video).toHaveAttributeValue("src", videoUrl);

@@ -230,3 +231,3 @@ });

img.setAttribute("data-srcset", img400);
setSources(img, lazyloadSettings);
setSources(img, getFakeInstance(lazyloadSettings));
expect(img).toHaveAttributeValue("src", img200);

@@ -233,0 +234,0 @@ expect(img).toHaveAttributeValue("srcset", img400);

13

CHANGELOG.md

@@ -5,9 +5,14 @@ # CHANGELOG

#### 10.19.0
- Added the ability to know when all images have been downloaded through the `callback_finish` callback.
- Added the file `demos/print.html` to demo how to print lazy images.
#### 10.18.0
Added the ability to have multiple background images, through a new `data_bg` option.
Added the ability to have multiple background images, through the new `data_bg` option.
#### 10.17.0
Added the ability to set different thresholds for the scrolling area, through a new `thresholds` option.
Added the ability to set different thresholds for the scrolling area, through the new `thresholds` option.

@@ -170,2 +175,6 @@ #### 10.16.2

#### 8.16.0
Added the ability to have multiple background images, through the new `data_bg` option.
#### 8.15.2

@@ -172,0 +181,0 @@

112

dist/lazyload.amd.js

@@ -23,2 +23,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; };

callback_enter: null,
callback_finish: null,
to_webp: false

@@ -65,8 +66,14 @@ };

function purgeElements(elements) {
var purgeProcessedElements = function purgeProcessedElements(elements) {
return elements.filter(function (element) {
return !getWasProcessedData(element);
});
}
};
var purgeOneElement = function purgeOneElement(elements, elementToPurge) {
return elements.filter(function (element) {
return element !== elementToPurge;
});
};
/* Creates instance and notifies it through the window element */

@@ -199,3 +206,4 @@ var createInstance = function createInstance(classObj, options) {

var setSources = function setSources(element, settings) {
var setSources = function setSources(element, instance) {
var settings = instance._settings;
var tagName = element.tagName;

@@ -205,2 +213,4 @@ var setSourcesFunction = setSourcesFunctions[tagName];

setSourcesFunction(element, settings);
instance._updateLoadingCount(1);
instance._elements = purgeOneElement(instance._elements, element);
return;

@@ -245,3 +255,3 @@ }

var addAllEventListeners = function addAllEventListeners(element, loadHandler, errorHandler) {
var addEventListeners = function addEventListeners(element, loadHandler, errorHandler) {
addEventListener(element, genericLoadEventName, loadHandler);

@@ -252,3 +262,3 @@ addEventListener(element, mediaLoadEventName, loadHandler);

var removeAllEventListeners = function removeAllEventListeners(element, loadHandler, errorHandler) {
var removeEventListeners = function removeEventListeners(element, loadHandler, errorHandler) {
removeEventListener(element, genericLoadEventName, loadHandler);

@@ -259,3 +269,4 @@ removeEventListener(element, mediaLoadEventName, loadHandler);

var eventHandler = function eventHandler(event, success, settings) {
var eventHandler = function eventHandler(event, success, instance) {
var settings = instance._settings;
var className = success ? settings.class_loaded : settings.class_error;

@@ -268,14 +279,16 @@ var callback = success ? settings.callback_load : settings.callback_error;

callbackIfSet(callback, element);
instance._updateLoadingCount(-1);
};
var addOneShotEventListeners = function addOneShotEventListeners(element, settings) {
var addOneShotEventListeners = function addOneShotEventListeners(element, instance) {
var loadHandler = function loadHandler(event) {
eventHandler(event, true, settings);
removeAllEventListeners(element, loadHandler, errorHandler);
eventHandler(event, true, instance);
removeEventListeners(element, loadHandler, errorHandler);
};
var errorHandler = function errorHandler(event) {
eventHandler(event, false, settings);
removeAllEventListeners(element, loadHandler, errorHandler);
eventHandler(event, false, instance);
removeEventListeners(element, loadHandler, errorHandler);
};
addAllEventListeners(element, loadHandler, errorHandler);
addEventListeners(element, loadHandler, errorHandler);
};

@@ -285,4 +298,4 @@

var loadAndUnobserve = function loadAndUnobserve(element, observer, settings) {
revealElement(element, settings);
var loadAndUnobserve = function loadAndUnobserve(element, observer, instance) {
revealElement(element, instance);
observer.unobserve(element);

@@ -300,4 +313,4 @@ };

var delayLoad = function delayLoad(element, observer, settings) {
var loadDelay = settings.load_delay;
var delayLoad = function delayLoad(element, observer, instance) {
var loadDelay = instance._settings.load_delay;
var timeoutId = getTimeoutData(element);

@@ -308,3 +321,3 @@ if (timeoutId) {

timeoutId = setTimeout(function () {
loadAndUnobserve(element, observer, settings);
loadAndUnobserve(element, observer, instance);
cancelDelayLoad(element);

@@ -315,3 +328,4 @@ }, loadDelay);

function revealElement(element, settings, force) {
function revealElement(element, instance, force) {
var settings = instance._settings;
if (!force && getWasProcessedData(element)) {

@@ -322,6 +336,6 @@ return; // element has already been processed and force wasn't true

if (managedTags.indexOf(element.tagName) > -1) {
addOneShotEventListeners(element, settings);
addOneShotEventListeners(element, instance);
addClass(element, settings.class_loading);
}
setSources(element, settings);
setSources(element, instance);
setWasProcessedData(element);

@@ -347,2 +361,3 @@ callbackIfSet(settings.callback_set, element);

this._setObserver();
this._loadingCount = 0;
this.update(elements);

@@ -354,22 +369,25 @@ };

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);
// WITHOUT LOAD DELAY
if (!loadDelay) {
if (isIntersecting(entry)) {
loadAndUnobserve(element, observer, this);
}
return;
}
// Writes in and outs in a data-attribute
if (!isIntersecting(entry)) {
// WITH LOAD DELAY
if (isIntersecting(entry)) {
delayLoad(element, observer, this);
} else {
cancelDelayLoad(element);
}
},
_onIntersection: function _onIntersection(entries) {
entries.forEach(this._manageIntersection.bind(this));
this._elements = purgeElements(this._elements);
},
_setObserver: function _setObserver() {

@@ -382,13 +400,11 @@ if (!supportsIntersectionObserver) {

loadAll: function loadAll() {
var _this = this;
this._elements.forEach(function (element) {
_this.load(element);
});
this._elements = purgeElements(this._elements);
_updateLoadingCount: function _updateLoadingCount(plusMinus) {
this._loadingCount += plusMinus;
if (this._elements.length === 0 && this._loadingCount === 0) {
callbackIfSet(this._settings.callback_finish);
}
},
update: function update(elements) {
var _this2 = this;
var _this = this;

@@ -398,3 +414,4 @@ var settings = this._settings;

this._elements = purgeElements(Array.prototype.slice.call(nodeSet)); // nodeset to array for IE compatibility
this._elements = purgeProcessedElements(Array.prototype.slice.call(nodeSet) // NOTE: nodeset to array for IE compatibility
);

@@ -407,3 +424,3 @@ if (isBot || !this._observer) {

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

@@ -413,7 +430,7 @@ },

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

@@ -427,3 +444,12 @@ this._observer = null;

load: function load(element, force) {
revealElement(element, this._settings, force);
revealElement(element, this, force);
},
loadAll: function loadAll() {
var _this3 = this;
var elements = this._elements;
elements.forEach(function (element) {
_this3.load(element);
});
}

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

2

dist/lazyload.amd.min.js

@@ -1,2 +0,2 @@

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

117

dist/lazyload.es2015.js

@@ -18,2 +18,3 @@ const defaultSettings = {

callback_enter: null,
callback_finish: null,
to_webp: false

@@ -55,6 +56,10 @@ };

function purgeElements(elements) {
const purgeProcessedElements = elements => {
return elements.filter(element => !getWasProcessedData(element));
}
};
const purgeOneElement = (elements, elementToPurge) => {
return elements.filter(element => element !== elementToPurge);
};
/* Creates instance and notifies it through the window element */

@@ -181,13 +186,13 @@ const createInstance = function(classObj, options) {

const srcDataValue = getData(element, settings.data_src);
const bgDataValue = getData(element, settings.data_bg);
const bgDataValue = getData(element, settings.data_bg);
if (srcDataValue) {
let setValue = replaceExtToWebp(srcDataValue, toWebpFlag);
element.style.backgroundImage = `url("${setValue}")`;
}
if (srcDataValue) {
let setValue = replaceExtToWebp(srcDataValue, toWebpFlag);
element.style.backgroundImage = `url("${setValue}")`;
}
if (bgDataValue) {
let setValue = replaceExtToWebp(bgDataValue, toWebpFlag);
element.style.backgroundImage = setValue;
}
if (bgDataValue) {
let setValue = replaceExtToWebp(bgDataValue, toWebpFlag);
element.style.backgroundImage = setValue;
}
};

@@ -201,3 +206,4 @@

const setSources = (element, settings) => {
const setSources = (element, instance) => {
const settings = instance._settings;
const tagName = element.tagName;

@@ -207,2 +213,4 @@ const setSourcesFunction = setSourcesFunctions[tagName];

setSourcesFunction(element, settings);
instance._updateLoadingCount(1);
instance._elements = purgeOneElement(instance._elements, element);
return;

@@ -250,3 +258,3 @@ }

const addAllEventListeners = (element, loadHandler, errorHandler) => {
const addEventListeners = (element, loadHandler, errorHandler) => {
addEventListener(element, genericLoadEventName, loadHandler);

@@ -257,3 +265,3 @@ addEventListener(element, mediaLoadEventName, loadHandler);

const removeAllEventListeners = (element, loadHandler, errorHandler) => {
const removeEventListeners = (element, loadHandler, errorHandler) => {
removeEventListener(element, genericLoadEventName, loadHandler);

@@ -264,3 +272,4 @@ removeEventListener(element, mediaLoadEventName, loadHandler);

const eventHandler = function(event, success, settings) {
const eventHandler = function(event, success, instance) {
var settings = instance._settings;
const className = success ? settings.class_loaded : settings.class_error;

@@ -273,14 +282,16 @@ const callback = success ? settings.callback_load : settings.callback_error;

callbackIfSet(callback, element);
instance._updateLoadingCount(-1);
};
const addOneShotEventListeners = (element, settings) => {
const addOneShotEventListeners = (element, instance) => {
const loadHandler = event => {
eventHandler(event, true, settings);
removeAllEventListeners(element, loadHandler, errorHandler);
eventHandler(event, true, instance);
removeEventListeners(element, loadHandler, errorHandler);
};
const errorHandler = event => {
eventHandler(event, false, settings);
removeAllEventListeners(element, loadHandler, errorHandler);
eventHandler(event, false, instance);
removeEventListeners(element, loadHandler, errorHandler);
};
addAllEventListeners(element, loadHandler, errorHandler);
addEventListeners(element, loadHandler, errorHandler);
};

@@ -290,4 +301,4 @@

const loadAndUnobserve = (element, observer, settings) => {
revealElement(element, settings);
const loadAndUnobserve = (element, observer, instance) => {
revealElement(element, instance);
observer.unobserve(element);

@@ -305,4 +316,4 @@ };

const delayLoad = (element, observer, settings) => {
var loadDelay = settings.load_delay;
const delayLoad = (element, observer, instance) => {
var loadDelay = instance._settings.load_delay;
var timeoutId = getTimeoutData(element);

@@ -313,3 +324,3 @@ if (timeoutId) {

timeoutId = setTimeout(function() {
loadAndUnobserve(element, observer, settings);
loadAndUnobserve(element, observer, instance);
cancelDelayLoad(element);

@@ -320,3 +331,4 @@ }, loadDelay);

function revealElement(element, settings, force) {
function revealElement(element, instance, force) {
var settings = instance._settings;
if (!force && getWasProcessedData(element)) {

@@ -327,6 +339,6 @@ return; // element has already been processed and force wasn't true

if (managedTags.indexOf(element.tagName) > -1) {
addOneShotEventListeners(element, settings);
addOneShotEventListeners(element, instance);
addClass(element, settings.class_loading);
}
setSources(element, settings);
setSources(element, instance);
setWasProcessedData(element);

@@ -349,2 +361,3 @@ callbackIfSet(settings.callback_set, element);

this._setObserver();
this._loadingCount = 0;
this.update(elements);

@@ -356,22 +369,25 @@ };

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);
// WITHOUT LOAD DELAY
if (!loadDelay) {
if (isIntersecting(entry)) {
loadAndUnobserve(element, observer, this);
}
return;
}
// Writes in and outs in a data-attribute
if (!isIntersecting(entry)) {
// WITH LOAD DELAY
if (isIntersecting(entry)) {
delayLoad(element, observer, this);
} else {
cancelDelayLoad(element);
}
},
_onIntersection: function(entries) {
entries.forEach(this._manageIntersection.bind(this));
this._elements = purgeElements(this._elements);
},
_setObserver: function() {

@@ -387,7 +403,7 @@ if (!supportsIntersectionObserver) {

loadAll: function() {
this._elements.forEach(element => {
this.load(element);
});
this._elements = purgeElements(this._elements);
_updateLoadingCount: function(plusMinus) {
this._loadingCount += plusMinus;
if (this._elements.length === 0 && this._loadingCount === 0) {
callbackIfSet(this._settings.callback_finish);
}
},

@@ -401,3 +417,5 @@

this._elements = purgeElements(Array.prototype.slice.call(nodeSet)); // nodeset to array for IE compatibility
this._elements = purgeProcessedElements(
Array.prototype.slice.call(nodeSet) // NOTE: nodeset to array for IE compatibility
);

@@ -416,3 +434,3 @@ if (isBot || !this._observer) {

if (this._observer) {
purgeElements(this._elements).forEach(element => {
this._elements.forEach(element => {
this._observer.unobserve(element);

@@ -427,3 +445,10 @@ });

load: function(element, force) {
revealElement(element, this._settings, force);
revealElement(element, this, force);
},
loadAll: function() {
var elements = this._elements;
elements.forEach(element => {
this.load(element);
});
}

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

112

dist/lazyload.iife.js

@@ -23,2 +23,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; };

callback_enter: null,
callback_finish: null,
to_webp: false

@@ -65,8 +66,14 @@ };

function purgeElements(elements) {
var purgeProcessedElements = function purgeProcessedElements(elements) {
return elements.filter(function (element) {
return !getWasProcessedData(element);
});
}
};
var purgeOneElement = function purgeOneElement(elements, elementToPurge) {
return elements.filter(function (element) {
return element !== elementToPurge;
});
};
/* Creates instance and notifies it through the window element */

@@ -199,3 +206,4 @@ var createInstance = function createInstance(classObj, options) {

var setSources = function setSources(element, settings) {
var setSources = function setSources(element, instance) {
var settings = instance._settings;
var tagName = element.tagName;

@@ -205,2 +213,4 @@ var setSourcesFunction = setSourcesFunctions[tagName];

setSourcesFunction(element, settings);
instance._updateLoadingCount(1);
instance._elements = purgeOneElement(instance._elements, element);
return;

@@ -245,3 +255,3 @@ }

var addAllEventListeners = function addAllEventListeners(element, loadHandler, errorHandler) {
var addEventListeners = function addEventListeners(element, loadHandler, errorHandler) {
addEventListener(element, genericLoadEventName, loadHandler);

@@ -252,3 +262,3 @@ addEventListener(element, mediaLoadEventName, loadHandler);

var removeAllEventListeners = function removeAllEventListeners(element, loadHandler, errorHandler) {
var removeEventListeners = function removeEventListeners(element, loadHandler, errorHandler) {
removeEventListener(element, genericLoadEventName, loadHandler);

@@ -259,3 +269,4 @@ removeEventListener(element, mediaLoadEventName, loadHandler);

var eventHandler = function eventHandler(event, success, settings) {
var eventHandler = function eventHandler(event, success, instance) {
var settings = instance._settings;
var className = success ? settings.class_loaded : settings.class_error;

@@ -268,14 +279,16 @@ var callback = success ? settings.callback_load : settings.callback_error;

callbackIfSet(callback, element);
instance._updateLoadingCount(-1);
};
var addOneShotEventListeners = function addOneShotEventListeners(element, settings) {
var addOneShotEventListeners = function addOneShotEventListeners(element, instance) {
var loadHandler = function loadHandler(event) {
eventHandler(event, true, settings);
removeAllEventListeners(element, loadHandler, errorHandler);
eventHandler(event, true, instance);
removeEventListeners(element, loadHandler, errorHandler);
};
var errorHandler = function errorHandler(event) {
eventHandler(event, false, settings);
removeAllEventListeners(element, loadHandler, errorHandler);
eventHandler(event, false, instance);
removeEventListeners(element, loadHandler, errorHandler);
};
addAllEventListeners(element, loadHandler, errorHandler);
addEventListeners(element, loadHandler, errorHandler);
};

@@ -285,4 +298,4 @@

var loadAndUnobserve = function loadAndUnobserve(element, observer, settings) {
revealElement(element, settings);
var loadAndUnobserve = function loadAndUnobserve(element, observer, instance) {
revealElement(element, instance);
observer.unobserve(element);

@@ -300,4 +313,4 @@ };

var delayLoad = function delayLoad(element, observer, settings) {
var loadDelay = settings.load_delay;
var delayLoad = function delayLoad(element, observer, instance) {
var loadDelay = instance._settings.load_delay;
var timeoutId = getTimeoutData(element);

@@ -308,3 +321,3 @@ if (timeoutId) {

timeoutId = setTimeout(function () {
loadAndUnobserve(element, observer, settings);
loadAndUnobserve(element, observer, instance);
cancelDelayLoad(element);

@@ -315,3 +328,4 @@ }, loadDelay);

function revealElement(element, settings, force) {
function revealElement(element, instance, force) {
var settings = instance._settings;
if (!force && getWasProcessedData(element)) {

@@ -322,6 +336,6 @@ return; // element has already been processed and force wasn't true

if (managedTags.indexOf(element.tagName) > -1) {
addOneShotEventListeners(element, settings);
addOneShotEventListeners(element, instance);
addClass(element, settings.class_loading);
}
setSources(element, settings);
setSources(element, instance);
setWasProcessedData(element);

@@ -347,2 +361,3 @@ callbackIfSet(settings.callback_set, element);

this._setObserver();
this._loadingCount = 0;
this.update(elements);

@@ -354,22 +369,25 @@ };

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);
// WITHOUT LOAD DELAY
if (!loadDelay) {
if (isIntersecting(entry)) {
loadAndUnobserve(element, observer, this);
}
return;
}
// Writes in and outs in a data-attribute
if (!isIntersecting(entry)) {
// WITH LOAD DELAY
if (isIntersecting(entry)) {
delayLoad(element, observer, this);
} else {
cancelDelayLoad(element);
}
},
_onIntersection: function _onIntersection(entries) {
entries.forEach(this._manageIntersection.bind(this));
this._elements = purgeElements(this._elements);
},
_setObserver: function _setObserver() {

@@ -382,13 +400,11 @@ if (!supportsIntersectionObserver) {

loadAll: function loadAll() {
var _this = this;
this._elements.forEach(function (element) {
_this.load(element);
});
this._elements = purgeElements(this._elements);
_updateLoadingCount: function _updateLoadingCount(plusMinus) {
this._loadingCount += plusMinus;
if (this._elements.length === 0 && this._loadingCount === 0) {
callbackIfSet(this._settings.callback_finish);
}
},
update: function update(elements) {
var _this2 = this;
var _this = this;

@@ -398,3 +414,4 @@ var settings = this._settings;

this._elements = purgeElements(Array.prototype.slice.call(nodeSet)); // nodeset to array for IE compatibility
this._elements = purgeProcessedElements(Array.prototype.slice.call(nodeSet) // NOTE: nodeset to array for IE compatibility
);

@@ -407,3 +424,3 @@ if (isBot || !this._observer) {

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

@@ -413,7 +430,7 @@ },

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

@@ -427,3 +444,12 @@ this._observer = null;

load: function load(element, force) {
revealElement(element, this._settings, force);
revealElement(element, this, force);
},
loadAll: function loadAll() {
var _this3 = this;
var elements = this._elements;
elements.forEach(function (element) {
_this3.load(element);
});
}

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

2

dist/lazyload.iife.min.js

@@ -1,2 +0,2 @@

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

112

dist/lazyload.js

@@ -27,2 +27,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; };

callback_enter: null,
callback_finish: null,
to_webp: false

@@ -69,8 +70,14 @@ };

function purgeElements(elements) {
var purgeProcessedElements = function purgeProcessedElements(elements) {
return elements.filter(function (element) {
return !getWasProcessedData(element);
});
}
};
var purgeOneElement = function purgeOneElement(elements, elementToPurge) {
return elements.filter(function (element) {
return element !== elementToPurge;
});
};
/* Creates instance and notifies it through the window element */

@@ -203,3 +210,4 @@ var createInstance = function createInstance(classObj, options) {

var setSources = function setSources(element, settings) {
var setSources = function setSources(element, instance) {
var settings = instance._settings;
var tagName = element.tagName;

@@ -209,2 +217,4 @@ var setSourcesFunction = setSourcesFunctions[tagName];

setSourcesFunction(element, settings);
instance._updateLoadingCount(1);
instance._elements = purgeOneElement(instance._elements, element);
return;

@@ -249,3 +259,3 @@ }

var addAllEventListeners = function addAllEventListeners(element, loadHandler, errorHandler) {
var addEventListeners = function addEventListeners(element, loadHandler, errorHandler) {
addEventListener(element, genericLoadEventName, loadHandler);

@@ -256,3 +266,3 @@ addEventListener(element, mediaLoadEventName, loadHandler);

var removeAllEventListeners = function removeAllEventListeners(element, loadHandler, errorHandler) {
var removeEventListeners = function removeEventListeners(element, loadHandler, errorHandler) {
removeEventListener(element, genericLoadEventName, loadHandler);

@@ -263,3 +273,4 @@ removeEventListener(element, mediaLoadEventName, loadHandler);

var eventHandler = function eventHandler(event, success, settings) {
var eventHandler = function eventHandler(event, success, instance) {
var settings = instance._settings;
var className = success ? settings.class_loaded : settings.class_error;

@@ -272,14 +283,16 @@ var callback = success ? settings.callback_load : settings.callback_error;

callbackIfSet(callback, element);
instance._updateLoadingCount(-1);
};
var addOneShotEventListeners = function addOneShotEventListeners(element, settings) {
var addOneShotEventListeners = function addOneShotEventListeners(element, instance) {
var loadHandler = function loadHandler(event) {
eventHandler(event, true, settings);
removeAllEventListeners(element, loadHandler, errorHandler);
eventHandler(event, true, instance);
removeEventListeners(element, loadHandler, errorHandler);
};
var errorHandler = function errorHandler(event) {
eventHandler(event, false, settings);
removeAllEventListeners(element, loadHandler, errorHandler);
eventHandler(event, false, instance);
removeEventListeners(element, loadHandler, errorHandler);
};
addAllEventListeners(element, loadHandler, errorHandler);
addEventListeners(element, loadHandler, errorHandler);
};

@@ -289,4 +302,4 @@

var loadAndUnobserve = function loadAndUnobserve(element, observer, settings) {
revealElement(element, settings);
var loadAndUnobserve = function loadAndUnobserve(element, observer, instance) {
revealElement(element, instance);
observer.unobserve(element);

@@ -304,4 +317,4 @@ };

var delayLoad = function delayLoad(element, observer, settings) {
var loadDelay = settings.load_delay;
var delayLoad = function delayLoad(element, observer, instance) {
var loadDelay = instance._settings.load_delay;
var timeoutId = getTimeoutData(element);

@@ -312,3 +325,3 @@ if (timeoutId) {

timeoutId = setTimeout(function () {
loadAndUnobserve(element, observer, settings);
loadAndUnobserve(element, observer, instance);
cancelDelayLoad(element);

@@ -319,3 +332,4 @@ }, loadDelay);

function revealElement(element, settings, force) {
function revealElement(element, instance, force) {
var settings = instance._settings;
if (!force && getWasProcessedData(element)) {

@@ -326,6 +340,6 @@ return; // element has already been processed and force wasn't true

if (managedTags.indexOf(element.tagName) > -1) {
addOneShotEventListeners(element, settings);
addOneShotEventListeners(element, instance);
addClass(element, settings.class_loading);
}
setSources(element, settings);
setSources(element, instance);
setWasProcessedData(element);

@@ -351,2 +365,3 @@ callbackIfSet(settings.callback_set, element);

this._setObserver();
this._loadingCount = 0;
this.update(elements);

@@ -358,22 +373,25 @@ };

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);
// WITHOUT LOAD DELAY
if (!loadDelay) {
if (isIntersecting(entry)) {
loadAndUnobserve(element, observer, this);
}
return;
}
// Writes in and outs in a data-attribute
if (!isIntersecting(entry)) {
// WITH LOAD DELAY
if (isIntersecting(entry)) {
delayLoad(element, observer, this);
} else {
cancelDelayLoad(element);
}
},
_onIntersection: function _onIntersection(entries) {
entries.forEach(this._manageIntersection.bind(this));
this._elements = purgeElements(this._elements);
},
_setObserver: function _setObserver() {

@@ -386,13 +404,11 @@ if (!supportsIntersectionObserver) {

loadAll: function loadAll() {
var _this = this;
this._elements.forEach(function (element) {
_this.load(element);
});
this._elements = purgeElements(this._elements);
_updateLoadingCount: function _updateLoadingCount(plusMinus) {
this._loadingCount += plusMinus;
if (this._elements.length === 0 && this._loadingCount === 0) {
callbackIfSet(this._settings.callback_finish);
}
},
update: function update(elements) {
var _this2 = this;
var _this = this;

@@ -402,3 +418,4 @@ var settings = this._settings;

this._elements = purgeElements(Array.prototype.slice.call(nodeSet)); // nodeset to array for IE compatibility
this._elements = purgeProcessedElements(Array.prototype.slice.call(nodeSet) // NOTE: nodeset to array for IE compatibility
);

@@ -411,3 +428,3 @@ if (isBot || !this._observer) {

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

@@ -417,7 +434,7 @@ },

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

@@ -431,3 +448,12 @@ this._observer = null;

load: function load(element, force) {
revealElement(element, this._settings, force);
revealElement(element, this, force);
},
loadAll: function loadAll() {
var _this3 = this;
var elements = this._elements;
elements.forEach(function (element) {
_this3.load(element);
});
}

@@ -434,0 +460,0 @@ };

2

dist/lazyload.min.js

@@ -1,2 +0,2 @@

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

2

package.json
{
"name": "vanilla-lazyload",
"version": "10.18.0",
"version": "10.19.0",
"description": "A fast, lightweight script to load images as they enter the viewport. SEO friendly, it supports responsive images (both srcset + sizes and picture) and progressive JPEG",

@@ -5,0 +5,0 @@ "main": "dist/lazyload.min.js",

18

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

@@ -29,3 +29,3 @@

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.18.0/lazyload.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.17.0/lazyload.min.js"></script>
```

@@ -50,3 +50,3 @@

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

@@ -69,3 +69,3 @@ s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";

```js
define("vanilla-lazyLoad", ["https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.15.2/lazyload.amd.min.js"], function (LazyLoad) {
define("vanilla-lazyLoad", ["https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.16.0/lazyload.amd.min.js"], function (LazyLoad) {
return LazyLoad;

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

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

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

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

@@ -101,3 +101,3 @@

```
npm install vanilla-lazyload@10.18.0
npm install vanilla-lazyload@10.17.0
```

@@ -734,3 +734,3 @@

| `threshold` | A number of pixels representing the outer distance from of the scrolling area from which to start loading the elements. | `300` | `0` |
| `thresholds` | Similar to `threshold`, but accepting multiple values and both `px` and `%` units. It maps directly to the `rootMargin` property of `IntersectionObserver` ([read more](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)), so it must be a string with a syntax similar to the CSS `margin` property. You can use it when you need to have different thresholds for the scrolling area.<br>It overrides `threshold` when passed. Available only in version 10.x, it gracefully degrades to `threshold` on version 8.x. | `null` | `"500px 10%"` |
| `thresholds` | Similar to `threshold`, but accepting multiple values and both `px` and `%` units. It maps directly to the `rootMargin` property of `IntersectionObserver` ([read more](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)), so it must be a string with a syntax similar to the CSS `margin` property. You can use it when you need to have different thresholds for the scrolling area. It overrides `threshold` when passed.<br>Available only in version 10.x, it gracefully degrades to `threshold` on version 8.x. | `null` | `"500px 10%"` |
| `data_src` | The name of the data attribute containing the original image source, excluding the `"data-"` part. E.g. if your data attribute is named `"data-src"`, just pass `"src"` | `"src"` | `"original"` |

@@ -744,3 +744,3 @@ | `data_srcset` | The name of the data attribute containing the original image source set in either `img` and `source` tags, excluding the `"data-"` part. E.g. if your data attribute is named `"data-srcset"`, just pass `"srcset"` | `"srcset"` | `"original-set"` |

| `to_webp` | A boolean flag that activates the dynamic switch to WEBP feature. [More info](#switch-to-webp). | `false` | `true` |
| `load_delay` | The time (in milliseconds) each image needs to stay inside the viewport before its loading begins. Available only in version 10.x, gracefully degrades on version 8.x | `0` | `300` |
| `load_delay` | The time (in milliseconds) each image needs to stay inside the viewport before its loading begins.<br>Available only in version 10.x, gracefully degrades on version 8.x | `0` | `300` |
| `callback_enter` | A function to be called when the DOM element enters the viewport. | `null` | `(el)=>{console.log("Entered", el)}` |

@@ -747,0 +747,0 @@ | `callback_set` | A function to be called after the src of an image is set in the DOM. | `null` | `(el)=>{console.log("Set", el)}` |

1

src/lazyload.defaults.js

@@ -18,2 +18,3 @@ const defaultSettings = {

callback_enter: null,
callback_finish: null,
to_webp: false

@@ -20,0 +21,0 @@ };

21

src/lazyload.event.js

@@ -16,3 +16,3 @@ import { addClass, removeClass } from "./lazyload.class";

const addAllEventListeners = (element, loadHandler, errorHandler) => {
const addEventListeners = (element, loadHandler, errorHandler) => {
addEventListener(element, genericLoadEventName, loadHandler);

@@ -23,3 +23,3 @@ addEventListener(element, mediaLoadEventName, loadHandler);

const removeAllEventListeners = (element, loadHandler, errorHandler) => {
const removeEventListeners = (element, loadHandler, errorHandler) => {
removeEventListener(element, genericLoadEventName, loadHandler);

@@ -30,3 +30,4 @@ removeEventListener(element, mediaLoadEventName, loadHandler);

const eventHandler = function(event, success, settings) {
const eventHandler = function(event, success, instance) {
var settings = instance._settings;
const className = success ? settings.class_loaded : settings.class_error;

@@ -39,14 +40,16 @@ const callback = success ? settings.callback_load : settings.callback_error;

callbackIfSet(callback, element);
instance._updateLoadingCount(-1);
};
export const addOneShotEventListeners = (element, settings) => {
export const addOneShotEventListeners = (element, instance) => {
const loadHandler = event => {
eventHandler(event, true, settings);
removeAllEventListeners(element, loadHandler, errorHandler);
eventHandler(event, true, instance);
removeEventListeners(element, loadHandler, errorHandler);
};
const errorHandler = event => {
eventHandler(event, false, settings);
removeAllEventListeners(element, loadHandler, errorHandler);
eventHandler(event, false, instance);
removeEventListeners(element, loadHandler, errorHandler);
};
addAllEventListeners(element, loadHandler, errorHandler);
addEventListeners(element, loadHandler, errorHandler);
};

50

src/lazyload.js
import getInstanceSettings from "./lazyload.defaults";
import purgeElements from "./lazyload.purge";
import { purgeProcessedElements } from "./lazyload.purge";
import autoInitialize from "./lazyload.autoInitialize";

@@ -19,2 +19,3 @@ import {

} from "./lazyload.environment";
import { callbackIfSet } from "./lazyload.callback";

@@ -24,2 +25,3 @@ const LazyLoad = function(customSettings, elements) {

this._setObserver();
this._loadingCount = 0;
this.update(elements);

@@ -31,22 +33,25 @@ };

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);
// WITHOUT LOAD DELAY
if (!loadDelay) {
if (isIntersecting(entry)) {
loadAndUnobserve(element, observer, this);
}
return;
}
// Writes in and outs in a data-attribute
if (!isIntersecting(entry)) {
// WITH LOAD DELAY
if (isIntersecting(entry)) {
delayLoad(element, observer, this);
} else {
cancelDelayLoad(element);
}
},
_onIntersection: function(entries) {
entries.forEach(this._manageIntersection.bind(this));
this._elements = purgeElements(this._elements);
},
_setObserver: function() {

@@ -62,7 +67,7 @@ if (!supportsIntersectionObserver) {

loadAll: function() {
this._elements.forEach(element => {
this.load(element);
});
this._elements = purgeElements(this._elements);
_updateLoadingCount: function(plusMinus) {
this._loadingCount += plusMinus;
if (this._elements.length === 0 && this._loadingCount === 0) {
callbackIfSet(this._settings.callback_finish);
}
},

@@ -76,3 +81,5 @@

this._elements = purgeElements(Array.prototype.slice.call(nodeSet)); // nodeset to array for IE compatibility
this._elements = purgeProcessedElements(
Array.prototype.slice.call(nodeSet) // NOTE: nodeset to array for IE compatibility
);

@@ -91,3 +98,3 @@ if (isBot || !this._observer) {

if (this._observer) {
purgeElements(this._elements).forEach(element => {
this._elements.forEach(element => {
this._observer.unobserve(element);

@@ -102,3 +109,10 @@ });

load: function(element, force) {
revealElement(element, this._settings, force);
revealElement(element, this, force);
},
loadAll: function() {
var elements = this._elements;
elements.forEach(element => {
this.load(element);
});
}

@@ -105,0 +119,0 @@ };

8

src/lazyload.purge.js
import { getWasProcessedData } from "./lazyload.data";
export default function(elements) {
export const purgeProcessedElements = elements => {
return elements.filter(element => !getWasProcessedData(element));
}
};
export const purgeOneElement = (elements, elementToPurge) => {
return elements.filter(element => element !== elementToPurge);
};

17

src/lazyload.reveal.js

@@ -14,4 +14,4 @@ import { setSources } from "./lazyload.setSources";

export const loadAndUnobserve = (element, observer, settings) => {
revealElement(element, settings);
export const loadAndUnobserve = (element, observer, instance) => {
revealElement(element, instance);
observer.unobserve(element);

@@ -29,4 +29,4 @@ };

export const delayLoad = (element, observer, settings) => {
var loadDelay = settings.load_delay;
export const delayLoad = (element, observer, instance) => {
var loadDelay = instance._settings.load_delay;
var timeoutId = getTimeoutData(element);

@@ -37,3 +37,3 @@ if (timeoutId) {

timeoutId = setTimeout(function() {
loadAndUnobserve(element, observer, settings);
loadAndUnobserve(element, observer, instance);
cancelDelayLoad(element);

@@ -44,3 +44,4 @@ }, loadDelay);

export function revealElement(element, settings, force) {
export function revealElement(element, instance, force) {
var settings = instance._settings;
if (!force && getWasProcessedData(element)) {

@@ -51,8 +52,8 @@ return; // element has already been processed and force wasn't true

if (managedTags.indexOf(element.tagName) > -1) {
addOneShotEventListeners(element, settings);
addOneShotEventListeners(element, instance);
addClass(element, settings.class_loading);
}
setSources(element, settings);
setSources(element, instance);
setWasProcessedData(element);
callbackIfSet(settings.callback_set, element);
}

24

src/lazyload.setSources.js
import { getData } from "./lazyload.data";
import { supportsWebp } from "./lazyload.environment";
import { replaceExtToWebp } from "./lazyload.webp";
import { purgeOneElement } from "./lazyload.purge";

@@ -65,13 +66,13 @@ export const setSourcesInChildren = function(

const srcDataValue = getData(element, settings.data_src);
const bgDataValue = getData(element, settings.data_bg);
const bgDataValue = getData(element, settings.data_bg);
if (srcDataValue) {
let setValue = replaceExtToWebp(srcDataValue, toWebpFlag);
element.style.backgroundImage = `url("${setValue}")`;
}
if (srcDataValue) {
let setValue = replaceExtToWebp(srcDataValue, toWebpFlag);
element.style.backgroundImage = `url("${setValue}")`;
}
if (bgDataValue) {
let setValue = replaceExtToWebp(bgDataValue, toWebpFlag);
element.style.backgroundImage = setValue;
}
if (bgDataValue) {
let setValue = replaceExtToWebp(bgDataValue, toWebpFlag);
element.style.backgroundImage = setValue;
}
};

@@ -85,3 +86,4 @@

export const setSources = (element, settings) => {
export const setSources = (element, instance) => {
const settings = instance._settings;
const tagName = element.tagName;

@@ -91,2 +93,4 @@ const setSourcesFunction = setSourcesFunctions[tagName];

setSourcesFunction(element, settings);
instance._updateLoadingCount(1);
instance._elements = purgeOneElement(instance._elements, element);
return;

@@ -93,0 +97,0 @@ }

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