vanilla-lazyload - npm Package Compare versions

Comparing version 10.16.0-beta to 10.16.1

__tests__/lazyload.setSources.test.js

@@ -1,235 +0,224 @@
-import {setSources, setSourcesInChildren} from "../src/lazyLoad.setSources";
+import { setSources, setSourcesInChildren } from "../src/lazyLoad.setSources";
+import expectExtend from "./lib/expectExtend";
 
 const lazyloadSettings = {
-    data_src: "src",
-    data_srcset: "srcset"
+	data_src: "src",
+	data_srcset: "srcset"
 };
 
-expect.extend({
-    toHaveAttributeValue: (element, attributeName, valueToVerify) => {
-        const actualValue = element.getAttribute(attributeName);
-        const pass = actualValue === valueToVerify;
-        return pass ? {
-            message: () => `${element.tagName} has attribute "${attributeName}" set to "${valueToVerify}"`,
-            pass: true
-        } : {
-            message: () => `expected ${element.tagName} to have attribute "${attributeName}" set to "${valueToVerify}", received "${actualValue}"`,
-            pass: false
-        }
-    }
-});
+expectExtend(expect);
 
 test("setSources is defined", () => {
-    expect(typeof setSources).toBe("function");
+	expect(typeof setSources).toBe("function");
 });
 
 describe("setSources for image", () => {
-    let img;
-    let img1 = "http://placehold.it/1x1";
-    let img200 = "http://placehold.it/200x200";
-    let img400 = "http://placehold.it/400x400";
+	let img;
+	let img1 = "http://placehold.it/1x1";
+	let img200 = "http://placehold.it/200x200";
+	let img400 = "http://placehold.it/400x400";
 
-    beforeEach(() => {
-        // Parent is a div
-        let div = document.createElement("div");
-        div.appendChild(img = document.createElement("img"));
-    });
+	beforeEach(() => {
+		// Parent is a div
+		let div = document.createElement("div");
+		div.appendChild((img = document.createElement("img")));
+	});
 
-    test("...with initially empty src and srcset", () => {
-        img.setAttribute("data-src", img200);
-        img.setAttribute("data-srcset", img400);
-        setSources(img, lazyloadSettings);
-        expect(img).toHaveAttributeValue("src", img200);
-        expect(img).toHaveAttributeValue("srcset", img400);
-    });
+	test("...with initially empty src and srcset", () => {
+		img.setAttribute("data-src", img200);
+		img.setAttribute("data-srcset", img400);
+		setSources(img, lazyloadSettings);
+		expect(img).toHaveAttributeValue("src", img200);
+		expect(img).toHaveAttributeValue("srcset", img400);
+	});
 
-    test("...with initial values in src and srcset", () => {
-        img.setAttribute("data-src", img200);
-        img.setAttribute("data-srcset", img400);
-        img.setAttribute("src", img1);
-        img.setAttribute("srcset", img1);
-        setSources(img, lazyloadSettings);
-        expect(img).toHaveAttributeValue("src", img200);
-        expect(img).toHaveAttributeValue("srcset", img400);
-    });
-    test("...with initial values in src and srcset and empty data-*", () => {
-        img.setAttribute("data-src", "");
-        img.setAttribute("data-srcset", "");
-        img.setAttribute("src", img200);
-        img.setAttribute("srcset", img400);
-        setSources(img, lazyloadSettings);
-        expect(img).toHaveAttributeValue("src", img200);
-        expect(img).toHaveAttributeValue("srcset", img400);
-    });
+	test("...with initial values in src and srcset", () => {
+		img.setAttribute("data-src", img200);
+		img.setAttribute("data-srcset", img400);
+		img.setAttribute("src", img1);
+		img.setAttribute("srcset", img1);
+		setSources(img, lazyloadSettings);
+		expect(img).toHaveAttributeValue("src", img200);
+		expect(img).toHaveAttributeValue("srcset", img400);
+	});
+	test("...with initial values in src and srcset and empty data-*", () => {
+		img.setAttribute("data-src", "");
+		img.setAttribute("data-srcset", "");
+		img.setAttribute("src", img200);
+		img.setAttribute("srcset", img400);
+		setSources(img, lazyloadSettings);
+		expect(img).toHaveAttributeValue("src", img200);
+		expect(img).toHaveAttributeValue("srcset", img400);
+	});
 });
 
 describe("setSources for iframe", () => {
-    let iframe;
-    let srcToLoad = "http://www.google.it";
-    let preloadedSrc = srcToLoad + "/doodle";
+	let iframe;
+	let srcToLoad = "http://www.google.it";
+	let preloadedSrc = srcToLoad + "/doodle";
 
-    beforeEach(() => {
-        iframe = document.createElement("iframe");
-    });
-    test("...with initially empty src", () => {
-        iframe.setAttribute("data-src", srcToLoad);
-        setSources(iframe, lazyloadSettings);
-        expect(iframe).toHaveAttributeValue("src", srcToLoad);
-    });
-    test("...with initial value in src", () => {
-        iframe.setAttribute("data-src", srcToLoad);
-        iframe.setAttribute("src", preloadedSrc);
-        setSources(iframe, lazyloadSettings);
-        expect(iframe).toHaveAttributeValue("src", srcToLoad);
-    });
-    test("...with initial value in src and empty data-src", () => {
-        iframe.setAttribute("data-src", "");
-        iframe.setAttribute("src", preloadedSrc);
-        setSources(iframe, lazyloadSettings);
-        expect(iframe).toHaveAttributeValue("src", preloadedSrc);
-    });
+	beforeEach(() => {
+		iframe = document.createElement("iframe");
+	});
+	test("...with initially empty src", () => {
+		iframe.setAttribute("data-src", srcToLoad);
+		setSources(iframe, lazyloadSettings);
+		expect(iframe).toHaveAttributeValue("src", srcToLoad);
+	});
+	test("...with initial value in src", () => {
+		iframe.setAttribute("data-src", srcToLoad);
+		iframe.setAttribute("src", preloadedSrc);
+		setSources(iframe, lazyloadSettings);
+		expect(iframe).toHaveAttributeValue("src", srcToLoad);
+	});
+	test("...with initial value in src and empty data-src", () => {
+		iframe.setAttribute("data-src", "");
+		iframe.setAttribute("src", preloadedSrc);
+		setSources(iframe, lazyloadSettings);
+		expect(iframe).toHaveAttributeValue("src", preloadedSrc);
+	});
 });
 
 describe("setSources for background image", () => {
-    let element;
-    let img100 = "http://placehold.it/100x100";
-    let img200 = "http://placehold.it/200x200";
+	let element;
+	let img100 = "http://placehold.it/100x100";
+	let img200 = "http://placehold.it/200x200";
 
-    beforeEach(() => {
-        element = document.createElement("div");
-    });
+	beforeEach(() => {
+		element = document.createElement("div");
+	});
 
-    test("...with initially empty style attribute", () => {
-        element.setAttribute("data-src", img200);
-        setSources(element, lazyloadSettings);
-        // Test cheating: bug in JsDOM doesn't return the url("") with quotes inside
-        expect(element.style.backgroundImage).toBe(`url(${img200})`);
-    });
-    test("...with initially present style attribute", () => {
-        element.setAttribute("data-src", img100);
-        element.style = {
-            padding: "1px"
-        };
-        setSources(element, lazyloadSettings);
-        // Test cheating: bug in JsDOM doesn't return the url("") with quotes inside
-        expect(element.style.backgroundImage).toBe(`url(${img100})`);
-    });
-    test("...with initially present style and background", () => {
-        element.setAttribute("data-src", img200);
-        element.style = {
-            padding: "1px",
-            backgroundImage: "url(" + img100 + ")"
-        };
-        setSources(element, lazyloadSettings);
-        // Test cheating: bug in JsDOM doesn't return the url("") with quotes inside
-        expect(element.style.backgroundImage).toBe(`url(${img200})`);
-    });
+	test("...with initially empty style attribute", () => {
+		element.setAttribute("data-src", img200);
+		setSources(element, lazyloadSettings);
+		// Test cheating: bug in JsDOM doesn't return the url("") with quotes inside
+		expect(element.style.backgroundImage).toBe(`url(${img200})`);
+	});
+	test("...with initially present style attribute", () => {
+		element.setAttribute("data-src", img100);
+		element.style = {
+			padding: "1px"
+		};
+		setSources(element, lazyloadSettings);
+		// Test cheating: bug in JsDOM doesn't return the url("") with quotes inside
+		expect(element.style.backgroundImage).toBe(`url(${img100})`);
+	});
+	test("...with initially present style and background", () => {
+		element.setAttribute("data-src", img200);
+		element.style = {
+			padding: "1px",
+			backgroundImage: "url(" + img100 + ")"
+		};
+		setSources(element, lazyloadSettings);
+		// Test cheating: bug in JsDOM doesn't return the url("") with quotes inside
+		expect(element.style.backgroundImage).toBe(`url(${img200})`);
+	});
 });
 
 describe("setSourcesInChildren", () => {
-    let container, source1, source2, img;
-    let img1 = "http://placehold.it/1x1";
-    let img200 = "http://placehold.it/200x200";
-    let img400 = "http://placehold.it/400x400";
-    
-    beforeEach(() => {
-        container = document.createElement("picture");
-        container.appendChild(source1 = document.createElement("source"));
-        container.appendChild(source2 = document.createElement("source"));
-        container.appendChild(img = document.createElement("img"));
-    });
-    
-    test("...with initially empty srcset", () => {
-        source1.setAttribute("data-srcset", img200);
-        source2.setAttribute("data-srcset", img400);
-        setSourcesInChildren(container, "srcset", "srcset");
-        expect(source1).toHaveAttributeValue("srcset", img200);
-        expect(source2).toHaveAttributeValue("srcset", img400);
-    });
+	let container, source1, source2, img;
+	let img1 = "http://placehold.it/1x1";
+	let img200 = "http://placehold.it/200x200";
+	let img400 = "http://placehold.it/400x400";
 
-    test("...with initial value in srcset", () => {
-        source1.setAttribute("data-srcset", img200);
-        source2.setAttribute("data-srcset", img400);
-        source1.setAttribute("srcset", img1);
-        source2.setAttribute("srcset", img1);
-        setSourcesInChildren(container, "srcset", "srcset");
-        expect(source1).toHaveAttributeValue("srcset", img200);
-        expect(source2).toHaveAttributeValue("srcset", img400);
-    });
+	beforeEach(() => {
+		container = document.createElement("picture");
+		container.appendChild((source1 = document.createElement("source")));
+		container.appendChild((source2 = document.createElement("source")));
+		container.appendChild((img = document.createElement("img")));
+	});
 
-    test("...with initial value in srcset and empty data-srcset", () => {
-        source1.setAttribute("data-srcset", "");
-        source2.setAttribute("data-srcset", "");
-        source1.setAttribute("srcset", img200);
-        source2.setAttribute("srcset", img400);
-        setSourcesInChildren(container, "srcset", "srcset");
-        expect(source1).toHaveAttributeValue("srcset", img200);
-        expect(source2).toHaveAttributeValue("srcset", img400);
-    });
+	test("...with initially empty srcset", () => {
+		source1.setAttribute("data-srcset", img200);
+		source2.setAttribute("data-srcset", img400);
+		setSourcesInChildren(container, "srcset", "srcset");
+		expect(source1).toHaveAttributeValue("srcset", img200);
+		expect(source2).toHaveAttributeValue("srcset", img400);
+	});
 
-    test("...with initially empty src", () => {
-        source1.setAttribute("data-src", img200);
-        source2.setAttribute("data-src", img400);
-        setSourcesInChildren(container, "src", "src");
-        expect(source1).toHaveAttributeValue("src", img200);
-        expect(source2).toHaveAttributeValue("src", img400);
-    });
+	test("...with initial value in srcset", () => {
+		source1.setAttribute("data-srcset", img200);
+		source2.setAttribute("data-srcset", img400);
+		source1.setAttribute("srcset", img1);
+		source2.setAttribute("srcset", img1);
+		setSourcesInChildren(container, "srcset", "srcset");
+		expect(source1).toHaveAttributeValue("srcset", img200);
+		expect(source2).toHaveAttributeValue("srcset", img400);
+	});
 
-    test("...with initial value in src", () => {
-        source1.setAttribute("data-src", img200);
-        source2.setAttribute("data-src", img400);
-        source1.setAttribute("src", img1);
-        source2.setAttribute("src", img1);
-        setSourcesInChildren(container, "src", "src");
-        expect(source1).toHaveAttributeValue("src", img200);
-        expect(source2).toHaveAttributeValue("src", img400);
-    });
+	test("...with initial value in srcset and empty data-srcset", () => {
+		source1.setAttribute("data-srcset", "");
+		source2.setAttribute("data-srcset", "");
+		source1.setAttribute("srcset", img200);
+		source2.setAttribute("srcset", img400);
+		setSourcesInChildren(container, "srcset", "srcset");
+		expect(source1).toHaveAttributeValue("srcset", img200);
+		expect(source2).toHaveAttributeValue("srcset", img400);
+	});
 
-    test("...with initial value in src and empty data-src", () => {
-        source1.setAttribute("data-src", "");
-        source2.setAttribute("data-src", "");
-        source1.setAttribute("src", img200);
-        source2.setAttribute("src", img400);
-        setSourcesInChildren(container, "src", "src");
-        expect(source1).toHaveAttributeValue("src", img200);
-        expect(source2).toHaveAttributeValue("src", img400);
-    });
+	test("...with initially empty src", () => {
+		source1.setAttribute("data-src", img200);
+		source2.setAttribute("data-src", img400);
+		setSourcesInChildren(container, "src", "src");
+		expect(source1).toHaveAttributeValue("src", img200);
+		expect(source2).toHaveAttributeValue("src", img400);
+	});
+
+	test("...with initial value in src", () => {
+		source1.setAttribute("data-src", img200);
+		source2.setAttribute("data-src", img400);
+		source1.setAttribute("src", img1);
+		source2.setAttribute("src", img1);
+		setSourcesInChildren(container, "src", "src");
+		expect(source1).toHaveAttributeValue("src", img200);
+		expect(source2).toHaveAttributeValue("src", img400);
+	});
+
+	test("...with initial value in src and empty data-src", () => {
+		source1.setAttribute("data-src", "");
+		source2.setAttribute("data-src", "");
+		source1.setAttribute("src", img200);
+		source2.setAttribute("src", img400);
+		setSourcesInChildren(container, "src", "src");
+		expect(source1).toHaveAttributeValue("src", img200);
+		expect(source2).toHaveAttributeValue("src", img400);
+	});
 });
 
 describe("setSources for video", () => {
-    let video, source1, source2;
-    let videoUrl = "https://youtu.be/foobar";
-    
-    beforeEach(() => {
-        video = document.createElement("video");
-        video.appendChild(source1 = document.createElement("source"));
-        video.appendChild(source2 = document.createElement("source"));
-    });
-    
-    test("...with initially empty src", () => {
-        video.setAttribute("data-src", videoUrl);
-        setSources(video, lazyloadSettings);
-        expect(video).toHaveAttributeValue("src", videoUrl);
-    });
+	let video, source1, source2;
+	let videoUrl = "https://youtu.be/foobar";
+
+	beforeEach(() => {
+		video = document.createElement("video");
+		video.appendChild((source1 = document.createElement("source")));
+		video.appendChild((source2 = document.createElement("source")));
+	});
+
+	test("...with initially empty src", () => {
+		video.setAttribute("data-src", videoUrl);
+		setSources(video, lazyloadSettings);
+		expect(video).toHaveAttributeValue("src", videoUrl);
+	});
 });
 
 describe("setSources for picture", () => {
-    let picture, source1, source2, img;
-    let img200 = "http://placehold.it/200x200";
-    let img400 = "http://placehold.it/400x400";
-    
-    beforeEach(() => {
-        picture = document.createElement("picture");
-        picture.appendChild(source1 = document.createElement("source"));
-        picture.appendChild(source2 = document.createElement("source"));
-        picture.appendChild(img = document.createElement("img"));
-    });
-    
-    test("...with initially empty srcset", () => {
-        img.setAttribute("data-src", img200);
-        img.setAttribute("data-srcset", img400);
-        setSources(img, lazyloadSettings);
-        expect(img).toHaveAttributeValue("src", img200);
-        expect(img).toHaveAttributeValue("srcset", img400);
-    });
-});
+	let picture, source1, source2, img;
+	let img200 = "http://placehold.it/200x200";
+	let img400 = "http://placehold.it/400x400";
+
+	beforeEach(() => {
+		picture = document.createElement("picture");
+		picture.appendChild((source1 = document.createElement("source")));
+		picture.appendChild((source2 = document.createElement("source")));
+		picture.appendChild((img = document.createElement("img")));
+	});
+
+	test("...with initially empty srcset", () => {
+		img.setAttribute("data-src", img200);
+		img.setAttribute("data-srcset", img400);
+		setSources(img, lazyloadSettings);
+		expect(img).toHaveAttributeValue("src", img200);
+		expect(img).toHaveAttributeValue("srcset", img400);
+	});
+});

CHANGELOG.md

@@ -5,4 +5,8 @@ # CHANGELOG
 
-#### 10.16.0-beta
+#### 10.16.1
 
+**BUGFIX**: Autoplaying video not loaded correctly after entering the viewport (issue #240). Thanks to @maeligg.
+
+#### 10.16.0
+
 Added new option `load_delay` to skip loading when fast scrolling occurs, as requested in issues #235 and #166. 
@@ -9,0 +13,0 @@ Pass in a number of milliseconds, and each image will be loaded after it stayed inside that viewport for that time.

dist/lazyload.amd.js

@@ -6,21 +6,21 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+	var defaultSettings = {
+		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: false
+	};
+
 	var getInstanceSettings = function getInstanceSettings(customSettings) {
-		var defaultSettings = {
-			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: false
-		};
-
 		return _extends({}, defaultSettings, customSettings);
@@ -171,2 +171,3 @@ };
 		setAttributeIfValue(element, "src", srcDataValue);
+		element.load();
 	};
@@ -173,0 +174,0 @@

dist/lazyload.amd.min.js

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

dist/lazyload.es2015.js

@@ -0,20 +1,20 @@
+const defaultSettings = {
+	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: false
+};
+
 var getInstanceSettings = customSettings => {
-	const defaultSettings = {
-		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: false
-	};
-
 	return Object.assign({}, defaultSettings, customSettings);
@@ -171,2 +171,3 @@ };
 	setAttributeIfValue(element, "src", srcDataValue);
+	element.load();
 };
@@ -173,0 +174,0 @@

dist/lazyload.iife.js

@@ -6,21 +6,21 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+	var defaultSettings = {
+		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: false
+	};
+
 	var getInstanceSettings = function getInstanceSettings(customSettings) {
-		var defaultSettings = {
-			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: false
-		};
-
 		return _extends({}, defaultSettings, customSettings);
@@ -171,2 +171,3 @@ };
 		setAttributeIfValue(element, "src", srcDataValue);
+		element.load();
 	};
@@ -173,0 +174,0 @@

dist/lazyload.iife.min.js

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

dist/lazyload.js

@@ -10,21 +10,21 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+	var defaultSettings = {
+		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: false
+	};
+
 	var getInstanceSettings = function getInstanceSettings(customSettings) {
-		var defaultSettings = {
-			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: false
-		};
-
 		return _extends({}, defaultSettings, customSettings);
@@ -175,2 +175,3 @@ };
 		setAttributeIfValue(element, "src", srcDataValue);
+		element.load();
 	};
@@ -177,0 +178,0 @@

dist/lazyload.min.js

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

package.json

 {
 	"name": "vanilla-lazyload",
-	"version": "10.16.0-beta",
+	"version": "10.16.1",
 	"description": "A fast, lightweight script to load images as they enter the viewport. SEO friendly, it supports responsive images (both srcset + sizes and picture) and progressive JPEG",
@@ -5,0 +5,0 @@ "main": "dist/lazyload.min.js",

README.md

@@ -28,3 +28,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/10.15.0/lazyload.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.16.1/lazyload.min.js"></script>
 ```
@@ -49,3 +49,3 @@
     var s = d.createElement("script"); 
-    var v = !("IntersectionObserver" in w) ? "8.15.0" : "10.15.0";
+    var v = !("IntersectionObserver" in w) ? "8.15.0" : "10.16.1";
     s.async = true; // This includes the script as async. See the "recipes" section for more information about async loading of LazyLoad.
@@ -63,5 +63,5 @@ s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
 
-### Include via require.js
+### Include via RequireJS
 
-If you use [require-js](https://requirejs.org) to dynamically load modules in your website, you can take advantage of it.
+If you use [RequireJS](https://requirejs.org) to dynamically load modules in your website, you can take advantage of it.
 
@@ -77,8 +77,6 @@ ```js
 ```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));
+var v = !("IntersectionObserver" in window) ? "8.15.0" : "10.16.1";
+define("vanilla-lazyLoad", ["https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.amd.min.js"], function (LazyLoad) {
+    return LazyLoad;
+});
 ```
@@ -101,3 +99,3 @@
 ```
-npm install vanilla-lazyload@10.15.0
+npm install vanilla-lazyload@10.16.1
 ```
@@ -117,2 +115,20 @@
 
+### Local usage
+
+Should you install LazyLoad locally, you can import it as ES module like the following:
+
+```js
+import LazyLoad from "vanilla-lazyload";
+```
+
+It's also possible (but unadvised) to use the `require` commonJS syntax.
+
+More information about bundling LazyLoad with WebPack are available on [this specific repo](https://github.com/verlok/lazyload-es2015-webpack-test).
+
+### Usage with React
+
+Take a look at this example of [usage of React with LazyLoad](https://codesandbox.io/s/20306yk96p) on Sandbox.
+
+This implementation takes the same props that you would normally pass to the `img` tag, but it renders a lazy image. Feel free to fork and improve it!
+
 ### Bundles
@@ -126,3 +142,3 @@
 | `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.amd.min.js`  | AMD <small>(Asynchronous Module Definition)</small>           | Works with *RequireJS* 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 |
@@ -156,3 +172,3 @@
 
-[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)
 
@@ -191,3 +207,3 @@ ### Scrolling panel
 
-[DEMO](http://verlok.github.io/lazyload/demos/single_container.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/single_container.html) - [API](#api)
+[DEMO](http://verlok.github.io/lazyload/demos/single_container.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/single_container.html) - [API](#-api)
 
@@ -235,3 +251,3 @@ ### Multiple scrolling panels
 
-[DEMO](http://verlok.github.io/lazyload/demos/multiple_container.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/multiple_container.html) - [API](#api)
+[DEMO](http://verlok.github.io/lazyload/demos/multiple_container.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/multiple_container.html) - [API](#-api)
 
@@ -258,3 +274,3 @@ ### Responsive images - img tag with srcset / sizes
 
-[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)
 
@@ -285,3 +301,3 @@ ### Responsive images - picture tag
 
-[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)
 
@@ -311,3 +327,3 @@ ### Switch to WebP
 
-[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)
+[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)
 
@@ -336,3 +352,3 @@
 
-[DEMO](http://verlok.github.io/lazyload/demos/delay.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/delay.html) | [API](#api)
+[DEMO](http://verlok.github.io/lazyload/demos/delay.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/delay.html) | [API](#-api)
 
@@ -363,3 +379,3 @@
 
-[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)
 
@@ -384,3 +400,3 @@ ### Iframes
 
-[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)
 
@@ -422,9 +438,9 @@ ### Async script + auto initialization
 Please note that if you put the script at the beginning of your HTML page, LazyLoad will sometimes be executed before the browser has loaded all the DOM. 
-In that case, you need to store the instance in a variable and use the `update` method on it. This will make it check the DOM again. See [API](#api).
+In that case, you need to store the instance in a variable and use the `update` method on it. This will make it check the DOM again. See [API](#-api).
 
-[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
 
-> 💡 **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.
+> 💡 **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.
 
@@ -453,3 +469,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)
 
@@ -494,3 +510,3 @@ **Note about Internet Explorer**
 
-[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)
 
@@ -515,3 +531,3 @@ ### Lazy iframes
 
-[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)
 
@@ -538,3 +554,3 @@ ### Lazy background images
 
-[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)
 
@@ -583,3 +599,3 @@ ### Lazy LazyLoad
 
-[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)
 
@@ -656,3 +672,3 @@ ---
 
-Or instead of the above `:not()` selector do it using the **CSS classes** of `class_loading` and `class_loaded` set by LazyLoad when loading starts or is completed - see [API](#api).
+Or instead of the above `:not()` selector do it using the **CSS classes** of `class_loading` and `class_loaded` set by LazyLoad when loading starts or is completed - see [API](#-api).
 
@@ -735,6 +751,4 @@
 | `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             |
-
+| `to_webp`           | A boolean flag that activates the dynamic switch to WEBP feature. [More info](#switch-to-webp).                                                                                                                                                                                                                                                                       | `false`       |
+| `load_delay`        | [**Available only in version 10.16.1-beta**] The time (in milliseconds) each image needs to stay inside the viewport before its loading begins.                                                                                                                                                                                                                       | `0`           |
 | `callback_enter`    | A function to be called when the DOM element enters the viewport.                                                                                                                                                                                                                                                                                                     | `null`        |
@@ -741,0 +755,0 @@ | `callback_set`      | A function to be called after the src of an image is set in the DOM.                                                                                                                                                                                                                                                                                                  | `null`        |

src/lazyload.defaults.js

@@ -0,21 +1,21 @@
+const defaultSettings = {
+	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: false
+};
+
 export default customSettings => {
-	const defaultSettings = {
-		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: false
-	};
-
 	return Object.assign({}, defaultSettings, customSettings);
 };

src/lazyload.setSources.js

@@ -59,2 +59,3 @@ import { getData } from "./lazyload.data";
 	setAttributeIfValue(element, "src", srcDataValue);
+	element.load();
 };
@@ -61,0 +62,0 @@

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1110164

increased by0.34%

Number of package files

154

increased by2.67%

Lines of code

2286

increased by2.88%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

777

increased by1.83%

No dependency changes