vanilla-lazyload - npm Package Compare versions

Comparing version 10.3.4 to 10.3.5

__tests__/lazyload.setSources.test.js

@@ -39,6 +39,4 @@ import {setSources, setSourcesForPicture} from "../src/lazyLoad.setSources";
     test("...with initially empty src and srcset", () => {
-        img.dataset = {
-            "src": img200,
-            "srcset": img400
-        };
+        img.setAttribute("data-src", img200);
+        img.setAttribute("data-srcset", img400);
         setSources(img, lazyloadSettings);
@@ -50,6 +48,4 @@ expect(img).toHaveAttributeValue("src", img200);
     test("...with initial values in src and srcset", () => {
-        img.dataset = {
-            "src": img200,
-            "srcset": img400
-        };
+        img.setAttribute("data-src", img200);
+        img.setAttribute("data-srcset", img400);
         img.setAttribute("src", img1);
@@ -83,5 +79,3 @@ img.setAttribute("srcset", img1);
     test("...with initially empty src", () => {
-        iframe.dataset = {
-            "src": srcToLoad
-        };
+        iframe.setAttribute("data-src", srcToLoad);
         setSources(iframe, lazyloadSettings);
@@ -91,5 +85,3 @@ expect(iframe).toHaveAttributeValue("src", srcToLoad);
     test("...with initial value in src", () => {
-        iframe.dataset = {
-            "src": srcToLoad
-        };
+        iframe.setAttribute("data-src", srcToLoad);
         iframe.setAttribute("src", preloadedSrc);
@@ -100,5 +92,3 @@ setSources(iframe, lazyloadSettings);
     test("...with initial value in src and empty data-src", () => {
-        iframe.dataset = {
-            "src": ""
-        };
+        iframe.setAttribute("data-src", "");
         iframe.setAttribute("src", preloadedSrc);
@@ -120,5 +110,3 @@ setSources(iframe, lazyloadSettings);
     test("...with initially empty style attribute", () => {
-        element.dataset = {
-            "src": img200
-        };
+        element.setAttribute("data-src", img200);
         setSources(element, lazyloadSettings);
@@ -129,5 +117,3 @@ // Test cheating: bug in JsDOM doesn't return the url("") with quotes inside
     test("...with initially present style attribute", () => {
-        element.dataset = {
-            "src": img100
-        };
+        element.setAttribute("data-src", img100);
         element.style = {
@@ -141,5 +127,3 @@ padding: "1px"
     test("...with initially present style and background", () => {
-        element.dataset = {
-            "src": img200
-        };
+        element.setAttribute("data-src", img200);
         element.style = {
@@ -171,4 +155,4 @@ padding: "1px",
     test("...with initially empty srcset", () => {
-        source1.dataset = {"srcset": img200};
-        source2.dataset = {"srcset": img400};
+        source1.setAttribute("data-srcset", img200);
+        source2.setAttribute("data-srcset", img400);
         setSourcesForPicture(img, lazyloadSettings);
@@ -180,4 +164,4 @@ expect(source1).toHaveAttributeValue("srcset", img200);
     test("...with initial value in srcset", () => {
-        source1.dataset = {"srcset": img200};
-        source2.dataset = {"srcset": img400};
+        source1.setAttribute("data-srcset", img200);
+        source2.setAttribute("data-srcset", img400);
         source1.setAttribute("srcset", img1);
@@ -191,4 +175,4 @@ source2.setAttribute("srcset", img1);
     test("...with initial value in srcset and empty data-srcset", () => {
-        source1.dataset = {"srcset": ""};
-        source2.dataset = {"srcset": ""};
+        source1.setAttribute("data-srcset", "");
+        source2.setAttribute("data-srcset", "");
         source1.setAttribute("srcset", img200);
@@ -195,0 +179,0 @@ source2.setAttribute("srcset", img400);

CHANGELOG.md

@@ -5,2 +5,10 @@ # CHANGELOG
 
+#### 10.3.5
+
+Fixed a bug that could occur on older versions of IE when trying to access an image's parent node.
+
+#### 10.3.4
+
+Fixed a CustomEvent bug which occurred on IE when using async object initialization.
+
 #### 10.3.3
@@ -56,3 +64,3 @@
 
-Fixed a CustomEvent bug which occured on IE when using async object initialization
+Fixed a CustomEvent bug which occured on IE when using async object initialization.
 
@@ -59,0 +67,0 @@ #### 8.5.0

dist/lazyload.es2015.js

@@ -38,5 +38,15 @@ (function (global, factory) {
 /* Creates instance and notifies it through the window element */
-const createInstance = function (classObj, options) {
+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);
@@ -61,3 +71,3 @@ };
     const {data_srcset: dataSrcSet} = settings;
-    const parent = element.parentElement;
+    const parent = element.parentNode;
     if (parent.tagName !== "PICTURE") {
@@ -64,0 +74,0 @@ return;

dist/lazyload.js

@@ -42,4 +42,13 @@ 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 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);
@@ -65,3 +74,3 @@ };
 
-        var parent = element.parentElement;
+        var parent = element.parentNode;
         if (parent.tagName !== "PICTURE") {
@@ -68,0 +77,0 @@ return;

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={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},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=new e(t),r=new CustomEvent("LazyLoad::Initialized",{detail:{instance:n}});window.dispatchEvent(r)},o=function(e,n){var r=n.data_srcset,s=e.parentElement;if("PICTURE"===s.tagName)for(var o,a=0;o=s.children[a];a+=1)if("SOURCE"===o.tagName){var i=t(o,r);i&&o.setAttribute("srcset",i)}},a=function(e,n){var r=n.data_src,s=n.data_srcset,a=e.tagName,i=t(e,r);if("IMG"===a){o(e,n);var c=t(e,s);return c&&e.setAttribute("srcset",c),void(i&&e.setAttribute("src",i))}"IFRAME"!==a?i&&(e.style.backgroundImage='url("'+i+'")'):i&&e.setAttribute("src",i)},i="classList"in document.createElement("p"),c=function(e,t){i?e.classList.add(t):e.className+=(e.className?" ":"")+t},l=function(e,t){i?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},u=function(e,t){e&&e(t)},f=function(e,t,n){e.removeEventListener("load",t),e.removeEventListener("error",n)},d=function(e,t){var n=function n(s){_(s,!0,t),f(e,n,r)},r=function r(s){_(s,!1,t),f(e,n,r)};e.addEventListener("load",n),e.addEventListener("error",r)},_=function(e,t,n){var r=e.target;l(r,n.class_loading),c(r,t?n.class_loaded:n.class_error),u(t?n.callback_load:n.callback_error,r)},v=function(e,t){["IMG","IFRAME"].indexOf(e.tagName)>-1&&(d(e,t),c(e,t.class_loading)),a(e,t),n(e,"was-processed",!0),u(t.callback_set,e)},m=function(t,n){this._settings=_extends({},e,t),this._setObserver(),this.update(n)};m.prototype={_setObserver:function(){var e=this;if("IntersectionObserver"in window){var t=this._settings;this._observer=new IntersectionObserver(function(n){n.forEach(function(n){if(n.intersectionRatio>0){var r=n.target;v(r,t),e._observer.unobserve(r)}}),e._elements=r(e._elements)},{root:t.container===document?null:t.container,rootMargin:t.threshold+"px"})}},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._elements.forEach(function(e){v(e,n)}),this._elements=r(this._elements))},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 b=window.lazyLoadOptions;return b&&function(e,t){if(t.length)for(var n,r=0;n=t[r];r+=1)s(e,n);else s(e,t)}(m,b),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},_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: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},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){var r=n.data_srcset,s=e.parentNode;if("PICTURE"===s.tagName)for(var o,a=0;o=s.children[a];a+=1)if("SOURCE"===o.tagName){var i=t(o,r);i&&o.setAttribute("srcset",i)}},a=function(e,n){var r=n.data_src,s=n.data_srcset,a=e.tagName,i=t(e,r);if("IMG"===a){o(e,n);var c=t(e,s);return c&&e.setAttribute("srcset",c),void(i&&e.setAttribute("src",i))}"IFRAME"!==a?i&&(e.style.backgroundImage='url("'+i+'")'):i&&e.setAttribute("src",i)},i="classList"in document.createElement("p"),c=function(e,t){i?e.classList.add(t):e.className+=(e.className?" ":"")+t},l=function(e,t){i?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},u=function(e,t){e&&e(t)},d=function(e,t,n){e.removeEventListener("load",t),e.removeEventListener("error",n)},f=function(e,t){var n=function n(s){v(s,!0,t),d(e,n,r)},r=function r(s){v(s,!1,t),d(e,n,r)};e.addEventListener("load",n),e.addEventListener("error",r)},v=function(e,t,n){var r=e.target;l(r,n.class_loading),c(r,t?n.class_loaded:n.class_error),u(t?n.callback_load:n.callback_error,r)},_=function(e,t){["IMG","IFRAME"].indexOf(e.tagName)>-1&&(f(e,t),c(e,t.class_loading)),a(e,t),n(e,"was-processed",!0),u(t.callback_set,e)},m=function(t,n){this._settings=_extends({},e,t),this._setObserver(),this.update(n)};m.prototype={_setObserver:function(){var e=this;if("IntersectionObserver"in window){var t=this._settings;this._observer=new IntersectionObserver(function(n){n.forEach(function(n){if(n.intersectionRatio>0){var r=n.target;_(r,t),e._observer.unobserve(r)}}),e._elements=r(e._elements)},{root:t.container===document?null:t.container,rootMargin:t.threshold+"px"})}},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._elements.forEach(function(e){_(e,n)}),this._elements=r(this._elements))},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 b=window.lazyLoadOptions;return b&&function(e,t){if(t.length)for(var n,r=0;n=t[r];r+=1)s(e,n);else s(e,t)}(m,b),m});

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 uglify = require("gulp-uglify");
-
+var rollup = require("gulp-rollup");
 var destFolder = "./dist";
@@ -28,3 +27,3 @@
         .pipe(rename("lazyload.js"))
-        .pipe(gulp.dest(destFolder)) // --> writing babelized ES5
+        .pipe(gulp.dest(destFolder)) // --> writing babelized
         // ----------- minifying --------------
@@ -31,0 +30,0 @@ .pipe(uglify())

package.json

 {
   "name": "vanilla-lazyload",
-  "version": "10.3.4",
+  "version": "10.3.5",
   "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",
@@ -9,2 +9,3 @@ "main": "dist/lazyload.min.js",
     "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-preset-env": "^1.6.0",
     "babel-preset-es2015": "^6.24.1",
@@ -11,0 +12,0 @@ "gulp": "^3.9.1",

README.md

@@ -49,12 +49,8 @@ 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 featuring the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API), 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).
 If you prefer to install LazyLoad locally in your project, you can either:
-- **download it** from the [`dist` folder](https://github.com/verlok/lazyload/tree/master/dist)
+- [download it from the `dist` folder](https://github.com/verlok/lazyload/tree/master/dist)
   The file you typically want to use is `lazyload.min.js`
   If you prefer the ES2015 version, use `lazyload.es2015.js`
-- **install it with npm**
-  Recommended version `npm install vanilla-lazyload@8.2.0`   
-  Latest version `npm install vanilla-lazyload`
-- **install it with bower**
-  Recommended version `bower install vanilla-lazyload#8.2.0`
-  Latest version `bower install vanilla-lazyload`
-  
+- install it with `npm install --save vanilla-lazyload`
+- install it with `bower install vanilla-lazyload`
+
 ### Async script
@@ -61,0 +57,0 @@

src/lazyload.setSources.js

@@ -5,3 +5,3 @@ import {getData} from "./lazyload.data";
     const {data_srcset: dataSrcSet} = settings;
-    const parent = element.parentElement;
+    const parent = element.parentNode;
     if (parent.tagName !== "PICTURE") {
@@ -8,0 +8,0 @@ return;

No alert changes

Improved metrics

Total package byte prevSize

892921

increased by0.09%

Lines of code

969

increased by0.31%

Worsened metrics

Dev dependency count

11

increased by10%

Number of lines in readme file

520

decreased by-0.76%

No dependency changes