vanilla-lazyload - npm Package Compare versions

Comparing version 8.9.0 to 8.10.0

dist/lazyload.es2015.js

@@ -8,18 +8,19 @@ (function (global, factory) {
 var getDefaultSettings = () => ({
-    elements_selector: "img",
-    container: window,
-    threshold: 300,
-    throttle: 150,
-    data_src: "src",
-    data_srcset: "srcset",
-    class_loading: "loading",
-    class_loaded: "loaded",
-    class_error: "error",
-    class_initial: "initial",
-    skip_invisible: true,
-    callback_load: null,
-    callback_error: null,
-    callback_set: null,
-    callback_processed: null,
-    callback_enter: null
+	elements_selector: "img",
+	container: window,
+	threshold: 300,
+	throttle: 150,
+	data_src: "src",
+	data_srcset: "srcset",
+	data_sizes: "sizes",
+	class_loading: "loading",
+	class_loaded: "loaded",
+	class_error: "error",
+	class_initial: "initial",
+	skip_invisible: true,
+	callback_load: null,
+	callback_error: null,
+	callback_set: null,
+	callback_processed: null,
+	callback_enter: null
 });
@@ -66,3 +67,3 @@
 
-var isInsideViewport = function (element, container, threshold) {
+function isInsideViewport (element, container, threshold) {
     return !isBelowViewport(element, container, threshold) &&
@@ -72,3 +73,3 @@ !isAboveViewport(element, container, threshold) &&
         !isAtLeftOfViewport(element, container, threshold);
-};
+}
 
@@ -94,3 +95,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) { 
     let optsLength = options.length;
@@ -107,3 +108,3 @@ if (!optsLength) {
     }
-};
+}
 
@@ -121,44 +122,51 @@ const dataPrefix = "data-";
 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);
-            }
-        }
-    }
+	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);
 };
 
 function setSources(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 {
+		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}")`;
+	}
 }
@@ -165,0 +173,0 @@

dist/lazyload.js

@@ -18,2 +18,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",
@@ -69,5 +70,5 @@ class_loaded: "loaded",
 
-    var isInsideViewport = function isInsideViewport(element, container, threshold) {
+    function isInsideViewport(element, container, threshold) {
         return !isBelowViewport(element, container, threshold) && !isAboveViewport(element, container, threshold) && !isAtRightOfViewport(element, container, threshold) && !isAtLeftOfViewport(element, container, threshold);
-    };
+    }
 
@@ -92,3 +93,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) {
         var optsLength = options.length;
@@ -104,3 +105,3 @@ if (!optsLength) {
         }
-    };
+    }
 
@@ -136,27 +137,31 @@ var dataPrefix = "data-";
     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 + '")';
         }
@@ -163,0 +168,0 @@ }

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 o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(e,t){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.LazyLoad=t()}(this,function(){"use strict";function e(e,t){var n=t.data_src,o=h(e,n),i=e.tagName;if("IMG"===i){var s=t.data_srcset,l=h(e,s),r=e.parentNode;return r&&"PICTURE"===r.tagName&&_(r,"srcset",s),p(e,"srcset",l),void p(e,"src",o)}if("IFRAME"!==i)return"VIDEO"===i?(_(e,"src",n),void p(e,"src",o)):void(o&&(e.style.backgroundImage='url("'+o+'")'));p(e,"src",o)}var t=function(){return{elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"src",data_srcset:"srcset",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_processed:null,callback_enter:null}},n=!("onscroll"in window)||/glebot/.test(navigator.userAgent),o=function(e,t){e&&e(t)},i=function(e){return e.getBoundingClientRect().top+window.pageYOffset-e.ownerDocument.documentElement.clientTop},s=function(e,t,n){return(t===window?window.innerHeight+window.pageYOffset:i(t)+t.offsetHeight)<=i(e)-n},l=function(e){return e.getBoundingClientRect().left+window.pageXOffset-e.ownerDocument.documentElement.clientLeft},r=function(e,t,n){var o=window.innerWidth;return(t===window?o+window.pageXOffset:l(t)+o)<=l(e)-n},a=function(e,t,n){return(t===window?window.pageYOffset:i(t))>=i(e)+n+e.offsetHeight},c=function(e,t,n){return(t===window?window.pageXOffset:l(t))>=l(e)+n+e.offsetWidth},u=function(e,t,n){return!(s(e,t,n)||a(e,t,n)||r(e,t,n)||c(e,t,n))},d=function(e,t){var n,o=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:o}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:o})}window.dispatchEvent(n)},h=function(e,t){return e.getAttribute("data-"+t)},f=function(e,t,n){return e.setAttribute("data-"+t,n)},_=function(e,t,n){for(var o,i=0;o=e.children[i];i+=1)if("SOURCE"===o.tagName){var s=h(o,n);s&&o.setAttribute(t,s)}},p=function(e,t,n){n&&e.setAttribute(t,n)},m="undefined"!=typeof window,g=m&&"classList"in document.createElement("p"),v=function(e,t){g?e.classList.add(t):e.className+=(e.className?" ":"")+t},w=function(e,t){g?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},b=function(e){this._settings=_extends({},t(),e),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};b.prototype={_reveal:function(t){var n=this._settings,i=function e(){n&&(t.removeEventListener("load",s),t.removeEventListener("error",e),w(t,n.class_loading),v(t,n.class_error),o(n.callback_error,t))},s=function e(){n&&(w(t,n.class_loading),v(t,n.class_loaded),t.removeEventListener("load",e),t.removeEventListener("error",i),o(n.callback_load,t))};o(n.callback_enter,t),["IMG","IFRAME","VIDEO"].indexOf(t.tagName)>-1&&(t.addEventListener("load",s),t.addEventListener("error",i),v(t,n.class_loading)),e(t,n),o(n.callback_set,t)},_loopThroughElements:function(e){var t=this._settings,i=this._elements,s=i?i.length:0,l=void 0,r=[],a=this._isFirstLoop;for(l=0;l<s;l++){var c=i[l];t.skip_invisible&&null===c.offsetParent||(n||e||u(c,t.container,t.threshold))&&(a&&v(c,t.class_initial),this._reveal(c),r.push(l),f(c,"was-processed",!0))}for(;r.length;)i.splice(r.pop(),1),o(t.callback_processed,i.length);0===s&&this._stopScrollHandler(),a&&(this._isFirstLoop=!1)},_purgeElements:function(){var e=this._elements,t=e.length,n=void 0,o=[];for(n=0;n<t;n++){var i=e[n];h(i,"was-processed")&&o.push(n)}for(;o.length>0;)e.splice(o.pop(),1)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var e=this._settings.throttle;if(0!==e){var t=Date.now(),n=e-(t-this._previousLoopTime);n<=0||n>e?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=t,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},loadAll:function(){this._loopThroughElements(!0)},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null}};var y=window.lazyLoadOptions;return m&&y&&function(e,t){var n=t.length;if(n)for(var o=0;o<n;o++)d(e,t[o]);else d(e,t)}(b,y),b});
+var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(e,t){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.LazyLoad=t()}(this,function(){"use strict";var _=!("onscroll"in window)||/glebot/.test(navigator.userAgent),f=function(e,t){e&&e(t)},o=function(e){return e.getBoundingClientRect().top+window.pageYOffset-e.ownerDocument.documentElement.clientTop},p=function(e,t,n){return(t===window?window.innerHeight+window.pageYOffset:o(t)+t.offsetHeight)<=o(e)-n},i=function(e){return e.getBoundingClientRect().left+window.pageXOffset-e.ownerDocument.documentElement.clientLeft},m=function(e,t,n){var o=window.innerWidth;return(t===window?o+window.pageXOffset:i(t)+o)<=i(e)-n},g=function(e,t,n){return(t===window?window.pageYOffset:o(t))>=o(e)+n+e.offsetHeight},v=function(e,t,n){return(t===window?window.pageXOffset:i(t))>=i(e)+n+e.offsetWidth};var s=function(e,t){var n,o="LazyLoad::Initialized",i=new e(t);try{n=new CustomEvent(o,{detail:{instance:i}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent(o,!1,!1,{instance:i})}window.dispatchEvent(n)};var w="data-",u=function(e,t){return e.getAttribute(w+t)},d=function(e,t,n){for(var o,i=0;o=e.children[i];i+=1)if("SOURCE"===o.tagName){var s=u(o,n);s&&o.setAttribute(t,s)}},h=function(e,t,n){n&&e.setAttribute(t,n)};var e="undefined"!=typeof window,n=e&&"classList"in document.createElement("p"),b=function(e,t){n?e.classList.add(t):e.className+=(e.className?" ":"")+t},l=function(e,t){n?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},t=function(e){this._settings=_extends({},{elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_processed:null,callback_enter:null},e),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};t.prototype={_reveal:function(t){var n=this._settings,o=function e(){n&&(t.removeEventListener("load",i),t.removeEventListener("error",e),l(t,n.class_loading),b(t,n.class_error),f(n.callback_error,t))},i=function e(){n&&(l(t,n.class_loading),b(t,n.class_loaded),t.removeEventListener("load",e),t.removeEventListener("error",o),f(n.callback_load,t))};f(n.callback_enter,t),-1<["IMG","IFRAME","VIDEO"].indexOf(t.tagName)&&(t.addEventListener("load",i),t.addEventListener("error",o),b(t,n.class_loading)),function(e,t){var n=t.data_sizes,o=t.data_srcset,i=t.data_src,s=u(e,i),l=e.tagName;if("IMG"===l){var r=e.parentNode;r&&"PICTURE"===r.tagName&&d(r,"srcset",o);var a=u(e,n);h(e,"sizes",a);var c=u(e,o);return h(e,"srcset",c),h(e,"src",s)}if("IFRAME"!==l)return"VIDEO"===l?(d(e,"src",i),h(e,"src",s)):s&&(e.style.backgroundImage='url("'+s+'")');h(e,"src",s)}(t,n),f(n.callback_set,t)},_loopThroughElements:function(e){var t,n,o,i,s,l=this._settings,r=this._elements,a=r?r.length:0,c=void 0,u=[],d=this._isFirstLoop;for(c=0;c<a;c++){var h=r[c];l.skip_invisible&&null===h.offsetParent||(!_&&!e&&(o=h,i=l.container,s=l.threshold,p(o,i,s)||g(o,i,s)||m(o,i,s)||v(o,i,s))||(d&&b(h,l.class_initial),this._reveal(h),u.push(c),t="was-processed",n=!0,h.setAttribute(w+t,n)))}for(;u.length;)r.splice(u.pop(),1),f(l.callback_processed,r.length);0===a&&this._stopScrollHandler(),d&&(this._isFirstLoop=!1)},_purgeElements:function(){var e=this._elements,t=e.length,n=void 0,o=[];for(n=0;n<t;n++){var i=e[n];u(i,"was-processed")&&o.push(n)}for(;0<o.length;)e.splice(o.pop(),1)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var e=this._settings.throttle;if(0!==e){var t=Date.now(),n=e-(t-this._previousLoopTime);n<=0||e<n?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=t,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},loadAll:function(){this._loopThroughElements(!0)},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null}};var r=window.lazyLoadOptions;return e&&r&&function(e,t){var n=t.length;if(n)for(var o=0;o<n;o++)s(e,t[o]);else s(e,t)}(t,r),t});

gulpfile.js

 var gulp = require("gulp");
-var uglify = require("gulp-uglify");
 var eslint = require("gulp-eslint");
+var rollup = require("gulp-rollup");
 var rename = require("gulp-rename");
 var babel = require("gulp-babel");
-var rollup = require("gulp-rollup");
+var uglify = require("gulp-uglify");
 
 var destFolder = "./dist";
 
-gulp.task("default", function () {
-    return gulp.src("./src/**/*.js")
-        // ----------- linting --------------
-        .pipe(eslint())
-        .pipe(eslint.format())
-        .pipe(eslint.failAfterError())
-        // ----------- rolling up --------------
-        .pipe(rollup({
-            format: "umd",
-            moduleName: "LazyLoad",
-            entry: "./src/lazyload.js"
-        }))
-        .pipe(rename("lazyload.es2015.js"))
-        .pipe(gulp.dest(destFolder)) // --> writing rolledup
-        // ----------- babelizing --------------
-        .pipe(babel({
-            presets: [["es2015", { "modules": false }]],
-            sourceMap: false,
-            plugins: ["transform-object-assign"]
-        }))
-        .pipe(rename("lazyload.js"))
-        .pipe(gulp.dest(destFolder)) // --> writing babelized
-        // ----------- minifying --------------
-        .pipe(uglify())
-        .pipe(rename("lazyload.min.js"))
-        .pipe(gulp.dest(destFolder)); // --> writing uglified
+gulp.task("default", function() {
+	process.env.NODE_ENV = "release";
+	return (
+		gulp.
+			src("./src/**/*.js").
+			// ----------- linting --------------
+			pipe(eslint()).
+			pipe(eslint.format()).
+			pipe(eslint.failAfterError()). // --> failing if errors
+			// ----------- rolling up --------------
+			pipe(
+				rollup({
+					output: { name: "LazyLoad", format: "umd" },
+					input: "./src/lazyload.js"
+				})
+			).
+			pipe(rename("lazyload.es2015.js")).
+			pipe(gulp.dest(destFolder)). // --> writing rolledup
+			// ----------- babelizing --------------
+			pipe(
+				babel({
+					presets: [["es2015", { modules: false }]],
+					sourceMap: false,
+					plugins: ["transform-object-assign"]
+				})
+			).
+			pipe(rename("lazyload.js")).
+			pipe(gulp.dest(destFolder)). // --> writing babelized ES5
+			// ----------- minifying --------------
+			pipe(uglify()).
+			pipe(rename("lazyload.min.js")).
+			pipe(gulp.dest(destFolder)) // --> writing uglified
+	);
 });
 
-gulp.task("watch", function () {
-    gulp.watch("./src/**/*.js", ["default"]);
-    // Other watchers
-});
+gulp.task("watch", function() {
+	gulp.watch("./src/**/*.js", ["default"]);
+	// Other watchers
+});

package.json

 {
-  "name": "vanilla-lazyload",
-  "version": "8.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-env": "^1.6.0",
-    "babel-preset-es2015": "^6.24.1",
-    "gulp": "^3.9.1",
-    "gulp-babel": "^7.0.0",
-    "gulp-eslint": "^4.0.0",
-    "gulp-notify": "^3.0.0",
-    "gulp-rename": "^1.2.2",
-    "gulp-rollup": "^2.14.0",
-    "gulp-uglify": "^3.0.0"
-  },
-  "scripts": {},
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/verlok/lazyload"
-  },
-  "keywords": [
-    "lazyload",
-    "vanilla",
-    "responsive",
-    "images",
-    "picture",
-    "srcset",
-    "SEO",
-    "sizes",
-    "progressive",
-    "performance",
-    "perfmatters",
-    "no-jquery",
-    "gulp",
-    "async"
-  ],
-  "author": "Andrea \"verlok\" Verlicchi",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/verlok/lazyload/issues"
-  },
-  "homepage": "http://verlok.github.io/lazyload"
+	"name": "vanilla-lazyload",
+	"version": "8.10.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-env": "^1.6.0",
+		"babel-preset-es2015": "^6.24.1",
+		"gulp": "^3.9.1",
+		"gulp-babel": "^7.0.0",
+		"gulp-eslint": "^4.0.0",
+		"gulp-notify": "^3.0.0",
+		"gulp-rename": "^1.2.2",
+		"gulp-rollup": "^2.14.0",
+		"gulp-uglify": "^3.0.0"
+	},
+	"scripts": {},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/verlok/lazyload"
+	},
+	"keywords": [
+		"lazyload",
+		"vanilla",
+		"responsive",
+		"images",
+		"picture",
+		"srcset",
+		"SEO",
+		"sizes",
+		"progressive",
+		"performance",
+		"perfmatters",
+		"no-jquery",
+		"gulp",
+		"async"
+	],
+	"author": "Andrea \"verlok\" Verlicchi",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/verlok/lazyload/issues"
+	},
+	"homepage": "http://verlok.github.io/lazyload"
 }

src/lazyload.defaults.js

 export default () => ({
-    elements_selector: "img",
-    container: window,
-    threshold: 300,
-    throttle: 150,
-    data_src: "src",
-    data_srcset: "srcset",
-    class_loading: "loading",
-    class_loaded: "loaded",
-    class_error: "error",
-    class_initial: "initial",
-    skip_invisible: true,
-    callback_load: null,
-    callback_error: null,
-    callback_set: null,
-    callback_processed: null,
-    callback_enter: null
-});
+	elements_selector: "img",
+	container: window,
+	threshold: 300,
+	throttle: 150,
+	data_src: "src",
+	data_srcset: "srcset",
+	data_sizes: "sizes",
+	class_loading: "loading",
+	class_loaded: "loaded",
+	class_error: "error",
+	class_initial: "initial",
+	skip_invisible: true,
+	callback_load: null,
+	callback_error: null,
+	callback_set: null,
+	callback_processed: null,
+	callback_enter: null
+});

src/lazyload.setSources.js

@@ -1,46 +0,53 @@
-import {getData} from "./lazyload.data";
+import { getData } from "./lazyload.data";
 
 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);
-            }
-        }
-    }
+	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);
 };
 
 export default function setSources(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 {
+		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}")`;
+	}
+}

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

871122

increased by1.25%

Number of package files

125

increased by0.81%

Lines of code

1180

increased by2.61%

Worsened metrics

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes