vanilla-lazyload - npm Package Compare versions

Comparing version 10.8.0 to 10.9.0

CHANGELOG.md

@@ -5,2 +5,7 @@ # CHANGELOG
 
+#### 10.9.0
+
+Added the ability to lazily set the `sizes` attribute via a `data-sizes` attribute.
+See the [README](README.md) file for more information.
+
 #### 10.8.0
@@ -7,0 +12,0 @@

dist/lazyload.es2015.js

@@ -14,2 +14,3 @@ (function (global, factory) {
         data_srcset: "srcset",
+        data_sizes: "sizes",
         class_loading: "loading",
@@ -37,7 +38,7 @@ class_loaded: "loaded",
 
-var purgeElements = function (elements) {
+function purgeElements (elements) {
     return elements.filter((element) => {
         return !getData(element, "was-processed");
     });
-};
+}
 
@@ -63,3 +64,3 @@ /* Creates instance and notifies it through the window element */
     options passed in (plain object or an array) */
-var autoInitialize = function (classObj, options) {
+function autoInitialize (classObj, options) {
     if (!options.length) {
@@ -74,47 +75,58 @@ // Plain object
     }
-};
+}
 
-const setSourcesInChildren = function(parentTag, attrName, dataAttrName) {
-    for (let i = 0, childTag; childTag = parentTag.children[i]; i += 1) {
-        if (childTag.tagName === "SOURCE") {
-            let attributeValue = getData(childTag, dataAttrName);
-            if (attributeValue) {
-                childTag.setAttribute(attrName, attributeValue);
-            }
-        }
-    }
+const setSourcesInChildren = function(
+	parentTag,
+	attrName,
+	dataAttrName
+) {
+	for (let i = 0, childTag; (childTag = parentTag.children[i]); i += 1) {
+		if (childTag.tagName === "SOURCE") {
+			let attributeValue = getData(childTag, dataAttrName);
+			if (attributeValue) {
+				childTag.setAttribute(attrName, attributeValue);
+			}
+		}
+	}
 };
 
 const setAttributeIfNotNullOrEmpty = function(element, attrName, value) {
-    if (!value) {return;}
-    element.setAttribute(attrName, value);
+	if (!value) {
+		return;
+	}
+	element.setAttribute(attrName, value);
 };
 
-const setSources = function (element, settings) {
-    const dataAttrSrcName = settings.data_src;
-    const elementSrc = getData(element, dataAttrSrcName);
-    const tagName = element.tagName;
-    if (tagName === "IMG") {
-        const dataAttrSrcSetName = settings.data_srcset;
-        const elementSrcSet = getData(element, dataAttrSrcSetName);
-        const parent = element.parentNode;
-        if (parent && parent.tagName === "PICTURE") {
-            setSourcesInChildren(parent, "srcset", dataAttrSrcSetName);
-        }
-        setAttributeIfNotNullOrEmpty(element, "srcset", elementSrcSet);
-        setAttributeIfNotNullOrEmpty(element, "src", elementSrc);
-        return;
-    }
-    if (tagName === "IFRAME") {
-        setAttributeIfNotNullOrEmpty(element, "src", elementSrc);
-        return;
-    }
-    if (tagName === "VIDEO") {
-        setSourcesInChildren(element, "src", dataAttrSrcName);
-        setAttributeIfNotNullOrEmpty(element, "src", elementSrc);
-        return;
-    }
-    if (elementSrc) {
-        element.style.backgroundImage = `url("${elementSrc}")`;
-    }
+const setSources = function(element, settings) {
+	const {
+		data_sizes: sizesDataName,
+		data_srcset: srcsetDataName,
+		data_src: srcDataName
+	} = settings;
+	const srcDataValue = getData(element, srcDataName);
+	const tagName = element.tagName;
+	if (tagName === "IMG") {
+		const parent = element.parentNode;
+		if (parent && parent.tagName === "PICTURE") {
+			setSourcesInChildren(parent, "srcset", srcsetDataName);
+		}
+		const sizesDataValue = getData(element, sizesDataName);
+		setAttributeIfNotNullOrEmpty(element, "sizes", sizesDataValue);
+		const srcsetDataValue = getData(element, srcsetDataName);
+		setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue);
+		setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
+		return;
+	}
+	if (tagName === "IFRAME") {
+		setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
+		return;
+	}
+	if (tagName === "VIDEO") {
+		setSourcesInChildren(element, "src", srcDataName);
+		setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
+		return;
+	}
+	if (srcDataValue) {
+		element.style.backgroundImage = `url("${srcDataValue}")`;
+	}
 };
@@ -178,3 +190,3 @@
 
-var revealElement = function (element, settings) {
+function revealElement (element, settings) {
     callCallback(settings.callback_enter, element);
@@ -188,3 +200,3 @@ if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) {
     callCallback(settings.callback_set, element);
-};
+}
 
@@ -191,0 +203,0 @@ /* entry.isIntersecting needs fallback because is null on some versions of MS Edge, and

dist/lazyload.js

@@ -17,2 +17,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
             data_srcset: "srcset",
+            data_sizes: "sizes",
             class_loading: "loading",
@@ -40,7 +41,7 @@ class_loaded: "loaded",
 
-    var purgeElements = function purgeElements(elements) {
+    function purgeElements(elements) {
         return elements.filter(function (element) {
             return !getData(element, "was-processed");
         });
-    };
+    }
 
@@ -65,3 +66,3 @@ /* Creates instance and notifies it through the window element */
         options passed in (plain object or an array) */
-    var autoInitialize = function autoInitialize(classObj, options) {
+    function autoInitialize(classObj, options) {
         if (!options.length) {
@@ -76,3 +77,3 @@ // Plain object
         }
-    };
+    }
 
@@ -98,27 +99,31 @@ var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName) {
     var setSources = function setSources(element, settings) {
-        var dataAttrSrcName = settings.data_src;
-        var elementSrc = getData(element, dataAttrSrcName);
+        var sizesDataName = settings.data_sizes,
+            srcsetDataName = settings.data_srcset,
+            srcDataName = settings.data_src;
+
+        var srcDataValue = getData(element, srcDataName);
         var tagName = element.tagName;
         if (tagName === "IMG") {
-            var dataAttrSrcSetName = settings.data_srcset;
-            var elementSrcSet = getData(element, dataAttrSrcSetName);
             var parent = element.parentNode;
             if (parent && parent.tagName === "PICTURE") {
-                setSourcesInChildren(parent, "srcset", dataAttrSrcSetName);
+                setSourcesInChildren(parent, "srcset", srcsetDataName);
             }
-            setAttributeIfNotNullOrEmpty(element, "srcset", elementSrcSet);
-            setAttributeIfNotNullOrEmpty(element, "src", elementSrc);
+            var sizesDataValue = getData(element, sizesDataName);
+            setAttributeIfNotNullOrEmpty(element, "sizes", sizesDataValue);
+            var srcsetDataValue = getData(element, srcsetDataName);
+            setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue);
+            setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
             return;
         }
         if (tagName === "IFRAME") {
-            setAttributeIfNotNullOrEmpty(element, "src", elementSrc);
+            setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
             return;
         }
         if (tagName === "VIDEO") {
-            setSourcesInChildren(element, "src", dataAttrSrcName);
-            setAttributeIfNotNullOrEmpty(element, "src", elementSrc);
+            setSourcesInChildren(element, "src", srcDataName);
+            setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
             return;
         }
-        if (elementSrc) {
-            element.style.backgroundImage = 'url("' + elementSrc + '")';
+        if (srcDataValue) {
+            element.style.backgroundImage = 'url("' + srcDataValue + '")';
         }
@@ -183,3 +188,3 @@ };
 
-    var revealElement = function revealElement(element, settings) {
+    function revealElement(element, settings) {
         callCallback(settings.callback_enter, element);
@@ -193,3 +198,3 @@ if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) {
         callCallback(settings.callback_set, element);
-    };
+    }
 
@@ -196,0 +201,0 @@ /* entry.isIntersecting needs fallback because is null on some versions of MS Edge, and

dist/lazyload.min.js

@@ -1,1 +0,1 @@
-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";var e=function(e){var t={elements_selector:"img",container:document,threshold:300,data_src:"src",data_srcset:"srcset",class_loading:"loading",class_loaded:"loaded",class_error:"error",callback_load:null,callback_error:null,callback_set:null,callback_enter:null};return _extends({},t,e)},t=function(e,t){return e.getAttribute("data-"+t)},n=function(e,t,n){return e.setAttribute("data-"+t,n)},r=function(e){return e.filter(function(e){return!t(e,"was-processed")})},s=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)},o=function(e,n,r){for(var s,o=0;s=e.children[o];o+=1)if("SOURCE"===s.tagName){var i=t(s,r);i&&s.setAttribute(n,i)}},i=function(e,t,n){n&&e.setAttribute(t,n)},a=function(e,n){var r=n.data_src,s=t(e,r),a=e.tagName;if("IMG"===a){var c=n.data_srcset,l=t(e,c),u=e.parentNode;return u&&"PICTURE"===u.tagName&&o(u,"srcset",c),i(e,"srcset",l),void i(e,"src",s)}if("IFRAME"!==a)return"VIDEO"===a?(o(e,"src",r),void i(e,"src",s)):void(s&&(e.style.backgroundImage='url("'+s+'")'));i(e,"src",s)},c="undefined"!=typeof window,l=c&&"IntersectionObserver"in window,u=c&&"classList"in document.createElement("p"),d=function(e,t){u?e.classList.add(t):e.className+=(e.className?" ":"")+t},f=function(e,t){u?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},v=function(e,t){e&&e(t)},_=function(e,t,n){e.removeEventListener("load",t),e.removeEventListener("error",n)},m=function(e,t){var n=function n(s){b(s,!0,t),_(e,n,r)},r=function r(s){b(s,!1,t),_(e,n,r)};e.addEventListener("load",n),e.addEventListener("error",r)},b=function(e,t,n){var r=e.target;f(r,n.class_loading),d(r,t?n.class_loaded:n.class_error),v(t?n.callback_load:n.callback_error,r)},h=function(e,t){v(t.callback_enter,e),["IMG","IFRAME","VIDEO"].indexOf(e.tagName)>-1&&(m(e,t),d(e,t.class_loading)),a(e,t),n(e,"was-processed",!0),v(t.callback_set,e)},p=function(e){return e.isIntersecting||e.intersectionRatio>0},y=function(t,n){this._settings=e(t),this._setObserver(),this.update(n)};y.prototype={_setObserver:function(){var e=this;if(l){var t=this._settings,n={root:t.container===document?null:t.container,rootMargin:t.threshold+"px"};this._observer=new IntersectionObserver(function(t){t.forEach(function(t){if(p(t)){var n=t.target;h(n,e._settings),e._observer.unobserve(n)}}),e._elements=r(e._elements)},n)}},loadAll:function(){var e=this._settings;this._elements.forEach(function(t){h(t,e)}),this._elements=r(this._elements)},update:function(e){var t=this,n=this._settings,s=e||n.container.querySelectorAll(n.elements_selector);this._elements=r(Array.prototype.slice.call(s)),this._observer?this._elements.forEach(function(e){t._observer.observe(e)}):this.loadAll()},destroy:function(){var e=this;this._observer&&(r(this._elements).forEach(function(t){e._observer.unobserve(t)}),this._observer=null),this._elements=null,this._settings=null}};var g=window.lazyLoadOptions;return c&&g&&function(e,t){if(t.length)for(var n,r=0;n=t[r];r+=1)s(e,n);else s(e,t)}(y,g),y});
+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";var r="data-",u=function(e,t){return e.getAttribute(r+t)},n=function(e,t,n){return e.setAttribute(r+t,n)};function s(e){return e.filter(function(e){return!u(e,"was-processed")})}var o=function(e,t){var n,r="LazyLoad::Initialized",s=new e(t);try{n=new CustomEvent(r,{detail:{instance:s}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent(r,!1,!1,{instance:s})}window.dispatchEvent(n)};var d=function(e,t,n){for(var r,s=0;r=e.children[s];s+=1)if("SOURCE"===r.tagName){var o=u(r,n);o&&r.setAttribute(t,o)}},f=function(e,t,n){n&&e.setAttribute(t,n)},a=function(e,t){var n=t.data_sizes,r=t.data_srcset,s=t.data_src,o=u(e,s),a=e.tagName;if("IMG"===a){var i=e.parentNode;i&&"PICTURE"===i.tagName&&d(i,"srcset",r);var c=u(e,n);f(e,"sizes",c);var l=u(e,r);return f(e,"srcset",l),void f(e,"src",o)}if("IFRAME"!==a)return"VIDEO"===a?(d(e,"src",s),void f(e,"src",o)):void(o&&(e.style.backgroundImage='url("'+o+'")'));f(e,"src",o)},e="undefined"!=typeof window,i=e&&"IntersectionObserver"in window,c=e&&"classList"in document.createElement("p"),l=function(e,t){c?e.classList.add(t):e.className+=(e.className?" ":"")+t},v=function(e,t){e&&e(t)},_="load",m="error",b=function(e,t,n){e.removeEventListener(_,t),e.removeEventListener(m,n)},h=function(n,r){var s=function e(t){p(t,!0,r),b(n,e,o)},o=function e(t){p(t,!1,r),b(n,s,e)};n.addEventListener(_,s),n.addEventListener(m,o)},p=function(e,t,n){var r,s,o=e.target;r=o,s=n.class_loading,c?r.classList.remove(s):r.className=r.className.replace(new RegExp("(^|\\s+)"+s+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,""),l(o,t?n.class_loaded:n.class_error),v(t?n.callback_load:n.callback_error,o)};function y(e,t){v(t.callback_enter,e),-1<["IMG","IFRAME","VIDEO"].indexOf(e.tagName)&&(h(e,t),l(e,t.class_loading)),a(e,t),n(e,"was-processed",!0),v(t.callback_set,e)}var t=function(e,t){var n;this._settings=(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",callback_load:null,callback_error:null,callback_set:null,callback_enter:null},_extends({},n,e)),this._setObserver(),this.update(t)};t.prototype={_setObserver:function(){var r=this;if(i){var e=this._settings,t={root:e.container===document?null:e.container,rootMargin:e.threshold+"px"};this._observer=new IntersectionObserver(function(e){e.forEach(function(e){if((n=e).isIntersecting||0<n.intersectionRatio){var t=e.target;y(t,r._settings),r._observer.unobserve(t)}var n}),r._elements=s(r._elements)},t)}},loadAll:function(){var t=this._settings;this._elements.forEach(function(e){y(e,t)}),this._elements=s(this._elements)},update:function(e){var t=this,n=this._settings,r=e||n.container.querySelectorAll(n.elements_selector);this._elements=s(Array.prototype.slice.call(r)),this._observer?this._elements.forEach(function(e){t._observer.observe(e)}):this.loadAll()},destroy:function(){var t=this;this._observer&&(s(this._elements).forEach(function(e){t._observer.unobserve(e)}),this._observer=null),this._elements=null,this._settings=null}};var g=window.lazyLoadOptions;return e&&g&&function(e,t){if(t.length)for(var n,r=0;n=t[r];r+=1)o(e,n);else o(e,t)}(t,g),t});

package.json

 {
-  "name": "vanilla-lazyload",
-  "version": "10.8.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",
-  "main": "dist/lazyload.min.js",
-  "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-plugin-transform-object-assign": "^6.22.0",
-    "babel-preset-es2015": "^6.24.1",
-    "gulp": "^3.9.1",
-    "gulp-babel": "^7.0.0",
-    "gulp-eslint": "^4.0.0",
-    "gulp-rename": "^1.2.2",
-    "gulp-rollup": "^2.14.0",
-    "gulp-uglify": "^3.0.0",
-    "jest-cli": "^20.0.4"
-  },
-  "scripts": {},
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/verlok/lazyload"
-  },
-  "keywords": [
-    "lazyload",
-    "vanilla",
-    "responsive",
-    "images",
-    "picture",
-    "srcset",
-    "SEO",
-    "intersectionObserver",
-    "sizes",
-    "progressive",
-    "performance",
-    "perfmatters",
-    "async",
-    "no-jquery"
-  ],
-  "author": "Andrea \"verlok\" Verlicchi",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/verlok/lazyload/issues"
-  },
-  "homepage": "http://verlok.github.io/lazyload"
+	"name": "vanilla-lazyload",
+	"version": "10.9.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",
+	"main": "dist/lazyload.min.js",
+	"devDependencies": {
+		"babel-core": "^6.26.0",
+		"babel-plugin-transform-object-assign": "^6.22.0",
+		"babel-preset-es2015": "^6.24.1",
+		"gulp": "^3.9.1",
+		"gulp-babel": "^7.0.0",
+		"gulp-eslint": "^4.0.0",
+		"gulp-rename": "^1.2.2",
+		"gulp-rollup": "^2.14.0",
+		"gulp-uglify": "^3.0.0",
+		"jest-cli": "^20.0.4"
+	},
+	"scripts": {},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/verlok/lazyload"
+	},
+	"keywords": [
+		"lazyload",
+		"vanilla",
+		"responsive",
+		"images",
+		"picture",
+		"srcset",
+		"SEO",
+		"intersectionObserver",
+		"sizes",
+		"progressive",
+		"performance",
+		"perfmatters",
+		"async",
+		"no-jquery"
+	],
+	"author": "Andrea \"verlok\" Verlicchi",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/verlok/lazyload/issues"
+	},
+	"homepage": "http://verlok.github.io/lazyload"
 }

README.md

@@ -23,3 +23,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.8.0/lazyload.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.9.0/lazyload.min.js"></script>
 ```
@@ -36,3 +36,3 @@
 	var s = d.createElement("script"); s.async = true;
-	var v = !("IntersectionObserver" in w) ? "8.9.0" : "10.8.0";
+	var v = !("IntersectionObserver" in w) ? "8.8.0" : "10.9.0";
 	s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
@@ -96,3 +96,3 @@ w.lazyLoadOptions = {}; // Your options here. See "recipes" for more information about async.
     data-srcset="/your/image1.jpg 200w, /your/[e-mail] 400w"
-    sizes="(min-width: 20em) 35vw, 100vw">
+    data-sizes="(min-width: 20em) 35vw, 100vw">
 ```
@@ -108,3 +108,3 @@
 
-[DEMO](http://verlok.github.io/lazyload/demos/with_srcset_sizes.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/with_srcset_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)
 
@@ -111,0 +111,0 @@ ### Responsive images - picture

src/lazyload.defaults.js

@@ -8,2 +8,3 @@ export default (customSettings) => {
         data_srcset: "srcset",
+        data_sizes: "sizes",
         class_loading: "loading",
@@ -10,0 +11,0 @@ class_loaded: "loaded",

src/lazyload.setSources.js

@@ -1,46 +0,57 @@
-import {getData} from "./lazyload.data";
+import { getData } from "./lazyload.data";
 
-export const setSourcesInChildren = function(parentTag, attrName, dataAttrName) {
-    for (let i = 0, childTag; childTag = parentTag.children[i]; i += 1) {
-        if (childTag.tagName === "SOURCE") {
-            let attributeValue = getData(childTag, dataAttrName);
-            if (attributeValue) {
-                childTag.setAttribute(attrName, attributeValue);
-            }
-        }
-    }
+export const setSourcesInChildren = function(
+	parentTag,
+	attrName,
+	dataAttrName
+) {
+	for (let i = 0, childTag; (childTag = parentTag.children[i]); i += 1) {
+		if (childTag.tagName === "SOURCE") {
+			let attributeValue = getData(childTag, dataAttrName);
+			if (attributeValue) {
+				childTag.setAttribute(attrName, attributeValue);
+			}
+		}
+	}
 };
 
 export const setAttributeIfNotNullOrEmpty = function(element, attrName, value) {
-    if (!value) {return;}
-    element.setAttribute(attrName, value);
+	if (!value) {
+		return;
+	}
+	element.setAttribute(attrName, value);
 };
 
-export const setSources = function (element, settings) {
-    const dataAttrSrcName = settings.data_src;
-    const elementSrc = getData(element, dataAttrSrcName);
-    const tagName = element.tagName;
-    if (tagName === "IMG") {
-        const dataAttrSrcSetName = settings.data_srcset;
-        const elementSrcSet = getData(element, dataAttrSrcSetName);
-        const parent = element.parentNode;
-        if (parent && parent.tagName === "PICTURE") {
-            setSourcesInChildren(parent, "srcset", dataAttrSrcSetName);
-        }
-        setAttributeIfNotNullOrEmpty(element, "srcset", elementSrcSet);
-        setAttributeIfNotNullOrEmpty(element, "src", elementSrc);
-        return;
-    }
-    if (tagName === "IFRAME") {
-        setAttributeIfNotNullOrEmpty(element, "src", elementSrc);
-        return;
-    }
-    if (tagName === "VIDEO") {
-        setSourcesInChildren(element, "src", dataAttrSrcName);
-        setAttributeIfNotNullOrEmpty(element, "src", elementSrc);
-        return;
-    }
-    if (elementSrc) {
-        element.style.backgroundImage = `url("${elementSrc}")`;
-    }
-};
+export const setSources = function(element, settings) {
+	const {
+		data_sizes: sizesDataName,
+		data_srcset: srcsetDataName,
+		data_src: srcDataName
+	} = settings;
+	const srcDataValue = getData(element, srcDataName);
+	const tagName = element.tagName;
+	if (tagName === "IMG") {
+		const parent = element.parentNode;
+		if (parent && parent.tagName === "PICTURE") {
+			setSourcesInChildren(parent, "srcset", srcsetDataName);
+		}
+		const sizesDataValue = getData(element, sizesDataName);
+		setAttributeIfNotNullOrEmpty(element, "sizes", sizesDataValue);
+		const srcsetDataValue = getData(element, srcsetDataName);
+		setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue);
+		setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
+		return;
+	}
+	if (tagName === "IFRAME") {
+		setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
+		return;
+	}
+	if (tagName === "VIDEO") {
+		setSourcesInChildren(element, "src", srcDataName);
+		setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
+		return;
+	}
+	if (srcDataValue) {
+		element.style.backgroundImage = `url("${srcDataValue}")`;
+	}
+};

No alert changes

Improved metrics

Total package byte prevSize

936536

increased by1.2%

Number of package files

137

increased by0.74%

Lines of code

1106

increased by2.69%

No dependency changes