vanilla-lazyload - npm Package Compare versions

Comparing version 8.2.1 to 8.5.1

dist/lazyload.es2015.js

@@ -12,4 +12,4 @@ (function (global, factory) {
     throttle: 150,
-    data_src: "original",
-    data_srcset: "original-set",
+    data_src: "src",
+    data_srcset: "srcset",
     class_loading: "loading",
@@ -74,4 +74,14 @@ class_loaded: "loaded",
 const createInstance = function (classObj, options) { 
+    var event;
+    let eventString = "LazyLoad::Initialized";
     let instance = new classObj(options);
-    let event = new CustomEvent("LazyLoad::Initialized", { detail: { instance } });
+    try {
+        // Works in modern browsers
+        event = new CustomEvent(eventString, { detail: { instance } });
+    } 
+    catch(err) {
+        // Works in Internet Explorer (all versions)
+        event = document.createEvent("CustomEvent");
+        event.initCustomEvent(eventString, false, false, { instance });
+    }
     window.dispatchEvent(event);
@@ -78,0 +88,0 @@ };

dist/lazyload.js

@@ -15,4 +15,4 @@ 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; };
         throttle: 150,
-        data_src: "original",
-        data_srcset: "original-set",
+        data_src: "src",
+        data_srcset: "srcset",
         class_loading: "loading",
@@ -72,4 +72,13 @@ class_loaded: "loaded",
     var createInstance = function createInstance(classObj, options) {
+        var event;
+        var eventString = "LazyLoad::Initialized";
         var instance = new classObj(options);
-        var event = new CustomEvent("LazyLoad::Initialized", { detail: { instance: instance } });
+        try {
+            // Works in modern browsers
+            event = new CustomEvent(eventString, { detail: { instance: instance } });
+        } catch (err) {
+            // Works in Internet Explorer (all versions)
+            event = document.createEvent("CustomEvent");
+            event.initCustomEvent(eventString, false, false, { instance: instance });
+        }
         window.dispatchEvent(event);
@@ -76,0 +85,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";var e={elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"original",data_srcset:"original-set",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},t=!("onscroll"in window)||/glebot/.test(navigator.userAgent),n=function(e,t){e&&e(t)},o=function(e){return e.getBoundingClientRect().top+window.pageYOffset-e.ownerDocument.documentElement.clientTop},i=function(e,t,n){return(t===window?window.innerHeight+window.pageYOffset:o(t)+t.offsetHeight)<=o(e)-n},s=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:s(t)+o)<=s(e)-n},l=function(e,t,n){return(t===window?window.pageYOffset:o(t))>=o(e)+n+e.offsetHeight},a=function(e,t,n){return(t===window?window.pageXOffset:s(t))>=s(e)+n+e.offsetWidth},c=function(e,t,n){return!(i(e,t,n)||l(e,t,n)||r(e,t,n)||a(e,t,n))},u=function(e,t){var n=new e(t),o=new CustomEvent("LazyLoad::Initialized",{detail:{instance:n}});window.dispatchEvent(o)},d=function(e,t){return e.getAttribute("data-"+t)},h=function(e,t,n){return e.setAttribute("data-"+t,n)},f=function(e,t){var n=e.parentElement;if("PICTURE"===n.tagName)for(var o=0;o<n.children.length;o++){var i=n.children[o];if("SOURCE"===i.tagName){var s=d(i,t);s&&i.setAttribute("srcset",s)}}},_=function(e,t,n){var o=e.tagName,i=d(e,n);if("IMG"===o){f(e,t);var s=d(e,t);return s&&e.setAttribute("srcset",s),void(i&&e.setAttribute("src",i))}"IFRAME"!==o?i&&(e.style.backgroundImage='url("'+i+'")'):i&&e.setAttribute("src",i)},p="classList"in document.createElement("p"),m=function(e,t){p?e.classList.add(t):e.className+=(e.className?" ":"")+t},g=function(e,t){p?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},v=function(t){this._settings=_extends({},e,t),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()};v.prototype={_reveal:function(e){var t=this._settings,o=function o(){t&&(e.removeEventListener("load",i),e.removeEventListener("error",o),g(e,t.class_loading),m(e,t.class_error),n(t.callback_error,e))},i=function i(){t&&(g(e,t.class_loading),m(e,t.class_loaded),e.removeEventListener("load",i),e.removeEventListener("error",o),n(t.callback_load,e))};"IMG"!==e.tagName&&"IFRAME"!==e.tagName||(e.addEventListener("load",i),e.addEventListener("error",o),m(e,t.class_loading)),_(e,t.data_srcset,t.data_src),n(t.callback_set,e)},_loopThroughElements:function(){var e=this._settings,o=this._elements,i=o?o.length:0,s=void 0,r=[],l=this._isFirstLoop;for(s=0;s<i;s++){var a=o[s];e.skip_invisible&&null===a.offsetParent||(t||c(a,e.container,e.threshold))&&(l&&m(a,e.class_initial),this._reveal(a),r.push(s),h(a,"was-processed",!0))}for(;r.length;)o.splice(r.pop(),1),n(e.callback_processed,o.length);0===i&&this._stopScrollHandler(),l&&(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];d(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()},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 w=window.lazyLoadOptions;return w&&function(e,t){var n=t.length;if(n)for(var o=0;o<n;o++)u(e,t[o]);else u(e,t)}(v,w),v});
+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 e={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},t=!("onscroll"in window)||/glebot/.test(navigator.userAgent),n=function(e,t){e&&e(t)},o=function(e){return e.getBoundingClientRect().top+window.pageYOffset-e.ownerDocument.documentElement.clientTop},i=function(e,t,n){return(t===window?window.innerHeight+window.pageYOffset:o(t)+t.offsetHeight)<=o(e)-n},s=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:s(t)+o)<=s(e)-n},l=function(e,t,n){return(t===window?window.pageYOffset:o(t))>=o(e)+n+e.offsetHeight},a=function(e,t,n){return(t===window?window.pageXOffset:s(t))>=s(e)+n+e.offsetWidth},c=function(e,t,n){return!(i(e,t,n)||l(e,t,n)||r(e,t,n)||a(e,t,n))},u=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)},d=function(e,t){return e.getAttribute("data-"+t)},h=function(e,t,n){return e.setAttribute("data-"+t,n)},f=function(e,t){var n=e.parentElement;if("PICTURE"===n.tagName)for(var o=0;o<n.children.length;o++){var i=n.children[o];if("SOURCE"===i.tagName){var s=d(i,t);s&&i.setAttribute("srcset",s)}}},_=function(e,t,n){var o=e.tagName,i=d(e,n);if("IMG"===o){f(e,t);var s=d(e,t);return s&&e.setAttribute("srcset",s),void(i&&e.setAttribute("src",i))}"IFRAME"!==o?i&&(e.style.backgroundImage='url("'+i+'")'):i&&e.setAttribute("src",i)},p="classList"in document.createElement("p"),m=function(e,t){p?e.classList.add(t):e.className+=(e.className?" ":"")+t},g=function(e,t){p?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},v=function(t){this._settings=_extends({},e,t),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()};v.prototype={_reveal:function(e){var t=this._settings,o=function o(){t&&(e.removeEventListener("load",i),e.removeEventListener("error",o),g(e,t.class_loading),m(e,t.class_error),n(t.callback_error,e))},i=function i(){t&&(g(e,t.class_loading),m(e,t.class_loaded),e.removeEventListener("load",i),e.removeEventListener("error",o),n(t.callback_load,e))};"IMG"!==e.tagName&&"IFRAME"!==e.tagName||(e.addEventListener("load",i),e.addEventListener("error",o),m(e,t.class_loading)),_(e,t.data_srcset,t.data_src),n(t.callback_set,e)},_loopThroughElements:function(){var e=this._settings,o=this._elements,i=o?o.length:0,s=void 0,r=[],l=this._isFirstLoop;for(s=0;s<i;s++){var a=o[s];e.skip_invisible&&null===a.offsetParent||(t||c(a,e.container,e.threshold))&&(l&&m(a,e.class_initial),this._reveal(a),r.push(s),h(a,"was-processed",!0))}for(;r.length;)o.splice(r.pop(),1),n(e.callback_processed,o.length);0===i&&this._stopScrollHandler(),l&&(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];d(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()},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 w=window.lazyLoadOptions;return w&&function(e,t){var n=t.length;if(n)for(var o=0;o<n;o++)u(e,t[o]);else u(e,t)}(v,w),v});

gulpfile.js

@@ -1,12 +0,11 @@
-var gulp = require('gulp');
-var uglify = require('gulp-uglify');
-var eslint = require('gulp-eslint');
-var rename = require('gulp-rename');
-var notify = require('gulp-notify');
-var babel = require('gulp-babel');
-var rollup = require('gulp-rollup');
+var gulp = require("gulp");
+var uglify = require("gulp-uglify");
+var eslint = require("gulp-eslint");
+var rename = require("gulp-rename");
+var babel = require("gulp-babel");
+var rollup = require("gulp-rollup");
 
 var destFolder = "./dist";
 
-gulp.task('scripts', function () {
+gulp.task("default", function () {
     return gulp.src("./src/**/*.js")
@@ -21,3 +20,3 @@ // ----------- linting --------------
             moduleName: "LazyLoad",
-            entry: './src/lazyload.js'
+            entry: "./src/lazyload.js"
         }))
@@ -37,7 +36,8 @@ .pipe(rename("lazyload.es2015.js"))
         .pipe(rename("lazyload.min.js"))
-        .pipe(gulp.dest(destFolder)) // --> writing uglified
-        // ----------- notifying --------------
-        .pipe(notify({
-            message: 'Scripts task complete'
-        }));
+        .pipe(gulp.dest(destFolder)); // --> writing uglified
+});
+
+gulp.task("watch", function () {
+    gulp.watch("./src/**/*.js", ["default"]);
+    // Other watchers
 });

package.json

 {
   "name": "vanilla-lazyload",
-  "version": "8.2.1",
+  "version": "8.5.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",
   "main": "dist/lazyload.min.js",
   "devDependencies": {
+    "babel-core": "^6.26.0",
     "babel-plugin-transform-object-assign": "^6.22.0",
@@ -8,0 +9,0 @@ "babel-preset-env": "^1.6.0",

README.md

@@ -41,3 +41,3 @@ LazyLoad is a fast, lightweight and flexible script that _speeds up your web application_ by **loading images only as they enter the viewport**. LazyLoad is written in plain (vanilla) Javascript, it supports [responsive images](https://alistapart.com/article/responsive-images-in-practice), it's SEO friendly and it has some other [notable features](#notable-features).
 <img alt="..." 
-     data-original="../img/44721746JJ_15_a.jpg"
+     data-src="../img/44721746JJ_15_a.jpg"
      width="220" height="280">
@@ -61,4 +61,4 @@ ```
 ```html
-<img data-original="/your/image1.jpg"
-    data-original-set="/your/image1.jpg 200w, /your/[e-mail] 400w"
+<img data-src="/your/image1.jpg"
+    data-srcset="/your/image1.jpg 200w, /your/[e-mail] 400w"
     sizes="(min-width: 20em) 35vw, 100vw">
@@ -83,5 +83,5 @@ ```
 <picture>
-    <source media="(min-width: 1024px)" data-original-set="/your/image1a.jpg" />
-    <source media="(min-width: 500px)" data-original-set="/your/image1b.jpg" />
-    <img alt="Stivaletti" data-original="/your/image1.jpg">
+    <source media="(min-width: 1024px)" data-srcset="/your/image1a.jpg" />
+    <source media="(min-width: 500px)" data-srcset="/your/image1b.jpg" />
+    <img alt="Stivaletti" data-src="/your/image1.jpg">
 </picture>
@@ -197,3 +197,3 @@ ```
     <img alt="Image description" 
-         data-original="../img/44721746JJ_15_a.jpg" 
+         data-src="../img/44721746JJ_15_a.jpg" 
          width="220" height="280">
@@ -223,3 +223,3 @@ <!-- More images -->
     <img alt="Image description" 
-         data-original="../img/44721746JJ_15_a.jpg" 
+         data-src="../img/44721746JJ_15_a.jpg" 
          width="220" height="280">
@@ -230,3 +230,3 @@ <!-- More images -->
     <img alt="Image description" 
-         data-original="../img/44721746JJ_15_a.jpg" 
+         data-src="../img/44721746JJ_15_a.jpg" 
          width="220" height="280">
@@ -275,3 +275,3 @@ <!-- More images -->
 ```html
-<iframe data-original="iframes/i01.html" frameborder="0"></iframe>
+<iframe data-src="iframes/i01.html" frameborder="0"></iframe>
 ```
@@ -296,3 +296,3 @@
 ```html
-<div class="lazy" data-original="../img/44721746JJ_15_a.jpg"></div>
+<div class="lazy" data-src="../img/44721746JJ_15_a.jpg"></div>
 ```
@@ -308,3 +308,3 @@
 
-That's it. Whenever the element selected by `elements_selector` is not an `img` or an `iframe`, LazyLoad puts the image found in the `data-original` attribute in the `background-image` of the element.
+That's it. Whenever the element selected by `elements_selector` is not an `img` or an `iframe`, LazyLoad puts the image found in the `data-src` attribute in the `background-image` of the element.
 
@@ -321,9 +321,9 @@ [DEMO](http://verlok.github.io/lazyload/demos/background_images.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/background_images.html) | [API](#api)
 <div class="horzContainer">
-    <img src="" alt="Row 01, col 01" data-original="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_01&amp;w=200&amp;h=200">
-    <img src="" alt="Row 01, col 02" data-original="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_02&amp;w=200&amp;h=200">
+    <img src="" alt="Row 01, col 01" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_01&amp;w=200&amp;h=200">
+    <img src="" alt="Row 01, col 02" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_02&amp;w=200&amp;h=200">
     <!-- ... -->
 </div>
 <div class="horzContainer">
-    <img src="" alt="Row 02, col 01" data-original="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_01&amp;w=200&amp;h=200">
-    <img src="" alt="Row 02, col 02" data-original="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_02&amp;w=200&amp;h=200">
+    <img src="" alt="Row 02, col 01" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_01&amp;w=200&amp;h=200">
+    <img src="" alt="Row 02, col 02" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_02&amp;w=200&amp;h=200">
     <!-- ... -->
@@ -446,4 +446,4 @@ </div>
 | `throttle` | The time that has to pass between one element parsing and the following, when fast scroll events occur | `150` |
-| `data_src` | The name of the data attribute containing the original image source, excluding the `data-`, e.g. if your data attribute is named `data-original`, just pass `original` | `"original"` |
-| `data_srcset` | The name of the data attribute containing the original image source set in either `img` and `source` tags. , e.g. if your data attribute is named `data-original-set`, just pass `original-set` | `"original-set"` |
+| `data_src` | The name of the data attribute containing the src image source, excluding the `data-`, e.g. if your data attribute is named `data-src`, just pass `src` | `"src"` |
+| `data_srcset` | The name of the data attribute containing the src image source set in either `img` and `source` tags. , e.g. if your data attribute is named `data-srcset`, just pass `srcset` | `"srcset"` |
 | `class_loading` | The class applied to the elements while the loading is in progress. | `"loading"` |
@@ -450,0 +450,0 @@ | `class_loaded` | The class applied to the elements when the loading is complete | `"loaded"` |

src/lazyload.autoInitialize.js

 /* Creates instance and notifies it through the window element */
 const createInstance = function (classObj, options) { 
+    var event;
+    let eventString = "LazyLoad::Initialized";
     let instance = new classObj(options);
-    let event = new CustomEvent("LazyLoad::Initialized", { detail: { instance } });
+    try {
+        // Works in modern browsers
+        event = new CustomEvent(eventString, { detail: { instance } });
+    } 
+    catch(err) {
+        // Works in Internet Explorer (all versions)
+        event = document.createEvent("CustomEvent");
+        event.initCustomEvent(eventString, false, false, { instance });
+    }
     window.dispatchEvent(event);
@@ -6,0 +16,0 @@ };

src/lazyload.defaults.js

@@ -6,4 +6,4 @@ export default {
     throttle: 150,
-    data_src: "original",
-    data_srcset: "original-set",
+    data_src: "src",
+    data_srcset: "srcset",
     class_loading: "loading",
@@ -10,0 +10,0 @@ class_loaded: "loaded",

No alert changes

Improved metrics

Lines of code

1127

increased by2.45%

Worsened metrics

Total package byte prevSize

849400

decreased by-2.73%

Dev dependency count

11

increased by10%

Number of package files

122

decreased by-3.17%

No dependency changes