lozad - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0

dist/lozad.js

@@ -1,2 +0,2 @@
-/*! lozad.js - v1.5.0 - 2018-07-16
+/*! lozad.js - v1.6.0 - 2018-07-24
 * https://github.com/ApoorvSaxena/lozad.js
@@ -19,3 +19,3 @@ * Copyright (c) 2018 Apoorv Saxena; Licensed MIT */
  */
-var isIE = document.documentMode;
+var isIE = typeof document !== 'undefined' && document.documentMode;
 
@@ -45,2 +45,5 @@ var defaultConfig = {
     }
+    if (element.getAttribute('data-toggle-class')) {
+      element.classList.toggle(element.getAttribute('data-toggle-class'));
+    }
   },
@@ -47,0 +50,0 @@ loaded: function loaded() {}

dist/lozad.min.js

@@ -1,4 +0,4 @@
-/*! lozad.js - v1.5.0 - 2018-07-16
+/*! lozad.js - v1.6.0 - 2018-07-24
 * https://github.com/ApoorvSaxena/lozad.js
 * Copyright (c) 2018 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";function t(t){t.setAttribute("data-loaded",!0)}var e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t},r=document.documentMode,n={rootMargin:"0px",threshold:0,load:function(t){if("picture"===t.nodeName.toLowerCase()){var e=document.createElement("img");r&&t.getAttribute("data-iesrc")&&(e.src=t.getAttribute("data-iesrc")),t.getAttribute("data-alt")&&(e.alt=t.getAttribute("data-alt")),t.appendChild(e)}t.getAttribute("data-src")&&(t.src=t.getAttribute("data-src")),t.getAttribute("data-srcset")&&(t.srcset=t.getAttribute("data-srcset")),t.getAttribute("data-background-image")&&(t.style.backgroundImage="url('"+t.getAttribute("data-background-image")+"')")},loaded:function(){}},o=function(t){return"true"===t.getAttribute("data-loaded")},a=function(e,r){return function(n,a){n.forEach(function(n){n.intersectionRatio>0&&(a.unobserve(n.target),o(n.target)||(e(n.target),t(n.target),r(n.target)))})}},i=function(t){return t instanceof Element?[t]:t instanceof NodeList?t:document.querySelectorAll(t)};return function(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:".lozad",d=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},u=e({},n,d),c=u.rootMargin,s=u.threshold,g=u.load,l=u.loaded,f=void 0;return window.IntersectionObserver&&(f=new IntersectionObserver(a(g,l),{rootMargin:c,threshold:s})),{observe:function(){for(var e=i(r),n=0;n<e.length;n++)o(e[n])||(f?f.observe(e[n]):(g(e[n]),t(e[n]),l(e[n])))},triggerLoad:function(e){o(e)||(g(e),t(e),l(e))}}}});
+!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";function t(t){t.setAttribute("data-loaded",!0)}var e=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},r="undefined"!=typeof document&&document.documentMode,o={rootMargin:"0px",threshold:0,load:function(t){if("picture"===t.nodeName.toLowerCase()){var e=document.createElement("img");r&&t.getAttribute("data-iesrc")&&(e.src=t.getAttribute("data-iesrc")),t.getAttribute("data-alt")&&(e.alt=t.getAttribute("data-alt")),t.appendChild(e)}t.getAttribute("data-src")&&(t.src=t.getAttribute("data-src")),t.getAttribute("data-srcset")&&(t.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(){}},n=function(t){return"true"===t.getAttribute("data-loaded")},a=function(e,r){return function(o,a){o.forEach(function(o){o.intersectionRatio>0&&(a.unobserve(o.target),n(o.target)||(e(o.target),t(o.target),r(o.target)))})}},i=function(t){return t instanceof Element?[t]:t instanceof NodeList?t:document.querySelectorAll(t)};return function(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:".lozad",d=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},u=e({},o,d),c=u.rootMargin,s=u.threshold,g=u.load,l=u.loaded,f=void 0;return window.IntersectionObserver&&(f=new IntersectionObserver(a(g,l),{rootMargin:c,threshold:s})),{observe:function(){for(var e=i(r),o=0;o<e.length;o++)n(e[o])||(f?f.observe(e[o]):(g(e[o]),t(e[o]),l(e[o])))},triggerLoad:function(e){n(e)||(g(e),t(e),l(e))}}}});

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.5.0",
+  "version": "1.6.0",
   "homepage": "https://github.com/ApoorvSaxena/lozad.js",
@@ -8,0 +8,0 @@ "scripts": {

README.md

@@ -169,5 +169,7 @@ # 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)
 
+> `data-alt` attribute can be added to picture tag for use in `alt` attribute of lazy-loaded images
+
 ```html
 <!-- For an element to be caught, add a block type that is different from the inline and some min-height for correct caught into view -->
-<picture class="lozad" style="display: block; min-height: 1rem" data-iesrc="images/thumbs/04.jpg">
+<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)">
@@ -178,3 +180,3 @@ <source srcset="images/thumbs/05.jpg" media="(min-width: 980px)">
     <!-- instead of img element, there will be the last source with the minimum dimensions -->
-    <!-- for disabled JS you can set <noscript><img src="images/thumbs/04.jpg"></noscript> -->
+    <!-- for disabled JS you can set <noscript><img src="images/thumbs/04.jpg" alt=""></noscript> -->
 </picture>
@@ -193,2 +195,11 @@ ```
 
+## Example toggling class
+
+```html
+<div data-toggle-class="active" class="lozad">
+    <!-- content -->
+</div>
+```
+The `active` class will be toggled on the element when it enters the browser’s viewport.
+
 ## Browser Support
@@ -195,0 +206,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

19038

increased by3.36%

Lines of code

127

increased by3.25%

Number of lines in readme file

261

increased by4.4%

No dependency changes