vanilla-lazyload - npm Package Compare versions

Comparing version 7.2.2 to 8.0.0

dist/lazyload.js

@@ -0,6 +1,9 @@
+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 _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-    typeof define === 'function' && define.amd ? define(factory) :
-    (global.LazyLoad = factory());
-}(this, (function () { 'use strict';
+    (typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : global.LazyLoad = factory();
+})(this, function () {
+    'use strict';
 
@@ -25,52 +28,47 @@ var defaultSettings = {
 
-    const isBot = !("onscroll" in window) || /glebot/.test(navigator.userAgent);
+    var isBot = !("onscroll" in window) || /glebot/.test(navigator.userAgent);
 
-    const callCallback = function (callback, argument) {
-        if (callback) { callback(argument); }
+    var callCallback = function callCallback(callback, argument) {
+        if (callback) {
+            callback(argument);
+        }
     };
 
-    const getTopOffset = function (element) {
+    var getTopOffset = function getTopOffset(element) {
         return element.getBoundingClientRect().top + window.pageYOffset - element.ownerDocument.documentElement.clientTop;
     };
 
-    const isBelowViewport = function (element, container, threshold) {
-        const fold = (container === window) ?
-            window.innerHeight + window.pageYOffset :
-            getTopOffset(container) + container.offsetHeight;
+    var isBelowViewport = function isBelowViewport(element, container, threshold) {
+        var fold = container === window ? window.innerHeight + window.pageYOffset : getTopOffset(container) + container.offsetHeight;
         return fold <= getTopOffset(element) - threshold;
     };
 
-    const getLeftOffset = function (element) {
+    var getLeftOffset = function getLeftOffset(element) {
         return element.getBoundingClientRect().left + window.pageXOffset - element.ownerDocument.documentElement.clientLeft;
     };
 
-    const isAtRightOfViewport = function (element, container, threshold) {
-        const documentWidth = window.innerWidth;
-        const fold = (container === window) ?
-            documentWidth + window.pageXOffset :
-            getLeftOffset(container) + documentWidth;
+    var isAtRightOfViewport = function isAtRightOfViewport(element, container, threshold) {
+        var documentWidth = window.innerWidth;
+        var fold = container === window ? documentWidth + window.pageXOffset : getLeftOffset(container) + documentWidth;
         return fold <= getLeftOffset(element) - threshold;
     };
 
-    const isAboveViewport = function (element, container, threshold) {
-        const fold = (container === window) ? window.pageYOffset : getTopOffset(container);
+    var isAboveViewport = function isAboveViewport(element, container, threshold) {
+        var fold = container === window ? window.pageYOffset : getTopOffset(container);
         return fold >= getTopOffset(element) + threshold + element.offsetHeight;
     };
 
-    const isAtLeftOfViewport = function (element, container, threshold) {
-        const fold = (container === window) ? window.pageXOffset : getLeftOffset(container);
+    var isAtLeftOfViewport = function isAtLeftOfViewport(element, container, threshold) {
+        var fold = container === window ? window.pageXOffset : getLeftOffset(container);
         return fold >= getLeftOffset(element) + threshold + element.offsetWidth;
     };
 
-    var isInsideViewport = function (element, container, threshold) {
-        return !isBelowViewport(element, container, threshold) &&
-            !isAboveViewport(element, container, threshold) &&
-            !isAtRightOfViewport(element, container, threshold) &&
-            !isAtLeftOfViewport(element, container, threshold);
+    var isInsideViewport = function isInsideViewport(element, container, threshold) {
+        return !isBelowViewport(element, container, threshold) && !isAboveViewport(element, container, threshold) && !isAtRightOfViewport(element, container, threshold) && !isAtLeftOfViewport(element, container, threshold);
     };
 
     /* Creates instance and notifies it through the window element */
-    const createInstance = function (classObj, options) { 
-        let instance = new classObj(options);
-        let event = new CustomEvent("LazyLoad::Initialized", { detail: { instance } });
+    var createInstance = function createInstance(classObj, options) {
+        var instance = new classObj(options);
+        var event = new CustomEvent("LazyLoad::Initialized", { detail: { instance: instance } });
         window.dispatchEvent(event);
@@ -81,11 +79,10 @@ };
         options passed in (plain object or an array) */
-    var autoInitialize = function (classObj, options) { 
-        let optsLength = options.length;
+    var autoInitialize = function autoInitialize(classObj, options) {
+        var optsLength = options.length;
         if (!optsLength) {
             // Plain object
             createInstance(classObj, options);
-        }
-        else {
+        } else {
             // Array of objects
-            for (let i = 0; i < optsLength; i++) {
+            for (var i = 0; i < optsLength; i++) {
                 createInstance(classObj, options[i]);
@@ -96,11 +93,11 @@ }
 
-    const setSourcesForPicture = function(element, srcsetDataAttribute) {
-        const parent = element.parentElement;
+    var setSourcesForPicture = function setSourcesForPicture(element, srcsetDataAttribute) {
+        var parent = element.parentElement;
         if (parent.tagName !== "PICTURE") {
             return;
         }
-        for (let i = 0; i < parent.children.length; i++) {
-            let pictureChild = parent.children[i];
+        for (var i = 0; i < parent.children.length; i++) {
+            var pictureChild = parent.children[i];
             if (pictureChild.tagName === "SOURCE") {
-                let sourceSrcset = pictureChild.dataset[srcsetDataAttribute];
+                var sourceSrcset = pictureChild.dataset[srcsetDataAttribute];
                 if (sourceSrcset) {
@@ -113,17 +110,25 @@ pictureChild.setAttribute("srcset", sourceSrcset);
 
-    var setSources = function(element, srcsetDataAttribute, srcDataAttribute) {
-        const tagName = element.tagName;
-        const elementSrc = element.dataset[srcDataAttribute];
+    var setSources = function setSources(element, srcsetDataAttribute, srcDataAttribute) {
+        var tagName = element.tagName;
+        var elementSrc = element.dataset[srcDataAttribute];
         if (tagName === "IMG") {
             setSourcesForPicture(element, srcsetDataAttribute);
-            const imgSrcset = element.dataset[srcsetDataAttribute];
-            if (imgSrcset) { element.setAttribute("srcset", imgSrcset); }
-            if (elementSrc) { element.setAttribute("src", elementSrc); }
+            var imgSrcset = element.dataset[srcsetDataAttribute];
+            if (imgSrcset) {
+                element.setAttribute("srcset", imgSrcset);
+            }
+            if (elementSrc) {
+                element.setAttribute("src", elementSrc);
+            }
             return;
         }
         if (tagName === "IFRAME") {
-            if (elementSrc) { element.setAttribute("src", elementSrc); }
+            if (elementSrc) {
+                element.setAttribute("src", elementSrc);
+            }
             return;
         }
-        if (elementSrc) { element.style.backgroundImage = "url(" + elementSrc + ")"; }
+        if (elementSrc) {
+            element.style.backgroundImage = "url(" + elementSrc + ")";
+        }
     };
@@ -133,8 +138,8 @@
      * Constructor
-     */ 
+     */
 
-    const LazyLoad = function(instanceSettings) {
-        this._settings = Object.assign({}, defaultSettings, instanceSettings);
+    var LazyLoad = function LazyLoad(instanceSettings) {
+        this._settings = _extends({}, defaultSettings, instanceSettings);
         this._queryOriginNode = this._settings.container === window ? document : this._settings.container;
-        
+
         this._previousLoopTime = 0;
@@ -150,3 +155,3 @@ this._loopTimeout = null;
     LazyLoad.prototype = {
-        
+
         /*
@@ -156,8 +161,10 @@ * Private methods
 
-        _reveal: function (element) {
-            const settings = this._settings;
+        _reveal: function _reveal(element) {
+            var settings = this._settings;
 
-            const errorCallback = function () {
+            var errorCallback = function errorCallback() {
                 /* As this method is asynchronous, it must be protected against external destroy() calls */
-                if (!settings) { return; }
+                if (!settings) {
+                    return;
+                }
                 element.removeEventListener("load", loadCallback);
@@ -170,5 +177,7 @@ element.removeEventListener("error", errorCallback);
 
-            const loadCallback = function () {
+            var loadCallback = function loadCallback() {
                 /* As this method is asynchronous, it must be protected against external destroy() calls */
-                if (!settings) { return; }
+                if (!settings) {
+                    return;
+                }
                 element.classList.remove(settings.class_loading);
@@ -193,7 +202,7 @@ element.classList.add(settings.class_loaded);
 
-        _loopThroughElements: function () {
-            const settings = this._settings,
+        _loopThroughElements: function _loopThroughElements() {
+            var settings = this._settings,
                 elements = this._elements,
-                elementsLength = (!elements) ? 0 : elements.length;
-            let i,
+                elementsLength = !elements ? 0 : elements.length;
+            var i = void 0,
                 processedIndexes = [],
@@ -203,8 +212,8 @@ firstLoop = this._isFirstLoop;
             for (i = 0; i < elementsLength; i++) {
-                let element = elements[i];
+                var element = elements[i];
                 /* If must skip_invisible and element is invisible, skip it */
-                if (settings.skip_invisible && (element.offsetParent === null)) {
+                if (settings.skip_invisible && element.offsetParent === null) {
                     continue;
                 }
-                
+
                 if (isBot || isInsideViewport(element, settings.container, settings.threshold)) {
@@ -237,10 +246,10 @@ if (firstLoop) {
 
-        _purgeElements: function () {
-            const elements = this._elements,
+        _purgeElements: function _purgeElements() {
+            var elements = this._elements,
                 elementsLength = elements.length;
-            let i,
+            var i = void 0,
                 elementsToPurge = [];
 
             for (i = 0; i < elementsLength; i++) {
-                let element = elements[i];
+                var element = elements[i];
                 /* If the element has already been processed, skip it */
@@ -257,3 +266,3 @@ if (element.dataset.wasProcessed) {
 
-        _startScrollHandler: function () {
+        _startScrollHandler: function _startScrollHandler() {
             if (!this._isHandlingScroll) {
@@ -265,3 +274,3 @@ this._isHandlingScroll = true;
 
-        _stopScrollHandler: function () {
+        _stopScrollHandler: function _stopScrollHandler() {
             if (this._isHandlingScroll) {
@@ -277,9 +286,11 @@ this._isHandlingScroll = false;
 
-        handleScroll: function () {
-            const throttle = this._settings.throttle;
+        handleScroll: function handleScroll() {
+            var throttle = this._settings.throttle;
 
             if (throttle !== 0) {
-                const getTime = () => { (new Date()).getTime(); };
-                let now = getTime();
-                let remainingTime = throttle - (now - this._previousLoopTime);
+                var getTime = function getTime() {
+                    new Date().getTime();
+                };
+                var now = getTime();
+                var remainingTime = throttle - (now - this._previousLoopTime);
                 if (remainingTime <= 0 || remainingTime > throttle) {
@@ -304,3 +315,3 @@ if (this._loopTimeout) {
 
-        update: function () {
+        update: function update() {
             // Converts to array the nodeset obtained querying the DOM from _queryOriginNode with elements_selector
@@ -313,3 +324,3 @@ this._elements = Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector));
 
-        destroy: function () {
+        destroy: function destroy() {
             window.removeEventListener("resize", this._boundHandleScroll);
@@ -328,4 +339,4 @@ if (this._loopTimeout) {
     /* Automatic instances creation if required (useful for async script loading!) */
-    let autoInitOptions = window.lazyLoadOptions;
-    if (autoInitOptions) { 
+    var autoInitOptions = window.lazyLoadOptions;
+    if (autoInitOptions) {
         autoInitialize(LazyLoad, autoInitOptions);
@@ -335,3 +346,2 @@ }
     return LazyLoad;
-
-})));
+});

Gruntfile.js

@@ -17,3 +17,3 @@ module.exports = function (grunt) {
 				src: "src/lazyload.core.js",
-				dest: "dist/lazyload.js"
+				dest: "dist/lazyload.es2015.js"
 			}
@@ -29,3 +29,3 @@ },
 				files: {
-					"dist/lazyload.transpiled.js": "dist/lazyload.js"
+					"dist/lazyload.js": "dist/lazyload.es2015.js"
 				}
@@ -41,3 +41,3 @@ }
 				files: {
-					"dist/lazyload.transpiled.min.js": "dist/lazyload.transpiled.js",
+					"dist/lazyload.min.js": "dist/lazyload.js",
 				}
@@ -44,0 +44,0 @@ }

package.json

 {
   "name": "vanilla-lazyload",
-  "version": "7.2.2",
+  "version": "8.0.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",
-  "main": "dist/lazyload.transpiled.min.js",
+  "main": "dist/lazyload.min.js",
   "devDependencies": {
@@ -7,0 +7,0 @@ "babel-plugin-transform-object-assign": "^6.22.0",

README.md

@@ -1,7 +0,10 @@
-LazyLoad is a fast, lightweight and flexible script that __speeds up your web application__ by loading images only as they enter the viewport. LazyLoad supports [responsive images](https://alistapart.com/article/responsive-images-in-practice), it's SEO friendly and it has some others [notable features](#notable-features).
+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, it supports [responsive images](https://alistapart.com/article/responsive-images-in-practice), it's SEO friendly and it has some others [notable features](#notable-features). 
 
+Check out the [LazyLoad website](https://verlok.github.io/lazyload/), in case you're reading this on GitHub.
+
 Jump to:
 
-[Include the script](#include-the-script) | [Recipes](#recipes) | [Tips & tricks](#tips--tricks) | [API](#api) | [Notable features](#notable-features)
+[Include the script](#include-the-script) | [Recipes](#recipes) | [Demos](#demos) | [Tips & tricks](#tips--tricks) | [API](#api) | [Notable features](#notable-features)
 
+
 ## Include the script
@@ -14,3 +17,3 @@
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/7.2.0/lazyload.transpiled.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/7.2.0/lazyload.min.js"></script>
 ```
@@ -21,3 +24,3 @@
 If you prefer to install LazyLoad locally in your project, you can either:
-- [download it from the `dist` folder](https://github.com/verlok/lazyload/tree/master/dist). The file you typically want to use is **lazyload.transpiled.min.js**.
+- [download it from the `dist` folder](https://github.com/verlok/lazyload/tree/master/dist). The file you typically want to use is **lazyload.min.js**.
 - install it with `npm install --save vanilla-lazyload`
@@ -110,3 +113,3 @@ - install it with `bower install vanilla-lazyload`.
 <!-- Download the script and execute it after lazyLoadOptions is defined -->
-<script async src="https://.../lazyload.transpiled.min.js"></script>
+<script async src="https://.../lazyload.min.js"></script>
 ```
@@ -126,3 +129,3 @@
 <!-- Download the script and execute it after lazyLoadOptions is defined -->
-<script async src="https://.../lazyload.transpiled.min.js"></script>
+<script async src="https://.../lazyload.min.js"></script>
 ```
@@ -156,3 +159,3 @@
 <!-- Download the script and execute it after lazyLoadOptions is defined -->
-<script async src="https://.../lazyload.transpiled.min.js"></script>
+<script async src="https://.../lazyload.min.js"></script>
 ```
@@ -328,3 +331,8 @@
 
+## Demos
 
+Didn't find the [recipe](#recipes) that exactly matches your case? We have demos!
+
+The [demos](https://github.com/verlok/lazyload/tree/master/demos) folder contains 15 use cases of LazyLoad. You might find there what you're looking for.
+
 ## Tips & tricks
@@ -428,3 +436,3 @@
 
-[Demo here](https://codepen.io/verlok/pen/LybvYy?editors=1011))
+[Demo here](https://codepen.io/verlok/pen/LybvYy?editors=1011)
 
@@ -466,2 +474,2 @@
 
-This script is comparable to the notorious jQuery\_lazyload, but **_LazyLoad_ is 6x faster**, because LazyLoad uses only optimized, **native javascript** functions and methods, instead of jQuery. Your users will see the difference, even in slow devices or computers.
+This script is comparable to the notorious jQuery\_lazyload, but **_LazyLoad_ is 6x faster**, because LazyLoad uses only optimized, **native javascript** functions and methods, instead of jQuery. Your users will see the difference, even in slow devices or computers.

todo.md

 TODO
 ====
 
-* [DEMO] Better present the demo files with explanation about them, and a linked index at the bottom

No alert changes

Improved metrics

Number of lines in readme file

468

increased by1.96%

Worsened metrics

Total package byte prevSize

888126

decreased by-1.83%

Number of package files

125

decreased by-0.79%

No dependency changes