lozad - npm Package Compare versions

Comparing version 1.9.0 to 1.14.0

dist/lozad.es.js

@@ -1,2 +0,2 @@
-/*! lozad.js - v1.9.0 - 2019-02-09
+/*! lozad.js - v1.14.0 - 2019-10-19
 * https://github.com/ApoorvSaxena/lozad.js
@@ -22,7 +22,10 @@ * Copyright (c) 2019 Apoorv Saxena; Licensed MIT */
       }
+
       if (element.getAttribute('data-alt')) {
         img.alt = element.getAttribute('data-alt');
       }
-      element.appendChild(img);
+
+      element.append(img);
     }
+
     if (element.nodeName.toLowerCase() === 'video' && !element.getAttribute('data-src')) {
@@ -38,14 +41,28 @@ if (element.children) {
         }
+
         element.load();
       }
     }
+
     if (element.getAttribute('data-src')) {
       element.src = element.getAttribute('data-src');
     }
+
     if (element.getAttribute('data-srcset')) {
       element.setAttribute('srcset', element.getAttribute('data-srcset'));
     }
+
     if (element.getAttribute('data-background-image')) {
-      element.style.backgroundImage = `url('${element.getAttribute('data-background-image')}')`;
+      element.style.backgroundImage = `url('${element.getAttribute('data-background-image').split(',').join('\'),url(\'')}')`;
+    } else if (element.getAttribute('data-background-image-set')) {
+      const imageSetLinks = element.getAttribute('data-background-image-set').split(',');
+      let firstUrlLink = (imageSetLinks[0].substr(0, imageSetLinks[0].indexOf(' ')) || imageSetLinks[0]); // Substring before ... 1x
+      firstUrlLink = firstUrlLink.indexOf('url(') === -1 ? `url(${firstUrlLink})` : firstUrlLink;
+      if (imageSetLinks.length === 1) {
+        element.style.backgroundImage = firstUrlLink;
+      } else {
+        element.setAttribute('style', (element.getAttribute('style') || '') + `background-image: ${firstUrlLink}; background-image: -webkit-image-set(${imageSetLinks}); background-image: image-set(${imageSetLinks})`);
+      }
     }
+
     if (element.getAttribute('data-toggle-class')) {
@@ -82,5 +99,7 @@ element.classList.toggle(element.getAttribute('data-toggle-class'));
   }
+
   if (selector instanceof NodeList) {
     return selector
   }
+
   return root.querySelectorAll(selector)
@@ -90,6 +109,6 @@ };
 function lozad (selector = '.lozad', options = {}) {
-  const {root, rootMargin, threshold, load, loaded} = {...defaultConfig, ...options};
+  const {root, rootMargin, threshold, load, loaded} = Object.assign({}, defaultConfig, options);
   let observer;
 
-  if (window.IntersectionObserver) {
+  if (typeof window !== 'undefined' && window.IntersectionObserver) {
     observer = new IntersectionObserver(onIntersection(load, loaded), {
@@ -110,2 +129,3 @@ root,
         }
+
         if (observer) {
@@ -115,2 +135,3 @@ observer.observe(elements[i]);
         }
+
         load(elements[i]);
@@ -117,0 +138,0 @@ markAsLoaded(elements[i]);

dist/lozad.js

@@ -1,2 +0,2 @@
-/*! lozad.js - v1.9.0 - 2019-02-09
+/*! lozad.js - v1.14.0 - 2019-10-19
 * https://github.com/ApoorvSaxena/lozad.js
@@ -9,7 +9,5 @@ * Copyright (c) 2019 Apoorv Saxena; Licensed MIT */
   typeof define === 'function' && define.amd ? define(factory) :
-  (global.lozad = factory());
-}(this, (function () { 'use strict';
+  (global = global || self, global.lozad = factory());
+}(this, function () { 'use strict';
 
-  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; };
-
   /**
@@ -31,7 +29,10 @@ * Detect IE browser
         }
+
         if (element.getAttribute('data-alt')) {
           img.alt = element.getAttribute('data-alt');
         }
-        element.appendChild(img);
+
+        element.append(img);
       }
+
       if (element.nodeName.toLowerCase() === 'video' && !element.getAttribute('data-src')) {
@@ -47,14 +48,28 @@ if (element.children) {
           }
+
           element.load();
         }
       }
+
       if (element.getAttribute('data-src')) {
         element.src = element.getAttribute('data-src');
       }
+
       if (element.getAttribute('data-srcset')) {
         element.setAttribute('srcset', element.getAttribute('data-srcset'));
       }
+
       if (element.getAttribute('data-background-image')) {
-        element.style.backgroundImage = 'url(\'' + element.getAttribute('data-background-image') + '\')';
+        element.style.backgroundImage = 'url(\'' + element.getAttribute('data-background-image').split(',').join('\'),url(\'') + '\')';
+      } else if (element.getAttribute('data-background-image-set')) {
+        var imageSetLinks = element.getAttribute('data-background-image-set').split(',');
+        var firstUrlLink = imageSetLinks[0].substr(0, imageSetLinks[0].indexOf(' ')) || imageSetLinks[0]; // Substring before ... 1x
+        firstUrlLink = firstUrlLink.indexOf('url(') === -1 ? 'url(' + firstUrlLink + ')' : firstUrlLink;
+        if (imageSetLinks.length === 1) {
+          element.style.backgroundImage = firstUrlLink;
+        } else {
+          element.setAttribute('style', (element.getAttribute('style') || '') + ('background-image: ' + firstUrlLink + '; background-image: -webkit-image-set(' + imageSetLinks + '); background-image: image-set(' + imageSetLinks + ')'));
+        }
       }
+
       if (element.getAttribute('data-toggle-class')) {
@@ -97,5 +112,7 @@ element.classList.toggle(element.getAttribute('data-toggle-class'));
     }
+
     if (selector instanceof NodeList) {
       return selector;
     }
+
     return root.querySelectorAll(selector);
@@ -108,12 +125,12 @@ };
 
-    var _defaultConfig$option = _extends({}, defaultConfig, options),
-        root = _defaultConfig$option.root,
-        rootMargin = _defaultConfig$option.rootMargin,
-        threshold = _defaultConfig$option.threshold,
-        load = _defaultConfig$option.load,
-        loaded = _defaultConfig$option.loaded;
+    var _Object$assign = Object.assign({}, defaultConfig, options),
+        root = _Object$assign.root,
+        rootMargin = _Object$assign.rootMargin,
+        threshold = _Object$assign.threshold,
+        load = _Object$assign.load,
+        loaded = _Object$assign.loaded;
 
     var observer = void 0;
 
-    if (window.IntersectionObserver) {
+    if (typeof window !== 'undefined' && window.IntersectionObserver) {
       observer = new IntersectionObserver(onIntersection(load, loaded), {
@@ -134,2 +151,3 @@ root: root,
           }
+
           if (observer) {
@@ -139,2 +157,3 @@ observer.observe(elements[i]);
           }
+
           load(elements[i]);
@@ -161,2 +180,2 @@ markAsLoaded(elements[i]);
 
-})));
+}));

dist/lozad.min.js

@@ -1,5 +0,5 @@
-/*! lozad.js - v1.9.0 - 2019-02-09
+/*! lozad.js - v1.14.0 - 2019-10-19
 * https://github.com/ApoorvSaxena/lozad.js
 * Copyright (c) 2019 Apoorv Saxena; Licensed MIT */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.lozad=e()}(this,function(){"use strict";var g=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t},n="undefined"!=typeof document&&document.documentMode,l={rootMargin:"0px",threshold:0,load:function(t){if("picture"===t.nodeName.toLowerCase()){var e=document.createElement("img");n&&t.getAttribute("data-iesrc")&&(e.src=t.getAttribute("data-iesrc")),t.getAttribute("data-alt")&&(e.alt=t.getAttribute("data-alt")),t.appendChild(e)}if("video"===t.nodeName.toLowerCase()&&!t.getAttribute("data-src")&&t.children){for(var r=t.children,o=void 0,a=0;a<=r.length-1;a++)(o=r[a].getAttribute("data-src"))&&(r[a].src=o);t.load()}t.getAttribute("data-src")&&(t.src=t.getAttribute("data-src")),t.getAttribute("data-srcset")&&t.setAttribute("srcset",t.getAttribute("data-srcset")),t.getAttribute("data-background-image")&&(t.style.backgroundImage="url('"+t.getAttribute("data-background-image")+"')"),t.getAttribute("data-toggle-class")&&t.classList.toggle(t.getAttribute("data-toggle-class"))},loaded:function(){}};
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).lozad=e()}(this,function(){"use strict";
 /**
@@ -9,2 +9,3 @@ * Detect IE browser
    * @private
-   */function f(t){t.setAttribute("data-loaded",!0)}var b=function(t){return"true"===t.getAttribute("data-loaded")};return function(){var r,o,a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:".lozad",t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},e=g({},l,t),n=e.root,i=e.rootMargin,d=e.threshold,c=e.load,u=e.loaded,s=void 0;return window.IntersectionObserver&&(s=new IntersectionObserver((r=c,o=u,function(t,e){t.forEach(function(t){(0<t.intersectionRatio||t.isIntersecting)&&(e.unobserve(t.target),b(t.target)||(r(t.target),f(t.target),o(t.target)))})}),{root:n,rootMargin:i,threshold:d})),{observe:function(){for(var t=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:document;return t instanceof Element?[t]:t instanceof NodeList?t:e.querySelectorAll(t)}(a,n),e=0;e<t.length;e++)b(t[e])||(s?s.observe(t[e]):(c(t[e]),f(t[e]),u(t[e])))},triggerLoad:function(t){b(t)||(c(t),f(t),u(t))},observer:s}}});
+   */var d="undefined"!=typeof document&&document.documentMode,c={rootMargin:"0px",threshold:0,load:function(t){if("picture"===t.nodeName.toLowerCase()){var e=document.createElement("img");d&&t.getAttribute("data-iesrc")&&(e.src=t.getAttribute("data-iesrc")),t.getAttribute("data-alt")&&(e.alt=t.getAttribute("data-alt")),t.append(e)}if("video"===t.nodeName.toLowerCase()&&!t.getAttribute("data-src")&&t.children){for(var r=t.children,a=void 0,o=0;o<=r.length-1;o++)(a=r[o].getAttribute("data-src"))&&(r[o].src=a);t.load()}if(t.getAttribute("data-src")&&(t.src=t.getAttribute("data-src")),t.getAttribute("data-srcset")&&t.setAttribute("srcset",t.getAttribute("data-srcset")),t.getAttribute("data-background-image"))t.style.backgroundImage="url('"+t.getAttribute("data-background-image").split(",").join("'),url('")+"')";else if(t.getAttribute("data-background-image-set")){var i=t.getAttribute("data-background-image-set").split(","),n=i[0].substr(0,i[0].indexOf(" "))||i[0];// Substring before ... 1x
+n=-1===n.indexOf("url(")?"url("+n+")":n,1===i.length?t.style.backgroundImage=n:t.setAttribute("style",(t.getAttribute("style")||"")+"background-image: "+n+"; background-image: -webkit-image-set("+i+"); background-image: image-set("+i+")")}t.getAttribute("data-toggle-class")&&t.classList.toggle(t.getAttribute("data-toggle-class"))},loaded:function(){}};function l(t){t.setAttribute("data-loaded",!0)}var b=function(t){return"true"===t.getAttribute("data-loaded")};return function(){var r,a,o=0<arguments.length&&void 0!==arguments[0]?arguments[0]:".lozad",t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},e=Object.assign({},c,t),i=e.root,n=e.rootMargin,d=e.threshold,u=e.load,s=e.loaded,g=void 0;return"undefined"!=typeof window&&window.IntersectionObserver&&(g=new IntersectionObserver((r=u,a=s,function(t,e){t.forEach(function(t){(0<t.intersectionRatio||t.isIntersecting)&&(e.unobserve(t.target),b(t.target)||(r(t.target),l(t.target),a(t.target)))})}),{root:i,rootMargin:n,threshold:d})),{observe:function(){for(var t=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:document;return t instanceof Element?[t]:t instanceof NodeList?t:e.querySelectorAll(t)}(o,i),e=0;e<t.length;e++)b(t[e])||(g?g.observe(t[e]):(u(t[e]),l(t[e]),s(t[e])))},triggerLoad:function(t){b(t)||(u(t),l(t),s(t))},observer:g}}});

package.json

@@ -5,4 +5,5 @@ {
   "description": "A light-weight JS library to lazy load any HTML element such as images, ads, videos etc.",
-  "version": "1.9.0",
+  "version": "1.14.0",
   "homepage": "https://github.com/ApoorvSaxena/lozad.js",
+  "license": "MIT",
   "scripts": {
@@ -59,5 +60,5 @@ "test": "nyc mocha",
     "babel-preset-stage-0": "^6.24.1",
-    "browser-sync": "^2.26.3",
-    "chokidar": "^1.7.0",
-    "cross-env": "^5.0.5",
+    "browser-sync": "^2.26.7",
+    "chokidar": "^3.1.1",
+    "cross-env": "^5.2.1",
     "husky": "^0.14.3",
@@ -67,11 +68,11 @@ "jsdom": "^11.2.0",
     "mocha": "^5.2.0",
-    "npm-run-all": "^4.1.1",
-    "nyc": "^11.2.1",
-    "prettier": "^1.6.1",
+    "npm-run-all": "^4.1.5",
+    "nyc": "^14.1.1",
+    "prettier": "^1.18.2",
     "rollup": "^0.63.5",
     "rollup-plugin-babel": "^3.0.2",
     "rollup-plugin-filesize": "^4.0.1",
-    "rollup-plugin-license": "^0.7.0",
+    "rollup-plugin-license": "^0.12.1",
     "rollup-plugin-uglify": "^4.0.0",
-    "xo": "^0.18.2"
+    "xo": "^0.24.0"
   },
@@ -84,4 +85,7 @@ "xo": {
     "semicolon": false,
-    "space": true
+    "space": true,
+    "rules": {
+      "unicorn/prefer-node-append": "off"
+    }
   }
 }

README.md

@@ -12,3 +12,3 @@ # Lozad.js [![npm version](https://badge.fury.io/js/lozad.svg)](https://badge.fury.io/js/lozad) [![Build Status](https://travis-ci.org/ApoorvSaxena/lozad.js.svg?branch=master)](https://travis-ci.org/ApoorvSaxena/lozad.js) [![](https://data.jsdelivr.com/v1/package/npm/lozad/badge)](https://www.jsdelivr.com/package/npm/lozad)
 - allows lazy loading of dynamically added elements as well,
-- supports <img>, <picture>, iframes, videos, audios, responsive images, background images etc.
+- supports <img>, <picture>, iframes, videos, audios, responsive images, background images and multiple background images etc.
 - is completely free and open source.
@@ -27,2 +27,8 @@
 
+## Brands using Lozad.js:
+![Tesla](./brands/tesla.png)          ![Domino's](./brands/dominos.png)          ![BBC](./brands/bbc.png)          ![JLM Couture](./brands/jlm-couture.png)          ![New Balance](./brands/new-balance.png)          ![Binance](./brands/binance.png)
+
+and many more...
+
+
 ## Table of Contents
@@ -162,2 +168,16 @@
 
+for use with multiple background images
+```html
+<!-- multiple background image example -->
+<div class="lozad" data-background-image="path/to/first/image,path/to/second/image,path/to/third/image">
+</div>
+```
+
+for use with responsive background images (image-set)
+```html
+<!-- responsive background image-set example -->
+<div class="lozad" data-background-image-set="url('photo.jpg') 1x, url('[e-mail]') 2x">
+</div>
+```
+
 If you want to load the images before they appear:
@@ -164,0 +184,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25082

increased by11.82%

Lines of code

282

increased by7.22%

Number of lines in readme file

251

increased by8.66%

No dependency changes