lozad - npm Package Compare versions

Comparing version 1.15.0 to 1.16.0

dist/lozad.es.js

@@ -1,2 +0,2 @@
-/*! lozad.js - v1.15.0 - 2020-05-23
+/*! lozad.js - v1.16.0 - 2020-09-06
 * https://github.com/ApoorvSaxena/lozad.js
@@ -18,3 +18,10 @@ * Copyright (c) 2020 Apoorv Saxena; Licensed MIT */
     if (element.nodeName.toLowerCase() === 'picture') {
-      const img = document.createElement('img');
+      let img = element.querySelector('img');
+      let append = false;
+
+      if (img === null) {
+        img = document.createElement('img');
+        append = true;
+      }
+
       if (isIE && element.getAttribute('data-iesrc')) {
@@ -28,3 +35,5 @@ img.src = element.getAttribute('data-iesrc');
 
-      element.append(img);
+      if (append) {
+        element.append(img);
+      }
     }
@@ -88,2 +97,8 @@
 
+function preLoad(element) {
+  if (element.getAttribute('data-placeholder-background')) {
+    element.style.background = element.getAttribute('data-placeholder-background');
+  }
+}
+
 const isLoaded = element => element.getAttribute('data-loaded') === 'true';
@@ -129,2 +144,7 @@
 
+  const elements = getElements(selector, root);
+  for (let i = 0; i < elements.length; i++) {
+    preLoad(elements[i]);
+  }
+
   return {
@@ -131,0 +151,0 @@ observe() {

dist/lozad.js

@@ -1,2 +0,2 @@
-/*! lozad.js - v1.15.0 - 2020-05-23
+/*! lozad.js - v1.16.0 - 2020-09-06
 * https://github.com/ApoorvSaxena/lozad.js
@@ -24,3 +24,10 @@ * Copyright (c) 2020 Apoorv Saxena; Licensed MIT */
       if (element.nodeName.toLowerCase() === 'picture') {
-        var img = document.createElement('img');
+        var img = element.querySelector('img');
+        var append = false;
+
+        if (img === null) {
+          img = document.createElement('img');
+          append = true;
+        }
+
         if (isIE && element.getAttribute('data-iesrc')) {
@@ -34,3 +41,5 @@ img.src = element.getAttribute('data-iesrc');
 
-        element.append(img);
+        if (append) {
+          element.append(img);
+        }
       }
@@ -94,2 +103,8 @@
 
+  function preLoad(element) {
+    if (element.getAttribute('data-placeholder-background')) {
+      element.style.background = element.getAttribute('data-placeholder-background');
+    }
+  }
+
   var isLoaded = function isLoaded(element) {
@@ -150,2 +165,7 @@ return element.getAttribute('data-loaded') === 'true';
 
+    var elements = getElements(selector, root);
+    for (var i = 0; i < elements.length; i++) {
+      preLoad(elements[i]);
+    }
+
     return {
@@ -155,4 +175,4 @@ observe: function observe() {
 
-        for (var i = 0; i < elements.length; i++) {
-          if (isLoaded(elements[i])) {
+        for (var _i = 0; _i < elements.length; _i++) {
+          if (isLoaded(elements[_i])) {
             continue;
@@ -162,9 +182,9 @@ }
           if (observer) {
-            observer.observe(elements[i]);
+            observer.observe(elements[_i]);
             continue;
           }
 
-          load(elements[i]);
-          markAsLoaded(elements[i]);
-          loaded(elements[i]);
+          load(elements[_i]);
+          markAsLoaded(elements[_i]);
+          loaded(elements[_i]);
         }
@@ -171,0 +191,0 @@ },

dist/lozad.min.js

@@ -1,2 +0,2 @@
-/*! lozad.js - v1.15.0 - 2020-05-23
+/*! lozad.js - v1.16.0 - 2020-09-06
 * https://github.com/ApoorvSaxena/lozad.js
@@ -9,3 +9,3 @@ * Copyright (c) 2020 Apoorv Saxena; Licensed MIT */
    * @private
-   */var u="undefined"!=typeof document&&document.documentMode,c={rootMargin:"0px",threshold:0,load:function(t){if("picture"===t.nodeName.toLowerCase()){var e=document.createElement("img");u&&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,i=0;i<=r.length-1;i++)(a=r[i].getAttribute("data-src"))&&(r[i].src=a);t.load()}t.getAttribute("data-poster")&&(t.poster=t.getAttribute("data-poster")),t.getAttribute("data-src")&&(t.src=t.getAttribute("data-src")),t.getAttribute("data-srcset")&&t.setAttribute("srcset",t.getAttribute("data-srcset"));var o=",";if(t.getAttribute("data-background-delimiter")&&(o=t.getAttribute("data-background-delimiter")),t.getAttribute("data-background-image"))t.style.backgroundImage="url('"+t.getAttribute("data-background-image").split(o).join("'),url('")+"')";else if(t.getAttribute("data-background-image-set")){var n=t.getAttribute("data-background-image-set").split(o),d=n[0].substr(0,n[0].indexOf(" "))||n[0];// Substring before ... 1x
-d=-1===d.indexOf("url(")?"url("+d+")":d,1===n.length?t.style.backgroundImage=d:t.setAttribute("style",(t.getAttribute("style")||"")+"background-image: "+d+"; background-image: -webkit-image-set("+n+"); background-image: image-set("+n+")")}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,i=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),o=e.root,n=e.rootMargin,d=e.threshold,u=e.load,g=e.loaded,s=void 0;return"undefined"!=typeof window&&window.IntersectionObserver&&(s=new IntersectionObserver((r=u,a=g,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:o,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)}(i,o),e=0;e<t.length;e++)b(t[e])||(s?s.observe(t[e]):(u(t[e]),l(t[e]),g(t[e])))},triggerLoad:function(t){b(t)||(u(t),l(t),g(t))},observer:s}}});
+   */var g="undefined"!=typeof document&&document.documentMode,f={rootMargin:"0px",threshold:0,load:function(t){if("picture"===t.nodeName.toLowerCase()){var e=t.querySelector("img"),r=!1;null===e&&(e=document.createElement("img"),r=!0),g&&t.getAttribute("data-iesrc")&&(e.src=t.getAttribute("data-iesrc")),t.getAttribute("data-alt")&&(e.alt=t.getAttribute("data-alt")),r&&t.append(e)}if("video"===t.nodeName.toLowerCase()&&!t.getAttribute("data-src")&&t.children){for(var a=t.children,o=void 0,i=0;i<=a.length-1;i++)(o=a[i].getAttribute("data-src"))&&(a[i].src=o);t.load()}t.getAttribute("data-poster")&&(t.poster=t.getAttribute("data-poster")),t.getAttribute("data-src")&&(t.src=t.getAttribute("data-src")),t.getAttribute("data-srcset")&&t.setAttribute("srcset",t.getAttribute("data-srcset"));var n=",";if(t.getAttribute("data-background-delimiter")&&(n=t.getAttribute("data-background-delimiter")),t.getAttribute("data-background-image"))t.style.backgroundImage="url('"+t.getAttribute("data-background-image").split(n).join("'),url('")+"')";else if(t.getAttribute("data-background-image-set")){var d=t.getAttribute("data-background-image-set").split(n),u=d[0].substr(0,d[0].indexOf(" "))||d[0];// Substring before ... 1x
+u=-1===u.indexOf("url(")?"url("+u+")":u,1===d.length?t.style.backgroundImage=u:t.setAttribute("style",(t.getAttribute("style")||"")+"background-image: "+u+"; background-image: -webkit-image-set("+d+"); background-image: image-set("+d+")")}t.getAttribute("data-toggle-class")&&t.classList.toggle(t.getAttribute("data-toggle-class"))},loaded:function(){}};function A(t){t.setAttribute("data-loaded",!0)}var m=function(t){return"true"===t.getAttribute("data-loaded")},v=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)};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({},f,t),i=e.root,n=e.rootMargin,d=e.threshold,u=e.load,g=e.loaded,s=void 0;"undefined"!=typeof window&&window.IntersectionObserver&&(s=new IntersectionObserver((r=u,a=g,function(t,e){t.forEach(function(t){(0<t.intersectionRatio||t.isIntersecting)&&(e.unobserve(t.target),m(t.target)||(r(t.target),A(t.target),a(t.target)))})}),{root:i,rootMargin:n,threshold:d}));for(var c,l=v(o,i),b=0;b<l.length;b++)(c=l[b]).getAttribute("data-placeholder-background")&&(c.style.background=c.getAttribute("data-placeholder-background"));return{observe:function(){for(var t=v(o,i),e=0;e<t.length;e++)m(t[e])||(s?s.observe(t[e]):(u(t[e]),A(t[e]),g(t[e])))},triggerLoad:function(t){m(t)||(u(t),A(t),g(t))},observer:s}}});

package.json

@@ -5,3 +5,3 @@ {
   "description": "A light-weight JS library to lazy load any HTML element such as images, ads, videos etc.",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "homepage": "https://github.com/ApoorvSaxena/lozad.js",
@@ -8,0 +8,0 @@ "license": "MIT",

README.md

@@ -13,2 +13,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) [![npm](https://img.shields.io/npm/dm/lozad)](https://www.npmjs.com/package/lozad) [![](https://data.jsdelivr.com/v1/package/npm/lozad/badge)](https://www.jsdelivr.com/package/npm/lozad)
 - supports <img>, <picture>, iframes, videos, audios, responsive images, background images and multiple background images etc.
+- even supports LQIP (Low Quality Image Placeholder)
 - is completely free and open source.
@@ -30,3 +31,4 @@
 ![BNP Paribas](./brands/bnp-paribas.png)          ![Mi](./brands/xiaomi.png)         
-![Atlassian](./brands/atlassian.svg)    ![BNP Paribas](./brands/livemint.svg)
+![Amway](./brands/amway.png)          ![TATA](./brands/tata.png)          ![Verizon](./brands/verizon.svg)
+![Atlassian](./brands/atlassian.svg) ![BNP Paribas](./brands/livemint.svg)
 ![JLM Couture](./brands/jlm-couture.png)          ![New Balance](./brands/new-balance.png)          ![BBC](./brands/bbc.png)
@@ -207,2 +209,12 @@
 
+### Large image improvment
+
+Sometimes image loading takes a long time. For this case, you can add a placeholder background:
+
+```html
+<img class="lozad" data-placeholder-background="red" data-src="image.png" />
+```
+
+Lozad sets a placeholder background color of img element and users will see the fallback till the image loads.
+
 ## Example with picture tag
@@ -231,2 +243,14 @@
 
+If you want to use image placeholder (like low quality image placeholder), you can set a temporary `img` tag inside your `picture` tag. It will be removed when _lozad_ loads the picture element.
+
+```html
+<picture class="lozad" style="display: block; min-height: 1rem" data-iesrc="images/thumbs/04.jpg" data-alt="">
+    <source srcset="images/thumbs/04.jpg" media="(min-width: 1280px)">
+    <source srcset="images/thumbs/05.jpg" media="(min-width: 980px)">
+    <source srcset="images/thumbs/06.jpg" media="(min-width: 320px)">
+    <!-- you can define a low quality image placeholder that will be removed when the picture is loaded -->
+    <img src="data:image/jpeg;base64,/some_lqip_in_base_64==" />
+</picture>
+```
+
 ## Example with video
@@ -233,0 +257,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

29322

increased by8.98%

Lines of code

329

increased by10.77%

Number of lines in readme file

300

increased by8.7%

No dependency changes