vanilla-lazyload - npm Package Compare versions

Comparing version 10.4.2 to 10.5.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # CHANGELOG
 
+#### 10.5.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.
+
 #### 10.4.2
@@ -78,2 +84,6 @@
 
+#### 8.6.0
+
+Added the callback_enter callback, which is called whenevery any element managed by LazyLoad enters the viewport, as requested in #159. Thanks to @alvarotrigo.
+
 #### 8.5.2
@@ -144,4 +154,54 @@
 
+## Version 6
+
+#### 6.3.x
+
+Added the class initial to all images (or iframes) inside the viewport at the moment of script initialization
+
+#### 6.2.x
+
+* Added the ability to load LazyLoad using an async script
+
+#### 6.1.x
+
+SEO improvements for lazily loaded images
+
+#### 6.0.x
+
+* Source code migrated to ES6 / ES2015
+* Serving both minified ES6 version and minified transpiled-to-ES5 version
+
+## Version 5
+
+* Exposed private functions for test coverage
+* Test coverage
+
+## Version 4
+
+* Lighter constructor
+* Performance improvements
+* Bugfix: null on background images
+* Removed code for legacy browsers - now supporting IE10+
+
+## Version 3
+
+* Added support to the picture tag
+* Removed the "show image only when fully loaded" mode
+  * Dumped the show_while_loading and placeholder options
+
+## Version 2
+
+* Added support to lazily load iframes and background images
+* Added error management callback and error class option
+* Performance improvements
+
+## Version 1
+
+* Added support to the srcset attribute for images
+* Added typescript typings + updated dist folder files
+* Performance improvements
+* Stable release of LazyLoad
+
 ---
 
-_Wanna go back and back in time? Take a look at the [release history](https://github.com/verlok/lazyload/releases) on GitHub_!
+_Want more detail? Take a look at the [release history](https://github.com/verlok/lazyload/releases) on GitHub_!

dist/lazyload.es2015.js

@@ -7,3 +7,3 @@ (function (global, factory) {
 
-var defaultSettings = {
+var getDefaultSettings = () => ({
     elements_selector: "img",
@@ -21,3 +21,3 @@ container: document,
     callback_enter: null
-};
+});
 
@@ -113,4 +113,8 @@ const dataPrefix = "data-";
 
-const supportsClassList = "classList" in document.createElement("p");
+const runningOnBrowser = (typeof window !== "undefined");
 
+const supportsIntersectionObserver = runningOnBrowser && ("IntersectionObserver" in window);
+
+const supportsClassList = runningOnBrowser && ("classList" in document.createElement("p"));
+
 const addClass = (element, className) => {
@@ -178,3 +182,3 @@ if (supportsClassList) {
 const LazyLoad = function (instanceSettings, elements) {
-    this._settings = Object.assign({}, defaultSettings, instanceSettings);
+    this._settings = Object.assign({}, getDefaultSettings(), instanceSettings);
     this._setObserver();
@@ -186,3 +190,3 @@ this.update(elements);
     _setObserver: function () {
-        if (!("IntersectionObserver" in window)) {
+        if (!supportsIntersectionObserver) {
             return;
@@ -242,3 +246,3 @@ }
 let autoInitOptions = window.lazyLoadOptions;
-if (autoInitOptions) {
+if (runningOnBrowser && autoInitOptions) {
     autoInitialize(LazyLoad, autoInitOptions);
@@ -245,0 +249,0 @@ }

dist/lazyload.js

@@ -10,15 +10,17 @@ 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 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
+    var getDefaultSettings = function getDefaultSettings() {
+        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
+        };
     };
@@ -117,4 +119,8 @@
 
-    var supportsClassList = "classList" in document.createElement("p");
+    var runningOnBrowser = typeof window !== "undefined";
 
+    var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
+
+    var supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
+
     var addClass = function addClass(element, className) {
@@ -182,3 +188,3 @@ if (supportsClassList) {
     var LazyLoad = function LazyLoad(instanceSettings, elements) {
-        this._settings = _extends({}, defaultSettings, instanceSettings);
+        this._settings = _extends({}, getDefaultSettings(), instanceSettings);
         this._setObserver();
@@ -192,3 +198,3 @@ this.update(elements);
 
-            if (!("IntersectionObserver" in window)) {
+            if (!supportsIntersectionObserver) {
                 return;
@@ -252,3 +258,3 @@ }
     var autoInitOptions = window.lazyLoadOptions;
-    if (autoInitOptions) {
+    if (runningOnBrowser && autoInitOptions) {
         autoInitialize(LazyLoad, autoInitOptions);
@@ -255,0 +261,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={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="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){_(s,!0,t),d(e,n,r)},r=function r(s){_(s,!1,t),d(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){u(t.callback_enter,e),["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.isIntersecting||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=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});

package.json

 {
   "name": "vanilla-lazyload",
-  "version": "10.4.2",
+  "version": "10.5.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",
@@ -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.5.2/lazyload.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.6.0/lazyload.min.js"></script>
 ```
@@ -26,3 +26,3 @@
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.3.5/lazyload.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.5.0/lazyload.min.js"></script>
 ```
@@ -39,3 +39,3 @@
 	var s = d.createElement("script"); s.async = true;
-	var v = !("IntersectionObserver" in w) ? "8.5.2" : "10.3.5";
+	var v = !("IntersectionObserver" in w) ? "8.6.0" : "10.5.0";
 	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.2.0`   
+  Recommended version `npm install vanilla-lazyload@8.6.0`   
   Latest version `npm install vanilla-lazyload`
 - **install it with bower**
-  Recommended version `bower install vanilla-lazyload#8.2.0`
+  Recommended version `bower install vanilla-lazyload#8.6.0`
   Latest version `bower install vanilla-lazyload`
@@ -466,4 +466,4 @@
 ```css
-img["data-src"],
-img["data-srcset"] {
+img[data-src],
+img[data-srcset] {
   display: block;
@@ -491,5 +491,6 @@ min-height: 1px;
 | `class_error` | The class applied to the elements when the element causes an error | `"error"` |
+| `callback_enter` | A function to be called when the DOM element enters the viewport. | `null` |
+| `callback_set` | A function to be called after the src of an image is set in the DOM. | `null` |
 | `callback_load` | A function to be called when an element was loaded. | `null` |
 | `callback_error` | A function to be called when an element triggers an error. | `null` |
-| `callback_set` | A function to be called when the src of an image is set in the DOM. | `null` |
 
@@ -496,0 +497,0 @@ ### Methods

src/lazyload.class.js

@@ -1,2 +0,2 @@
-const supportsClassList = "classList" in document.createElement("p");
+import {supportsClassList} from "./lazyload.environment";
 
@@ -3,0 +3,0 @@ export const addClass = (element, className) => {

src/lazyload.defaults.js

@@ -1,2 +0,2 @@
-export default {
+export default () => ({
     elements_selector: "img",
@@ -14,2 +14,2 @@ container: document,
     callback_enter: null
-};
+});

src/lazyload.js

@@ -1,8 +0,9 @@
-import defaultSettings from "./lazyload.defaults";
+import getDefaultSettings from "./lazyload.defaults";
 import purgeElements from "./lazyload.purge";
 import autoInitialize from "./lazyload.autoInitialize";
 import revealElement from "./lazyload.reveal";
+import {runningOnBrowser, supportsIntersectionObserver} from "./lazyload.environment";
 
 const LazyLoad = function (instanceSettings, elements) {
-    this._settings = Object.assign({}, defaultSettings, instanceSettings);
+    this._settings = Object.assign({}, getDefaultSettings(), instanceSettings);
     this._setObserver();
@@ -14,3 +15,3 @@ this.update(elements);
     _setObserver: function () {
-        if (!("IntersectionObserver" in window)) {
+        if (!supportsIntersectionObserver) {
             return;
@@ -70,3 +71,3 @@ }
 let autoInitOptions = window.lazyLoadOptions;
-if (autoInitOptions) {
+if (runningOnBrowser && autoInitOptions) {
     autoInitialize(LazyLoad, autoInitOptions);
@@ -73,0 +74,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

896525

increased by0.23%

Lines of code

988

increased by0.92%

Number of lines in readme file

525

increased by0.19%

No dependency changes