vanilla-lazyload - npm Package Compare versions

Comparing version 10.5.0 to 10.5.1

CHANGELOG.md

@@ -5,2 +5,6 @@ # CHANGELOG
 
+#### 10.5.1
+
+Just a refactoring over previous version.
+
 #### 10.5.0
@@ -84,2 +88,8 @@
 
+#### 8.7.0
+
+Added node support by merging pull request #188, "node-support" by @klarstrup.
+
+With these changes in place, simply importing vanilla-lazyload without using it won't crash Node by itself. This is important for isomorphic/universal/server rendered setups where the same code runs on both the server and the browser.
+
 #### 8.6.0
@@ -86,0 +96,0 @@

dist/lazyload.es2015.js

@@ -7,17 +7,21 @@ (function (global, factory) {
 
-var getDefaultSettings = () => ({
-    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
-});
+var getInstanceSettings = (customSettings) => {
+    const defaultSettings = {
+        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 Object.assign({}, defaultSettings, customSettings);
+};
+
 const dataPrefix = "data-";
@@ -179,4 +183,8 @@
 
-const LazyLoad = function (instanceSettings, elements) {
-    this._settings = Object.assign({}, getDefaultSettings(), instanceSettings);
+/* entry.isIntersecting needs fallback because is null on some versions of MS Edge, and
+   entry.intersectionRatio is not enough alone because it could be 0 on some intersecting elements */
+const isIntersecting = (element) => element.isIntersecting || element.intersectionRatio > 0;
+
+const LazyLoad = function (customSettings, elements) {
+    this._settings = getInstanceSettings(customSettings);
     this._setObserver();
@@ -193,9 +201,11 @@ this.update(elements);
         const settings = this._settings;
-        const onIntersection = (entries) => {
-            entries.forEach((entry) => {
-                // entry.isIntersecting is null on some versions of MS Edge
-                // entry.intersectionRatio can be 0 on some intersecting elements
-                if (entry.isIntersecting || entry.intersectionRatio > 0) {
+        const observerSettings = {
+            root: settings.container === document ? null : settings.container,
+            rootMargin: settings.threshold + "px"
+        };
+        const revealIntersectingElements = (entries) => {
+            entries.forEach(entry => {
+                if (isIntersecting(entry)) {
                     let element = entry.target;
-                    revealElement(element, settings);
+                    revealElement(element, this._settings);
                     this._observer.unobserve(element);
@@ -206,6 +216,3 @@ }
         };
-        this._observer = new IntersectionObserver(onIntersection, {
-            root: settings.container === document ? null : settings.container,
-            rootMargin: settings.threshold + "px"
-        });
+        this._observer = new IntersectionObserver(revealIntersectingElements, observerSettings);
     },
@@ -212,0 +219,0 @@

dist/lazyload.js

@@ -10,4 +10,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; };
 
-    var getDefaultSettings = function getDefaultSettings() {
-        return {
+    var getInstanceSettings = function getInstanceSettings(customSettings) {
+        var defaultSettings = {
             elements_selector: "img",
@@ -26,2 +26,4 @@ container: document,
         };
+
+        return _extends({}, defaultSettings, customSettings);
     };
@@ -187,4 +189,10 @@
 
-    var LazyLoad = function LazyLoad(instanceSettings, elements) {
-        this._settings = _extends({}, getDefaultSettings(), instanceSettings);
+    /* entry.isIntersecting needs fallback because is null on some versions of MS Edge, and
+       entry.intersectionRatio is not enough alone because it could be 0 on some intersecting elements */
+    var isIntersecting = function isIntersecting(element) {
+        return element.isIntersecting || element.intersectionRatio > 0;
+    };
+
+    var LazyLoad = function LazyLoad(customSettings, elements) {
+        this._settings = getInstanceSettings(customSettings);
         this._setObserver();
@@ -203,9 +211,11 @@ this.update(elements);
             var settings = this._settings;
-            var onIntersection = function onIntersection(entries) {
+            var observerSettings = {
+                root: settings.container === document ? null : settings.container,
+                rootMargin: settings.threshold + "px"
+            };
+            var revealIntersectingElements = function revealIntersectingElements(entries) {
                 entries.forEach(function (entry) {
-                    // entry.isIntersecting is null on some versions of MS Edge
-                    // entry.intersectionRatio can be 0 on some intersecting elements
-                    if (entry.isIntersecting || entry.intersectionRatio > 0) {
+                    if (isIntersecting(entry)) {
                         var element = entry.target;
-                        revealElement(element, settings);
+                        revealElement(element, _this._settings);
                         _this._observer.unobserve(element);
@@ -216,6 +226,3 @@ }
             };
-            this._observer = new IntersectionObserver(onIntersection, {
-                root: settings.container === document ? null : settings.container,
-                rootMargin: settings.threshold + "px"
-            });
+            this._observer = new IntersectionObserver(revealIntersectingElements, observerSettings);
         },
@@ -222,0 +229,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 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(){return{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}},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="undefined"!=typeof window,c=i&&"IntersectionObserver"in window,l=i&&"classList"in document.createElement("p"),u=function(e,t){l?e.classList.add(t):e.className+=(e.className?" ":"")+t},d=function(e,t){l?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},f=function(e,t){e&&e(t)},_=function(e,t,n){e.removeEventListener("load",t),e.removeEventListener("error",n)},v=function(e,t){var n=function n(s){m(s,!0,t),_(e,n,r)},r=function r(s){m(s,!1,t),_(e,n,r)};e.addEventListener("load",n),e.addEventListener("error",r)},m=function(e,t,n){var r=e.target;d(r,n.class_loading),u(r,t?n.class_loaded:n.class_error),f(t?n.callback_load:n.callback_error,r)},b=function(e,t){f(t.callback_enter,e),["IMG","IFRAME"].indexOf(e.tagName)>-1&&(v(e,t),u(e,t.class_loading)),a(e,t),n(e,"was-processed",!0),f(t.callback_set,e)},p=function(t,n){this._settings=_extends({},e(),t),this._setObserver(),this.update(n)};p.prototype={_setObserver:function(){var e=this;if(c){var t=this._settings;this._observer=new IntersectionObserver(function(n){n.forEach(function(n){if(n.isIntersecting||n.intersectionRatio>0){var r=n.target;b(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){b(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 h=window.lazyLoadOptions;return i&&h&&function(e,t){if(t.length)for(var n,r=0;n=t[r];r+=1)s(e,n);else s(e,t)}(p,h),p});
+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){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="undefined"!=typeof window,c=i&&"IntersectionObserver"in window,l=i&&"classList"in document.createElement("p"),u=function(e,t){l?e.classList.add(t):e.className+=(e.className?" ":"")+t},d=function(e,t){l?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},f=function(e,t){e&&e(t)},_=function(e,t,n){e.removeEventListener("load",t),e.removeEventListener("error",n)},v=function(e,t){var n=function n(s){m(s,!0,t),_(e,n,r)},r=function r(s){m(s,!1,t),_(e,n,r)};e.addEventListener("load",n),e.addEventListener("error",r)},m=function(e,t,n){var r=e.target;d(r,n.class_loading),u(r,t?n.class_loaded:n.class_error),f(t?n.callback_load:n.callback_error,r)},b=function(e,t){f(t.callback_enter,e),["IMG","IFRAME"].indexOf(e.tagName)>-1&&(v(e,t),u(e,t.class_loading)),a(e,t),n(e,"was-processed",!0),f(t.callback_set,e)},p=function(e){return e.isIntersecting||e.intersectionRatio>0},h=function(t,n){this._settings=e(t),this._setObserver(),this.update(n)};h.prototype={_setObserver:function(){var e=this;if(c){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;b(n,e._settings),e._observer.unobserve(n)}}),e._elements=r(e._elements)},n)}},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){b(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 y=window.lazyLoadOptions;return i&&y&&function(e,t){if(t.length)for(var n,r=0;n=t[r];r+=1)s(e,n);else s(e,t)}(h,y),h});

package.json

 {
   "name": "vanilla-lazyload",
-  "version": "10.5.0",
+  "version": "10.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",
@@ -5,0 +5,0 @@ "main": "dist/lazyload.min.js",

README.md

@@ -17,3 +17,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 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).
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.6.0/lazyload.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.7.0/lazyload.min.js"></script>
 ```
@@ -26,3 +26,3 @@
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.5.0/lazyload.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.5.1/lazyload.min.js"></script>
 ```
@@ -39,3 +39,3 @@
 	var s = d.createElement("script"); s.async = true;
-	var v = !("IntersectionObserver" in w) ? "8.6.0" : "10.5.0";
+	var v = !("IntersectionObserver" in w) ? "8.7.0" : "10.5.1";
 	s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
@@ -56,6 +56,6 @@ w.lazyLoadOptions = {}; // Your options here. See "recipes" for more information about async.
 - **install it with npm**
-  Recommended version `npm install vanilla-lazyload@8.6.0`   
+  Recommended version `npm install vanilla-lazyload@8.7.0`   
   Latest version `npm install vanilla-lazyload`
 - **install it with bower**
-  Recommended version `bower install vanilla-lazyload#8.6.0`
+  Recommended version `bower install vanilla-lazyload#8.7.0`
   Latest version `bower install vanilla-lazyload`
@@ -62,0 +62,0 @@

src/lazyload.defaults.js

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

src/lazyload.js

@@ -1,9 +0,10 @@
-import getDefaultSettings from "./lazyload.defaults";
+import getInstanceSettings from "./lazyload.defaults";
 import purgeElements from "./lazyload.purge";
 import autoInitialize from "./lazyload.autoInitialize";
 import revealElement from "./lazyload.reveal";
+import {intersectionObserverSupport, isIntersecting} from "./lazyload.intersectionObserver";
 import {runningOnBrowser, supportsIntersectionObserver} from "./lazyload.environment";
 
-const LazyLoad = function (instanceSettings, elements) {
-    this._settings = Object.assign({}, getDefaultSettings(), instanceSettings);
+const LazyLoad = function (customSettings, elements) {
+    this._settings = getInstanceSettings(customSettings);
     this._setObserver();
@@ -20,9 +21,11 @@ this.update(elements);
         const settings = this._settings;
-        const onIntersection = (entries) => {
-            entries.forEach((entry) => {
-                // entry.isIntersecting is null on some versions of MS Edge
-                // entry.intersectionRatio can be 0 on some intersecting elements
-                if (entry.isIntersecting || entry.intersectionRatio > 0) {
+        const observerSettings = {
+            root: settings.container === document ? null : settings.container,
+            rootMargin: settings.threshold + "px"
+        };
+        const revealIntersectingElements = (entries) => {
+            entries.forEach(entry => {
+                if (isIntersecting(entry)) {
                     let element = entry.target;
-                    revealElement(element, settings);
+                    revealElement(element, this._settings);
                     this._observer.unobserve(element);
@@ -33,6 +36,3 @@ }
         };
-        this._observer = new IntersectionObserver(onIntersection, {
-            root: settings.container === document ? null : settings.container,
-            rootMargin: settings.threshold + "px"
-        });
+        this._observer = new IntersectionObserver(revealIntersectingElements, observerSettings);
     },
@@ -39,0 +39,0 @@

No alert changes

Improved metrics

Total package byte prevSize

898076

increased by0.17%

Number of package files

133

increased by0.76%

Lines of code

1004

increased by1.62%

No dependency changes