New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
vanilla-lazyload
Advanced tools
vanilla-lazyload - npm Package Compare versions
Comparing version 8.0.3 to 8.1.0
@@ -45,3 +45,3 @@ { | ||
| "no-loop-func": 1, | ||
| "no-magic-numbers": 1, | ||
| "no-magic-numbers": [2, { "ignore": [0, 1] }], | ||
| "no-multi-spaces": 1, | ||
@@ -48,0 +48,0 @@ "no-multi-str": 1, |
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | ||
| typeof define === 'function' && define.amd ? define(factory) : | ||
| (global.LazyLoad = factory()); | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | ||
| typeof define === 'function' && define.amd ? define(factory) : | ||
| (global.LazyLoad = factory()); | ||
| }(this, (function () { 'use strict'; | ||
| var defaultSettings = { | ||
| elements_selector: "img", | ||
| container: window, | ||
| threshold: 300, | ||
| throttle: 150, | ||
| data_src: "original", | ||
| data_srcset: "originalSet", | ||
| class_loading: "loading", | ||
| class_loaded: "loaded", | ||
| class_error: "error", | ||
| class_initial: "initial", | ||
| skip_invisible: true, | ||
| callback_load: null, | ||
| callback_error: null, | ||
| callback_set: null, | ||
| callback_processed: null | ||
| }; | ||
| var defaultSettings = { | ||
| elements_selector: "img", | ||
| container: window, | ||
| threshold: 300, | ||
| throttle: 150, | ||
| data_src: "original", | ||
| data_srcset: "originalSet", | ||
| class_loading: "loading", | ||
| class_loaded: "loaded", | ||
| class_error: "error", | ||
| class_initial: "initial", | ||
| skip_invisible: true, | ||
| callback_load: null, | ||
| callback_error: null, | ||
| callback_set: null, | ||
| callback_processed: null | ||
| }; | ||
| const isBot = !("onscroll" in window) || /glebot/.test(navigator.userAgent); | ||
| const isBot = !("onscroll" in window) || /glebot/.test(navigator.userAgent); | ||
| const callCallback = function (callback, argument) { | ||
| if (callback) { callback(argument); } | ||
| }; | ||
| const callCallback = function (callback, argument) { | ||
| if (callback) { callback(argument); } | ||
| }; | ||
| const getTopOffset = function (element) { | ||
| return element.getBoundingClientRect().top + window.pageYOffset - element.ownerDocument.documentElement.clientTop; | ||
| }; | ||
| const getTopOffset = function (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; | ||
| return fold <= getTopOffset(element) - threshold; | ||
| }; | ||
| const isBelowViewport = function (element, container, threshold) { | ||
| const fold = (container === window) ? | ||
| window.innerHeight + window.pageYOffset : | ||
| getTopOffset(container) + container.offsetHeight; | ||
| return fold <= getTopOffset(element) - threshold; | ||
| }; | ||
| const getLeftOffset = function (element) { | ||
| return element.getBoundingClientRect().left + window.pageXOffset - element.ownerDocument.documentElement.clientLeft; | ||
| }; | ||
| const getLeftOffset = function (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; | ||
| return fold <= getLeftOffset(element) - threshold; | ||
| }; | ||
| const isAtRightOfViewport = function (element, container, threshold) { | ||
| const documentWidth = window.innerWidth; | ||
| const 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); | ||
| return fold >= getTopOffset(element) + threshold + element.offsetHeight; | ||
| }; | ||
| const isAboveViewport = function (element, container, threshold) { | ||
| const 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); | ||
| return fold >= getLeftOffset(element) + threshold + element.offsetWidth; | ||
| }; | ||
| const isAtLeftOfViewport = function (element, container, threshold) { | ||
| const 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 (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 } }); | ||
| window.dispatchEvent(event); | ||
| }; | ||
| /* 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 } }); | ||
| window.dispatchEvent(event); | ||
| }; | ||
| /* Auto initialization of one or more instances of lazyload, depending on the | ||
| options passed in (plain object or an array) */ | ||
| var autoInitialize = function (classObj, options) { | ||
| let optsLength = options.length; | ||
| if (!optsLength) { | ||
| // Plain object | ||
| createInstance(classObj, options); | ||
| /* Auto initialization of one or more instances of lazyload, depending on the | ||
| options passed in (plain object or an array) */ | ||
| var autoInitialize = function (classObj, options) { | ||
| let optsLength = options.length; | ||
| if (!optsLength) { | ||
| // Plain object | ||
| createInstance(classObj, options); | ||
| } | ||
| else { | ||
| // Array of objects | ||
| for (let i = 0; i < optsLength; i++) { | ||
| createInstance(classObj, options[i]); | ||
| } | ||
| else { | ||
| // Array of objects | ||
| for (let i = 0; i < optsLength; i++) { | ||
| createInstance(classObj, options[i]); | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| }; | ||
| const setSourcesForPicture = function (element, srcsetDataAttribute) { | ||
| const parent = element.parentElement; | ||
| if (parent.tagName !== "PICTURE") { | ||
| return; | ||
| } | ||
| for (let i = 0; i < parent.children.length; i++) { | ||
| let pictureChild = parent.children[i]; | ||
| if (pictureChild.tagName === "SOURCE") { | ||
| let sourceSrcset = pictureChild.dataset[srcsetDataAttribute]; | ||
| if (sourceSrcset) { | ||
| pictureChild.setAttribute("srcset", sourceSrcset); | ||
| } | ||
| const setSourcesForPicture = function (element, srcsetDataAttribute) { | ||
| const parent = element.parentElement; | ||
| if (parent.tagName !== "PICTURE") { | ||
| return; | ||
| } | ||
| for (let i = 0; i < parent.children.length; i++) { | ||
| let pictureChild = parent.children[i]; | ||
| if (pictureChild.tagName === "SOURCE") { | ||
| let sourceSrcset = pictureChild.dataset[srcsetDataAttribute]; | ||
| if (sourceSrcset) { | ||
| pictureChild.setAttribute("srcset", sourceSrcset); | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| }; | ||
| var setSources = function (element, srcsetDataAttribute, srcDataAttribute) { | ||
| const tagName = element.tagName; | ||
| const 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); | ||
| } | ||
| return; | ||
| var setSources = function (element, srcsetDataAttribute, srcDataAttribute) { | ||
| const tagName = element.tagName; | ||
| const elementSrc = element.dataset[srcDataAttribute]; | ||
| if (tagName === "IMG") { | ||
| setSourcesForPicture(element, srcsetDataAttribute); | ||
| const imgSrcset = element.dataset[srcsetDataAttribute]; | ||
| if (imgSrcset) { | ||
| element.setAttribute("srcset", imgSrcset); | ||
| } | ||
| if (tagName === "IFRAME") { | ||
| if (elementSrc) { | ||
| element.setAttribute("src", elementSrc); | ||
| } | ||
| return; | ||
| if (elementSrc) { | ||
| element.setAttribute("src", elementSrc); | ||
| } | ||
| return; | ||
| } | ||
| if (tagName === "IFRAME") { | ||
| if (elementSrc) { | ||
| element.style.backgroundImage = `url("${elementSrc}")`; | ||
| element.setAttribute("src", elementSrc); | ||
| } | ||
| }; | ||
| return; | ||
| } | ||
| if (elementSrc) { | ||
| element.style.backgroundImage = `url("${elementSrc}")`; | ||
| } | ||
| }; | ||
| /* | ||
| * Constructor | ||
| */ | ||
| const LazyLoad = function(instanceSettings) { | ||
| this._settings = Object.assign({}, defaultSettings, instanceSettings); | ||
| this._queryOriginNode = this._settings.container === window ? document : this._settings.container; | ||
| this._previousLoopTime = 0; | ||
| this._loopTimeout = null; | ||
| this._boundHandleScroll = this.handleScroll.bind(this); | ||
| this._isFirstLoop = true; | ||
| window.addEventListener("resize", this._boundHandleScroll); | ||
| this.update(); | ||
| }; | ||
| LazyLoad.prototype = { | ||
| /* | ||
| * Constructor | ||
| * Private methods | ||
| */ | ||
| const LazyLoad = function(instanceSettings) { | ||
| this._settings = Object.assign({}, defaultSettings, instanceSettings); | ||
| this._queryOriginNode = this._settings.container === window ? document : this._settings.container; | ||
| this._previousLoopTime = 0; | ||
| this._loopTimeout = null; | ||
| this._boundHandleScroll = this.handleScroll.bind(this); | ||
| _reveal: function (element) { | ||
| const settings = this._settings; | ||
| this._isFirstLoop = true; | ||
| window.addEventListener("resize", this._boundHandleScroll); | ||
| this.update(); | ||
| }; | ||
| const errorCallback = function () { | ||
| /* As this method is asynchronous, it must be protected against external destroy() calls */ | ||
| if (!settings) { return; } | ||
| element.removeEventListener("load", loadCallback); | ||
| element.removeEventListener("error", errorCallback); | ||
| element.classList.remove(settings.class_loading); | ||
| element.classList.add(settings.class_error); | ||
| callCallback(settings.callback_error, element); | ||
| }; | ||
| LazyLoad.prototype = { | ||
| /* | ||
| * Private methods | ||
| */ | ||
| const loadCallback = function () { | ||
| /* As this method is asynchronous, it must be protected against external destroy() calls */ | ||
| if (!settings) { return; } | ||
| element.classList.remove(settings.class_loading); | ||
| element.classList.add(settings.class_loaded); | ||
| element.removeEventListener("load", loadCallback); | ||
| element.removeEventListener("error", errorCallback); | ||
| /* Calling LOAD callback */ | ||
| callCallback(settings.callback_load, element); | ||
| }; | ||
| _reveal: function (element) { | ||
| const settings = this._settings; | ||
| if (element.tagName === "IMG" || element.tagName === "IFRAME") { | ||
| element.addEventListener("load", loadCallback); | ||
| element.addEventListener("error", errorCallback); | ||
| element.classList.add(settings.class_loading); | ||
| } | ||
| const errorCallback = function () { | ||
| /* As this method is asynchronous, it must be protected against external destroy() calls */ | ||
| if (!settings) { return; } | ||
| element.removeEventListener("load", loadCallback); | ||
| element.removeEventListener("error", errorCallback); | ||
| element.classList.remove(settings.class_loading); | ||
| element.classList.add(settings.class_error); | ||
| callCallback(settings.callback_error, element); | ||
| }; | ||
| setSources(element, settings.data_srcset, settings.data_src); | ||
| /* Calling SET callback */ | ||
| callCallback(settings.callback_set, element); | ||
| }, | ||
| const loadCallback = function () { | ||
| /* As this method is asynchronous, it must be protected against external destroy() calls */ | ||
| if (!settings) { return; } | ||
| element.classList.remove(settings.class_loading); | ||
| element.classList.add(settings.class_loaded); | ||
| element.removeEventListener("load", loadCallback); | ||
| element.removeEventListener("error", errorCallback); | ||
| /* Calling LOAD callback */ | ||
| callCallback(settings.callback_load, element); | ||
| }; | ||
| _loopThroughElements: function () { | ||
| const settings = this._settings, | ||
| elements = this._elements, | ||
| elementsLength = (!elements) ? 0 : elements.length; | ||
| let i, | ||
| processedIndexes = [], | ||
| firstLoop = this._isFirstLoop; | ||
| if (element.tagName === "IMG" || element.tagName === "IFRAME") { | ||
| element.addEventListener("load", loadCallback); | ||
| element.addEventListener("error", errorCallback); | ||
| element.classList.add(settings.class_loading); | ||
| for (i = 0; i < elementsLength; i++) { | ||
| let element = elements[i]; | ||
| /* If must skip_invisible and element is invisible, skip it */ | ||
| if (settings.skip_invisible && (element.offsetParent === null)) { | ||
| continue; | ||
| } | ||
| setSources(element, settings.data_srcset, settings.data_src); | ||
| /* Calling SET callback */ | ||
| callCallback(settings.callback_set, element); | ||
| }, | ||
| _loopThroughElements: function () { | ||
| const settings = this._settings, | ||
| elements = this._elements, | ||
| elementsLength = (!elements) ? 0 : elements.length; | ||
| let i, | ||
| processedIndexes = [], | ||
| firstLoop = this._isFirstLoop; | ||
| for (i = 0; i < elementsLength; i++) { | ||
| let element = elements[i]; | ||
| /* If must skip_invisible and element is invisible, skip it */ | ||
| if (settings.skip_invisible && (element.offsetParent === null)) { | ||
| continue; | ||
| if (isBot || isInsideViewport(element, settings.container, settings.threshold)) { | ||
| if (firstLoop) { | ||
| element.classList.add(settings.class_initial); | ||
| } | ||
| if (isBot || isInsideViewport(element, settings.container, settings.threshold)) { | ||
| if (firstLoop) { | ||
| element.classList.add(settings.class_initial); | ||
| } | ||
| /* Start loading the image */ | ||
| this._reveal(element); | ||
| /* Marking the element as processed. */ | ||
| processedIndexes.push(i); | ||
| element.dataset.wasProcessed = true; | ||
| } | ||
| /* Start loading the image */ | ||
| this._reveal(element); | ||
| /* Marking the element as processed. */ | ||
| processedIndexes.push(i); | ||
| element.dataset.wasProcessed = true; | ||
| } | ||
| /* Removing processed elements from this._elements. */ | ||
| while (processedIndexes.length) { | ||
| elements.splice(processedIndexes.pop(), 1); | ||
| /* Calling the end loop callback */ | ||
| callCallback(settings.callback_processed, elements.length); | ||
| } | ||
| /* Stop listening to scroll event when 0 elements remains */ | ||
| if (elementsLength === 0) { | ||
| this._stopScrollHandler(); | ||
| } | ||
| /* Sets isFirstLoop to false */ | ||
| if (firstLoop) { | ||
| this._isFirstLoop = false; | ||
| } | ||
| }, | ||
| } | ||
| /* Removing processed elements from this._elements. */ | ||
| while (processedIndexes.length) { | ||
| elements.splice(processedIndexes.pop(), 1); | ||
| /* Calling the end loop callback */ | ||
| callCallback(settings.callback_processed, elements.length); | ||
| } | ||
| /* Stop listening to scroll event when 0 elements remains */ | ||
| if (elementsLength === 0) { | ||
| this._stopScrollHandler(); | ||
| } | ||
| /* Sets isFirstLoop to false */ | ||
| if (firstLoop) { | ||
| this._isFirstLoop = false; | ||
| } | ||
| }, | ||
| _purgeElements: function () { | ||
| const elements = this._elements, | ||
| elementsLength = elements.length; | ||
| let i, | ||
| elementsToPurge = []; | ||
| _purgeElements: function () { | ||
| const elements = this._elements, | ||
| elementsLength = elements.length; | ||
| let i, | ||
| elementsToPurge = []; | ||
| for (i = 0; i < elementsLength; i++) { | ||
| let element = elements[i]; | ||
| /* If the element has already been processed, skip it */ | ||
| if (element.dataset.wasProcessed) { | ||
| elementsToPurge.push(i); | ||
| } | ||
| for (i = 0; i < elementsLength; i++) { | ||
| let element = elements[i]; | ||
| /* If the element has already been processed, skip it */ | ||
| if (element.dataset.wasProcessed) { | ||
| elementsToPurge.push(i); | ||
| } | ||
| /* Removing elements to purge from this._elements. */ | ||
| while (elementsToPurge.length > 0) { | ||
| elements.splice(elementsToPurge.pop(), 1); | ||
| } | ||
| }, | ||
| } | ||
| /* Removing elements to purge from this._elements. */ | ||
| while (elementsToPurge.length > 0) { | ||
| elements.splice(elementsToPurge.pop(), 1); | ||
| } | ||
| }, | ||
| _startScrollHandler: function () { | ||
| if (!this._isHandlingScroll) { | ||
| this._isHandlingScroll = true; | ||
| this._settings.container.addEventListener("scroll", this._boundHandleScroll); | ||
| } | ||
| }, | ||
| _startScrollHandler: function () { | ||
| if (!this._isHandlingScroll) { | ||
| this._isHandlingScroll = true; | ||
| this._settings.container.addEventListener("scroll", this._boundHandleScroll); | ||
| } | ||
| }, | ||
| _stopScrollHandler: function () { | ||
| if (this._isHandlingScroll) { | ||
| this._isHandlingScroll = false; | ||
| this._settings.container.removeEventListener("scroll", this._boundHandleScroll); | ||
| } | ||
| }, | ||
| _stopScrollHandler: function () { | ||
| if (this._isHandlingScroll) { | ||
| this._isHandlingScroll = false; | ||
| this._settings.container.removeEventListener("scroll", this._boundHandleScroll); | ||
| } | ||
| }, | ||
| /* | ||
| * Public methods | ||
| */ | ||
| /* | ||
| * Public methods | ||
| */ | ||
| handleScroll: function () { | ||
| const throttle = this._settings.throttle; | ||
| handleScroll: function () { | ||
| const throttle = this._settings.throttle; | ||
| if (throttle !== 0) { | ||
| let now = Date.now(); | ||
| let remainingTime = throttle - (now - this._previousLoopTime); | ||
| if (remainingTime <= 0 || remainingTime > throttle) { | ||
| if (this._loopTimeout) { | ||
| clearTimeout(this._loopTimeout); | ||
| this._loopTimeout = null; | ||
| } | ||
| this._previousLoopTime = now; | ||
| this._loopThroughElements(); | ||
| } else if (!this._loopTimeout) { | ||
| this._loopTimeout = setTimeout(function () { | ||
| this._previousLoopTime = Date.now(); | ||
| this._loopTimeout = null; | ||
| this._loopThroughElements(); | ||
| }.bind(this), remainingTime); | ||
| if (throttle !== 0) { | ||
| let now = Date.now(); | ||
| let remainingTime = throttle - (now - this._previousLoopTime); | ||
| if (remainingTime <= 0 || remainingTime > throttle) { | ||
| if (this._loopTimeout) { | ||
| clearTimeout(this._loopTimeout); | ||
| this._loopTimeout = null; | ||
| } | ||
| } else { | ||
| this._previousLoopTime = now; | ||
| this._loopThroughElements(); | ||
| } else if (!this._loopTimeout) { | ||
| this._loopTimeout = setTimeout(function () { | ||
| this._previousLoopTime = Date.now(); | ||
| this._loopTimeout = null; | ||
| this._loopThroughElements(); | ||
| }.bind(this), remainingTime); | ||
| } | ||
| }, | ||
| update: function () { | ||
| // Converts to array the nodeset obtained querying the DOM from _queryOriginNode with elements_selector | ||
| this._elements = Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)); | ||
| this._purgeElements(); | ||
| } else { | ||
| this._loopThroughElements(); | ||
| this._startScrollHandler(); | ||
| }, | ||
| } | ||
| }, | ||
| destroy: function () { | ||
| window.removeEventListener("resize", this._boundHandleScroll); | ||
| if (this._loopTimeout) { | ||
| clearTimeout(this._loopTimeout); | ||
| this._loopTimeout = null; | ||
| } | ||
| this._stopScrollHandler(); | ||
| this._elements = null; | ||
| this._queryOriginNode = null; | ||
| this._settings = null; | ||
| update: function () { | ||
| // Converts to array the nodeset obtained querying the DOM from _queryOriginNode with elements_selector | ||
| this._elements = Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)); | ||
| this._purgeElements(); | ||
| this._loopThroughElements(); | ||
| this._startScrollHandler(); | ||
| }, | ||
| destroy: function () { | ||
| window.removeEventListener("resize", this._boundHandleScroll); | ||
| if (this._loopTimeout) { | ||
| clearTimeout(this._loopTimeout); | ||
| this._loopTimeout = null; | ||
| } | ||
| }; | ||
| /* Automatic instances creation if required (useful for async script loading!) */ | ||
| let autoInitOptions = window.lazyLoadOptions; | ||
| if (autoInitOptions) { | ||
| autoInitialize(LazyLoad, autoInitOptions); | ||
| this._stopScrollHandler(); | ||
| this._elements = null; | ||
| this._queryOriginNode = null; | ||
| this._settings = null; | ||
| } | ||
| }; | ||
| return LazyLoad; | ||
| /* Automatic instances creation if required (useful for async script loading!) */ | ||
| let autoInitOptions = window.lazyLoadOptions; | ||
| if (autoInitOptions) { | ||
| autoInitialize(LazyLoad, autoInitOptions); | ||
| } | ||
| return LazyLoad; | ||
| }))); |
@@ -326,2 +326,2 @@ 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; }; | ||
| return LazyLoad; | ||
| }); | ||
| }); |
@@ -1,1 +0,1 @@ | ||
| var _extends=Object.assign||function(a){for(var b=1;b<arguments.length;b++){var c=arguments[b];for(var d in c)Object.prototype.hasOwnProperty.call(c,d)&&(a[d]=c[d])}return a},_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a};!function(a,b){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=b():"function"==typeof define&&define.amd?define(b):a.LazyLoad=b()}(this,function(){"use strict";var a={elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"original",data_srcset:"originalSet",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_processed:null},b=!("onscroll"in window)||/glebot/.test(navigator.userAgent),c=function(a,b){a&&a(b)},d=function(a){return a.getBoundingClientRect().top+window.pageYOffset-a.ownerDocument.documentElement.clientTop},e=function(a,b,c){return(b===window?window.innerHeight+window.pageYOffset:d(b)+b.offsetHeight)<=d(a)-c},f=function(a){return a.getBoundingClientRect().left+window.pageXOffset-a.ownerDocument.documentElement.clientLeft},g=function(a,b,c){var d=window.innerWidth;return(b===window?d+window.pageXOffset:f(b)+d)<=f(a)-c},h=function(a,b,c){return(b===window?window.pageYOffset:d(b))>=d(a)+c+a.offsetHeight},i=function(a,b,c){return(b===window?window.pageXOffset:f(b))>=f(a)+c+a.offsetWidth},j=function(a,b,c){return!(e(a,b,c)||h(a,b,c)||g(a,b,c)||i(a,b,c))},k=function(a,b){var c=new a(b),d=new CustomEvent("LazyLoad::Initialized",{detail:{instance:c}});window.dispatchEvent(d)},l=function(a,b){var c=a.parentElement;if("PICTURE"===c.tagName)for(var d=0;d<c.children.length;d++){var e=c.children[d];if("SOURCE"===e.tagName){var f=e.dataset[b];f&&e.setAttribute("srcset",f)}}},m=function(a,b,c){var d=a.tagName,e=a.dataset[c];if("IMG"===d){l(a,b);var f=a.dataset[b];return f&&a.setAttribute("srcset",f),void(e&&a.setAttribute("src",e))}if("IFRAME"===d)return void(e&&a.setAttribute("src",e));e&&(a.style.backgroundImage='url("'+e+'")')},n=function(b){this._settings=_extends({},a,b),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};n.prototype={_reveal:function(a){var b=this._settings,d=function d(){b&&(a.removeEventListener("load",e),a.removeEventListener("error",d),a.classList.remove(b.class_loading),a.classList.add(b.class_error),c(b.callback_error,a))},e=function e(){b&&(a.classList.remove(b.class_loading),a.classList.add(b.class_loaded),a.removeEventListener("load",e),a.removeEventListener("error",d),c(b.callback_load,a))};"IMG"!==a.tagName&&"IFRAME"!==a.tagName||(a.addEventListener("load",e),a.addEventListener("error",d),a.classList.add(b.class_loading)),m(a,b.data_srcset,b.data_src),c(b.callback_set,a)},_loopThroughElements:function(){var a=this._settings,d=this._elements,e=d?d.length:0,f=void 0,g=[],h=this._isFirstLoop;for(f=0;f<e;f++){var i=d[f];a.skip_invisible&&null===i.offsetParent||(b||j(i,a.container,a.threshold))&&(h&&i.classList.add(a.class_initial),this._reveal(i),g.push(f),i.dataset.wasProcessed=!0)}for(;g.length;)d.splice(g.pop(),1),c(a.callback_processed,d.length);0===e&&this._stopScrollHandler(),h&&(this._isFirstLoop=!1)},_purgeElements:function(){var a=this._elements,b=a.length,c=void 0,d=[];for(c=0;c<b;c++){a[c].dataset.wasProcessed&&d.push(c)}for(;d.length>0;)a.splice(d.pop(),1)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var a=this._settings.throttle;if(0!==a){var b=Date.now(),c=a-(b-this._previousLoopTime);c<=0||c>a?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=b,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),c))}else this._loopThroughElements()},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null}};var o=window.lazyLoadOptions;return o&&function(a,b){var c=b.length;if(c)for(var d=0;d<c;d++)k(a,b[d]);else k(a,b)}(n,o),n}); | ||
| var _extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t},_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};!function(t,e){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.LazyLoad=e()}(this,function(){"use strict";var t={elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"original",data_srcset:"originalSet",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_processed:null},e=!("onscroll"in window)||/glebot/.test(navigator.userAgent),o=function(t,e){t&&t(e)},n=function(t){return t.getBoundingClientRect().top+window.pageYOffset-t.ownerDocument.documentElement.clientTop},i=function(t,e,o){return(e===window?window.innerHeight+window.pageYOffset:n(e)+e.offsetHeight)<=n(t)-o},s=function(t){return t.getBoundingClientRect().left+window.pageXOffset-t.ownerDocument.documentElement.clientLeft},l=function(t,e,o){var n=window.innerWidth;return(e===window?n+window.pageXOffset:s(e)+n)<=s(t)-o},r=function(t,e,o){return(e===window?window.pageYOffset:n(e))>=n(t)+o+t.offsetHeight},a=function(t,e,o){return(e===window?window.pageXOffset:s(e))>=s(t)+o+t.offsetWidth},c=function(t,e,o){return!(i(t,e,o)||r(t,e,o)||l(t,e,o)||a(t,e,o))},d=function(t,e){var o=new t(e),n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:o}});window.dispatchEvent(n)},u=function(t,e){var o=t.parentElement;if("PICTURE"===o.tagName)for(var n=0;n<o.children.length;n++){var i=o.children[n];if("SOURCE"===i.tagName){var s=i.dataset[e];s&&i.setAttribute("srcset",s)}}},h=function(t,e,o){var n=t.tagName,i=t.dataset[o];if("IMG"===n){u(t,e);var s=t.dataset[e];return s&&t.setAttribute("srcset",s),void(i&&t.setAttribute("src",i))}"IFRAME"!==n?i&&(t.style.backgroundImage='url("'+i+'")'):i&&t.setAttribute("src",i)},_=function(e){this._settings=_extends({},t,e),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};_.prototype={_reveal:function(t){var e=this._settings,n=function n(){e&&(t.removeEventListener("load",i),t.removeEventListener("error",n),t.classList.remove(e.class_loading),t.classList.add(e.class_error),o(e.callback_error,t))},i=function i(){e&&(t.classList.remove(e.class_loading),t.classList.add(e.class_loaded),t.removeEventListener("load",i),t.removeEventListener("error",n),o(e.callback_load,t))};"IMG"!==t.tagName&&"IFRAME"!==t.tagName||(t.addEventListener("load",i),t.addEventListener("error",n),t.classList.add(e.class_loading)),h(t,e.data_srcset,e.data_src),o(e.callback_set,t)},_loopThroughElements:function(){var t=this._settings,n=this._elements,i=n?n.length:0,s=void 0,l=[],r=this._isFirstLoop;for(s=0;s<i;s++){var a=n[s];t.skip_invisible&&null===a.offsetParent||(e||c(a,t.container,t.threshold))&&(r&&a.classList.add(t.class_initial),this._reveal(a),l.push(s),a.dataset.wasProcessed=!0)}for(;l.length;)n.splice(l.pop(),1),o(t.callback_processed,n.length);0===i&&this._stopScrollHandler(),r&&(this._isFirstLoop=!1)},_purgeElements:function(){var t=this._elements,e=t.length,o=void 0,n=[];for(o=0;o<e;o++)t[o].dataset.wasProcessed&&n.push(o);for(;n.length>0;)t.splice(n.pop(),1)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var t=this._settings.throttle;if(0!==t){var e=Date.now(),o=t-(e-this._previousLoopTime);o<=0||o>t?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=e,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),o))}else this._loopThroughElements()},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null}};var f=window.lazyLoadOptions;return f&&function(t,e){var o=e.length;if(o)for(var n=0;n<o;n++)d(t,e[n]);else d(t,e)}(_,f),_}); |
| { | ||
| "name": "vanilla-lazyload", | ||
| "version": "8.0.3", | ||
| "version": "8.1.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", | ||
@@ -8,15 +8,13 @@ "main": "dist/lazyload.min.js", | ||
| "babel-plugin-transform-object-assign": "^6.22.0", | ||
| "babel-preset-env": "^1.6.0", | ||
| "babel-preset-es2015": "^6.24.1", | ||
| "grunt": "^1.0.1", | ||
| "grunt-babel": "^6.0.0", | ||
| "grunt-contrib-concat": "^1.0.1", | ||
| "grunt-contrib-uglify": "~2.3.0", | ||
| "grunt-contrib-watch": "~1.0.0", | ||
| "grunt-rollup": "^1.0.1", | ||
| "gruntify-eslint": "^3.1.0", | ||
| "jest": "^19.0.2" | ||
| "gulp": "^3.9.1", | ||
| "gulp-babel": "^7.0.0", | ||
| "gulp-eslint": "^4.0.0", | ||
| "gulp-notify": "^3.0.0", | ||
| "gulp-rename": "^1.2.2", | ||
| "gulp-rollup": "^2.14.0", | ||
| "gulp-uglify": "^3.0.0" | ||
| }, | ||
| "scripts": { | ||
| "test": "jest" | ||
| }, | ||
| "scripts": {}, | ||
| "repository": { | ||
@@ -27,4 +25,4 @@ "type": "git", | ||
| "keywords": [ | ||
| "lazy", | ||
| "load", | ||
| "lazyload", | ||
| "vanilla", | ||
| "responsive", | ||
@@ -37,8 +35,7 @@ "images", | ||
| "progressive", | ||
| "JPEG", | ||
| "performance", | ||
| "perfmatters", | ||
| "no-jquery", | ||
| "async", | ||
| "vanilla" | ||
| "gulp", | ||
| "async" | ||
| ], | ||
@@ -45,0 +42,0 @@ "author": "Andrea \"verlok\" Verlicchi", |
@@ -1,2 +0,2 @@ | ||
| 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). | ||
| 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 other [notable features](#notable-features). | ||
@@ -3,0 +3,0 @@ Check out the [LazyLoad website](https://verlok.github.io/lazyload/), in case you're reading this on GitHub. |
| TODO | ||
| ==== | ||
| * Use gulp instead of grunt | ||
| * Transpile and bundle to dist/lazyload.js and minified to dist/lazyload.min.js | ||
| * Bonus: in addition, don't transpile but bundle to dist/lazyload.es2015.js | ||
| * Make tests work again | ||
| * Test transpiled and bundled file's public functions (mocking dependencies) | ||
| * Test unbundled modules singularly (transpiled?) |
No alert changes
Worsened metrics
- Total package byte prevSize
877127
-1.26%- Number of package files
124
-0.8%- Lines of code
1033
-21.08%No dependency changes