vanilla-lazyload - npm Package Compare versions

Comparing version 1.6.0 to 2.0.0

bower.json

@@ -0,0 +0,0 @@ {

demos/perf/jquery.lazyload.min.js

 /*! Lazy Load 1.9.3 - MIT license - Copyright 2010-2013 Mika Tuupola */
 !function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c=a(this);if(!j.skip_invisible||c.is(":visible"))if(a.abovethetop(this,j)||a.leftofbegin(this,j));else if(a.belowthefold(this,j)||a.rightoffold(this,j)){if(++b>j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.is("img")&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("<img />").bind("load",function(){var d=c.attr("data-"+j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.attr("data-"+j.data_attribute))}}),0!==j.event.indexOf("scroll")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document);

dist/lazyload.js

@@ -1,443 +0,449 @@
-(function (root, factory) {
-	if (typeof define === 'function' && define.amd) {
-		define([], factory);
-	} else if (typeof exports === 'object') {
-		module.exports = factory();
-	} else {
-		root.LazyLoad = factory();
-	}
-}(this, function () {
+(function(root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define([], factory);
+    } else if (typeof exports === 'object') {
+        module.exports = factory();
+    } else {
+        root.LazyLoad = factory();
+    }
+}(this, function() {
 
-	var _defaultSettings,
-		_supportsAddEventListener,
-		_supportsAttachEvent,
-		_supportsClassList,
-		_isInitialized = false;
+    var _defaultSettings,
+        _supportsAddEventListener,
+        _supportsAttachEvent,
+        _supportsClassList,
+        _isInitialized = false;
 
 
-	/*
-	 * PRIVATE FUNCTIONS *NOT RELATED* TO A SPECIFIC INSTANCE OF LAZY LOAD
-	 * -------------------------------------------------------------------
-	 */
+    /*
+     * PRIVATE FUNCTIONS *NOT RELATED* TO A SPECIFIC INSTANCE OF LAZY LOAD
+     * -------------------------------------------------------------------
+     */
 
-	function _init() {
-		if(!_isInitialized) {
-			_defaultSettings = {
-				elements_selector: "img",
-				container: window,
-				threshold: 300,
-				throttle: 50,
-				data_src: "original",
-				data_srcset: "original-set",
-				class_loading: "loading",
-				class_loaded: "loaded",
-				skip_invisible: true,
-				show_while_loading: false,
-				callback_load: null,
-				callback_set: null,
-				callback_processed: null,
-				placeholder: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-			};
-			_supportsAddEventListener = !!window.addEventListener;
-			_supportsAttachEvent = !!window.attachEvent;
-			_supportsClassList = !!document.body.classList;
+    function _init() {
+        if (!_isInitialized) {
+            _defaultSettings = {
+                elements_selector: "img",
+                container: window,
+                threshold: 300,
+                throttle: 50,
+                data_src: "original",
+                data_srcset: "original-set",
+                class_loading: "loading",
+                class_loaded: "loaded",
+                skip_invisible: true,
+                show_while_loading: true,
+                callback_load: null,
+                callback_set: null,
+                callback_processed: null,
+                placeholder: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            };
+            _supportsAddEventListener = !!window.addEventListener;
+            _supportsAttachEvent = !!window.attachEvent;
+            _supportsClassList = !!document.body.classList;
 
-			_isInitialized = true;
-		}
-	}
+            _isInitialized = true;
+        }
+    }
 
-	function _addEventListener(element, eventName, callback) {
-		// Use addEventListener if available
-		if (_supportsAddEventListener) {
-			element.addEventListener(eventName, callback);
-			return;
-		}
-		// Otherwise use attachEvent, set this and event
-		if (_supportsAttachEvent) {
-			element.attachEvent('on' + eventName, (function (el) {
-				return function () {
-					callback.call(el, window.event);
-				};
-			}(element)));
-			// Break closure and primary circular reference to element
-			element = null;
-		}
-	}
+    function _addEventListener(element, eventName, callback) {
+        // Use addEventListener if available
+        if (_supportsAddEventListener) {
+            element.addEventListener(eventName, callback);
+            return;
+        }
+        // Otherwise use attachEvent, set this and event
+        if (_supportsAttachEvent) {
+            element.attachEvent('on' + eventName, (function(el) {
+                return function() {
+                    callback.call(el, window.event);
+                };
+            }(element)));
+            // Break closure and primary circular reference to element
+            element = null;
+        }
+    }
 
-	function _removeEventListener(element, eventName, callback) {
-		// Use removeEventListener if available
-		if (_supportsAddEventListener) {
-			element.removeEventListener(eventName, callback);
-			return;
-		}
-		// Otherwise use detachEvent
-		if (_supportsAttachEvent) {
-			element.detachEvent('on' + eventName, callback);
-		}
-	}
+    function _removeEventListener(element, eventName, callback) {
+        // Use removeEventListener if available
+        if (_supportsAddEventListener) {
+            element.removeEventListener(eventName, callback);
+            return;
+        }
+        // Otherwise use detachEvent
+        if (_supportsAttachEvent) {
+            element.detachEvent('on' + eventName, callback);
+        }
+    }
 
-	function _isInsideViewport(element, container, threshold) {
+    function _isInsideViewport(element, container, threshold) {
 
-		var ownerDocument, documentTop, documentLeft;
+        var ownerDocument, documentTop, documentLeft;
 
-		function _getDocumentWidth() {
-			return window.innerWidth || (ownerDocument.documentElement.clientWidth || document.body.clientWidth);
-		}
+        function _getDocumentWidth() {
+            return window.innerWidth || (ownerDocument.documentElement.clientWidth || document.body.clientWidth);
+        }
 
-		function _getDocumentHeight() {
-			return window.innerHeight || (ownerDocument.documentElement.clientHeight || document.body.clientHeight);
-		}
+        function _getDocumentHeight() {
+            return window.innerHeight || (ownerDocument.documentElement.clientHeight || document.body.clientHeight);
+        }
 
-		function _getTopOffset(element) {
-			return element.getBoundingClientRect().top + documentTop - ownerDocument.documentElement.clientTop;
-		}
+        function _getTopOffset(element) {
+            return element.getBoundingClientRect().top + documentTop - ownerDocument.documentElement.clientTop;
+        }
 
-		function _getLeftOffset(element) {
-			return element.getBoundingClientRect().left + documentLeft - ownerDocument.documentElement.clientLeft;
-		}
+        function _getLeftOffset(element) {
+            return element.getBoundingClientRect().left + documentLeft - ownerDocument.documentElement.clientLeft;
+        }
 
-		function _isBelowViewport() {
-			var fold;
-			if (container === window) {
-				fold = _getDocumentHeight() + documentTop;
-			} else {
-				fold = _getTopOffset(container) + container.offsetHeight;
-			}
-			return fold <= _getTopOffset(element) - threshold;
-		}
+        function _isBelowViewport() {
+            var fold;
+            if (container === window) {
+                fold = _getDocumentHeight() + documentTop;
+            } else {
+                fold = _getTopOffset(container) + container.offsetHeight;
+            }
+            return fold <= _getTopOffset(element) - threshold;
+        }
 
-		function _isAtRightOfViewport() {
-			var fold;
-			if (container === window) {
-				fold = _getDocumentWidth() + window.pageXOffset;
-			} else {
-				fold = _getLeftOffset(container) + _getDocumentWidth();
-			}
-			return fold <= _getLeftOffset(element) - threshold;
-		}
+        function _isAtRightOfViewport() {
+            var fold;
+            if (container === window) {
+                fold = _getDocumentWidth() + window.pageXOffset;
+            } else {
+                fold = _getLeftOffset(container) + _getDocumentWidth();
+            }
+            return fold <= _getLeftOffset(element) - threshold;
+        }
 
-		function _isAboveViewport() {
-			var fold;
-			if (container === window) {
-				fold = documentTop;
-			} else {
-				fold = _getTopOffset(container);
-			}
-			return fold >= _getTopOffset(element) + threshold + element.offsetHeight;
-		}
+        function _isAboveViewport() {
+            var fold;
+            if (container === window) {
+                fold = documentTop;
+            } else {
+                fold = _getTopOffset(container);
+            }
+            return fold >= _getTopOffset(element) + threshold + element.offsetHeight;
+        }
 
-		function _isAtLeftOfViewport() {
-			var fold;
-			if (container === window) {
-				fold = documentLeft;
-			} else {
-				fold = _getLeftOffset(container);
-			}
-			return fold >= _getLeftOffset(element) + threshold + element.offsetWidth;
-		}
+        function _isAtLeftOfViewport() {
+            var fold;
+            if (container === window) {
+                fold = documentLeft;
+            } else {
+                fold = _getLeftOffset(container);
+            }
+            return fold >= _getLeftOffset(element) + threshold + element.offsetWidth;
+        }
 
-		ownerDocument = element.ownerDocument;
-		documentTop = window.pageYOffset || ownerDocument.body.scrollTop;
-		documentLeft = window.pageXOffset || ownerDocument.body.scrollLeft;
+        ownerDocument = element.ownerDocument;
+        documentTop = window.pageYOffset || ownerDocument.body.scrollTop;
+        documentLeft = window.pageXOffset || ownerDocument.body.scrollLeft;
 
-		return !_isBelowViewport() && !_isAboveViewport() && !_isAtRightOfViewport() && !_isAtLeftOfViewport();
-	}
+        return !_isBelowViewport() && !_isAboveViewport() && !_isAtRightOfViewport() && !_isAtLeftOfViewport();
+    }
 
-	function _now() {
-		var d = new Date();
-		return d.getTime();
-	}
+    function _now() {
+        var d = new Date();
+        return d.getTime();
+    }
 
-	function _merge_objects(obj1, obj2) {
-		var obj3 = {}, propertyName;
-		for (propertyName in obj1) {
-			if (obj1.hasOwnProperty(propertyName)) {
-				obj3[propertyName] = obj1[propertyName];
-			}
-		}
-		for (propertyName in obj2) {
-			if (obj2.hasOwnProperty(propertyName)) {
-				obj3[propertyName] = obj2[propertyName];
-			}
-		}
-		return obj3;
-	}
+    function _merge_objects(obj1, obj2) {
+        var obj3 = {},
+            propertyName;
+        for (propertyName in obj1) {
+            if (obj1.hasOwnProperty(propertyName)) {
+                obj3[propertyName] = obj1[propertyName];
+            }
+        }
+        for (propertyName in obj2) {
+            if (obj2.hasOwnProperty(propertyName)) {
+                obj3[propertyName] = obj2[propertyName];
+            }
+        }
+        return obj3;
+    }
 
-	function _convertToArray(nodeSet) {
-		try {
-			return Array.prototype.slice.call(nodeSet);
-		}
-		catch (e) {
-			var array = [],
-				i, l = nodeSet.length;
+    function _convertToArray(nodeSet) {
+        try {
+            return Array.prototype.slice.call(nodeSet);
+        } catch (e) {
+            var array = [],
+                i, l = nodeSet.length;
 
-			for (i = 0; i < l; i++) {
-				array.push(nodeSet[i]);
-			}
-			return array;
-		}
-	}
+            for (i = 0; i < l; i++) {
+                array.push(nodeSet[i]);
+            }
+            return array;
+        }
+    }
 
-	function _addClass(element, className) {
-		/* HTML 5 compliant browsers. */
-		if (_supportsClassList) {
-			element.classList.add(className);
-			return;
-		}
-		/* Legacy browsers (IE<10) support. */
-		element.className += (element.className ? ' ' : '') + className;
-	}
+    function _addClass(element, className) {
+        /* HTML 5 compliant browsers. */
+        if (_supportsClassList) {
+            element.classList.add(className);
+            return;
+        }
+        /* Legacy browsers (IE<10) support. */
+        element.className += (element.className ? ' ' : '') + className;
+    }
 
-	function _removeClass(element, className) {
-		/* HTML 5 compliant browsers. */
-		if (_supportsClassList) {
-			element.classList.remove(className);
-			return;
-		}
-		/* Legacy browsers (IE<10) support. */
-		element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ').replace(/^\s+/, '').replace(/\s+$/, '');
-	}
+    function _removeClass(element, className) {
+        /* HTML 5 compliant browsers. */
+        if (_supportsClassList) {
+            element.classList.remove(className);
+            return;
+        }
+        /* Legacy browsers (IE<10) support. */
+        element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ').replace(/^\s+/, '').replace(/\s+$/, '');
+    }
 
-	function _setSrcAndSrcset(target, source, srcsetDataAttribute, srcDataAttribute) {
-		var srcSet = source.getAttribute('data-' + srcsetDataAttribute),
-			src = source.getAttribute('data-' + srcDataAttribute);
-		if (srcSet) {
-			target.setAttribute("srcset", srcSet);
-		}
-		if (src) {
-			target.setAttribute("src", src);
-		}
-	}
+    function _setSources(target, source, srcsetDataAttribute, srcDataAttribute) {
+        var src = source.getAttribute('data-' + srcDataAttribute);
+        var srcSet = source.getAttribute('data-' + srcsetDataAttribute);
+        var tagName = target.tagName;
+        if (tagName === "IMG") {
+            if (src) target.setAttribute("src", src);
+            if (srcSet) target.setAttribute("srcset", srcSet);
+            return;
+        }
+        if (tagName === "IFRAME") {
+            if (src) target.setAttribute("src", src);
+            return;
+        }
+        target.style.backgroundImage = "url(" + src + ")";
+    }
 
-	function _bind(fn, obj) {
-		return function () {
-			return fn.apply(obj, arguments);
-		};
-	}
+    function _bind(fn, obj) {
+        return function() {
+            return fn.apply(obj, arguments);
+        };
+    }
 
 
-	/*
-	 * INITIALIZER
-	 * -----------
-	 */
+    /*
+     * INITIALIZER
+     * -----------
+     */
 
-	function LazyLoad(instanceSettings) {
-		_init();
+    function LazyLoad(instanceSettings) {
+        _init();
 
-		this._settings = _merge_objects(_defaultSettings, instanceSettings);
-		this._queryOriginNode = this._settings.container === window ? document : this._settings.container;
+        this._settings = _merge_objects(_defaultSettings, instanceSettings);
+        this._queryOriginNode = this._settings.container === window ? document : this._settings.container;
 
-		this._previousLoopTime = 0;
-		this._loopTimeout = null;
+        this._previousLoopTime = 0;
+        this._loopTimeout = null;
 
-		this._handleScrollFn = _bind(this.handleScroll, this);
+        this._handleScrollFn = _bind(this.handleScroll, this);
 
-		_addEventListener(window, "resize", this._handleScrollFn);
-		this.update();
+        _addEventListener(window, "resize", this._handleScrollFn);
+        this.update();
+    }
 
-	}
 
+    /*
+     * PRIVATE FUNCTIONS *RELATED* TO A SPECIFIC INSTANCE OF LAZY LOAD
+     * ---------------------------------------------------------------
+     */
 
-	/*
-	 * PRIVATE FUNCTIONS *RELATED* TO A SPECIFIC INSTANCE OF LAZY LOAD
-	 * ---------------------------------------------------------------
-	 */
+    LazyLoad.prototype._showOnLoad = function(element) {
+        var fakeImg,
+            settings = this._settings;
 
-	LazyLoad.prototype._showOnLoad = function (element) {
-		var fakeImg,
-			settings = this._settings;
+        /* If no src attribute given use data:uri. */
+        if (!element.getAttribute("src")) {
+            element.setAttribute("src", settings.placeholder);
+        }
+        /* Creating a new `img` in a DOM fragment. */
+        fakeImg = document.createElement('img');
+        /* Listening to the load event */
+        function loadCallback() {
+            /* As this method is asynchronous, it must be protected against external destroy() calls */
+            if (settings === null) {
+                return;
+            }
+            /* Calling LOAD callback */
+            if (settings.callback_load) {
+                settings.callback_load(element);
+            }
+            _setSources(element, element, settings.data_srcset, settings.data_src);
+            /* Calling SET callback */
+            if (settings.callback_set) {
+                settings.callback_set(element);
+            }
+            _removeClass(element, settings.class_loading);
+            _addClass(element, settings.class_loaded);
+            _removeEventListener(fakeImg, "load", loadCallback);
+        }
 
-		/* If no src attribute given use data:uri. */
-		if (!element.getAttribute("src")) {
-			element.setAttribute("src", settings.placeholder);
-		}
-		/* Creating a new `img` in a DOM fragment. */
-		fakeImg = document.createElement('img');
-		/* Listening to the load event */
-		function loadCallback() {
-			/* As this method is asynchronous, it must be protected against external destroy() calls */
-			if (settings === null) {
-				return;
-			}
-			/* Calling LOAD callback */
-			if (settings.callback_load) {
-				settings.callback_load(element);
-			}
-			_setSrcAndSrcset(element, element, settings.data_srcset, settings.data_src);
-			/* Calling SET callback */
-			if (settings.callback_set) {
-				settings.callback_set(element);
-			}
-			_removeClass(element, settings.class_loading);
-			_addClass(element, settings.class_loaded);
-			_removeEventListener(fakeImg, "load", loadCallback);
-		}
+        _addEventListener(fakeImg, "load", loadCallback);
+        _addClass(element, settings.class_loading);
+        _setSources(fakeImg, element, settings.data_srcset, settings.data_src);
+    };
 
-		_addEventListener(fakeImg, "load", loadCallback);
-		_addClass(element, settings.class_loading);
-		_setSrcAndSrcset(fakeImg, element, settings.data_srcset, settings.data_src);
-	};
+    LazyLoad.prototype._showOnAppear = function(element) {
+        var settings = this._settings;
 
-	LazyLoad.prototype._showOnAppear = function (element) {
-		var settings = this._settings;
+        function loadCallback() {
+            /* As this method is asynchronous, it must be protected against external destroy() calls */
+            if (settings === null) {
+                return;
+            }
+            /* Calling LOAD callback */
+            if (settings.callback_load) {
+                settings.callback_load(element);
+            }
+            _removeClass(element, settings.class_loading);
+            _addClass(element, settings.class_loaded);
+            _removeEventListener(element, "load", loadCallback);
+        }
 
-		function loadCallback() {
-			/* As this method is asynchronous, it must be protected against external destroy() calls */
-			if (settings === null) {
-				return;
-			}
-			/* Calling LOAD callback */
-			if (settings.callback_load) {
-				settings.callback_load(element);
-			}
-			_removeClass(element, settings.class_loading);
-			_addClass(element, settings.class_loaded);
-			_removeEventListener(element, "load", loadCallback);
-		}
+        if (element.tagName === "IMG" || element.tagName === "IFRAME") {
+            _addEventListener(element, "load", loadCallback);
+            _addClass(element, settings.class_loading);
+        }
 
-		_addEventListener(element, "load", loadCallback);
-		_addClass(element, settings.class_loading);
-		_setSrcAndSrcset(element, element, settings.data_srcset, settings.data_src);
-		/* Calling SET callback */
-		if (settings.callback_set) {
-			settings.callback_set(element);
-		}
-	};
+        _setSources(element, element, settings.data_srcset, settings.data_src);
+        /* Calling SET callback */
+        if (settings.callback_set) {
+            settings.callback_set(element);
+        }
+    };
 
-	LazyLoad.prototype._loopThroughElements = function () {
-		var i, element,
-			settings = this._settings,
-			elements = this._elements,
-			elementsLength = (!elements) ? 0 : elements.length,
-			processedIndexes = [];
+    LazyLoad.prototype._loopThroughElements = function() {
+        var i, element,
+            settings = this._settings,
+            elements = this._elements,
+            elementsLength = (!elements) ? 0 : elements.length,
+            processedIndexes = [];
 
-		for (i = 0; i < elementsLength; i++) {
-			element = elements[i];
-			/* If must skip_invisible and element is invisible, skip it */
-			if (settings.skip_invisible && (element.offsetParent === null)) {
-				continue;
-			}
-			if (_isInsideViewport(element, settings.container, settings.threshold)) {
-				/* Forking behaviour depending on show_while_loading (true value is ideal for progressive jpeg). */
-				if (settings.show_while_loading) {
-					this._showOnAppear(element);
-				} else {
-					this._showOnLoad(element);
-				}
-				/* Marking the element as processed. */
-				processedIndexes.push(i);
-				element.wasProcessed = true;
-			}
-		}
-		/* Removing processed elements from this._elements. */
-		while (processedIndexes.length > 0) {
-			elements.splice(processedIndexes.pop(), 1);
-			/* Calling the end loop callback */
-			if (settings.callback_processed) {
-				settings.callback_processed(elements.length);
-			}
-		}
-		/* Stop listening to scroll event when 0 elements remains */
-		if (elementsLength === 0) {
-			this._stopScrollHandler();
-		}
-	};
+        for (i = 0; i < elementsLength; i++) {
+            element = elements[i];
+            /* If must skip_invisible and element is invisible, skip it */
+            if (settings.skip_invisible && (element.offsetParent === null)) {
+                continue;
+            }
+            if (_isInsideViewport(element, settings.container, settings.threshold)) {
+                /* Forking behaviour depending on show_while_loading (true value is ideal for progressive jpeg). */
+                if (settings.show_while_loading) {
+                    this._showOnAppear(element);
+                } else {
+                    this._showOnLoad(element);
+                }
+                /* Marking the element as processed. */
+                processedIndexes.push(i);
+                element.wasProcessed = true;
+            }
+        }
+        /* Removing processed elements from this._elements. */
+        while (processedIndexes.length > 0) {
+            elements.splice(processedIndexes.pop(), 1);
+            /* Calling the end loop callback */
+            if (settings.callback_processed) {
+                settings.callback_processed(elements.length);
+            }
+        }
+        /* Stop listening to scroll event when 0 elements remains */
+        if (elementsLength === 0) {
+            this._stopScrollHandler();
+        }
+    };
 
-	LazyLoad.prototype._purgeElements = function () {
-		var i, element,
-			elements = this._elements,
-			elementsLength = elements.length,
-			elementsToPurge = [];
+    LazyLoad.prototype._purgeElements = function() {
+        var i, element,
+            elements = this._elements,
+            elementsLength = elements.length,
+            elementsToPurge = [];
 
-		for (i = 0; i < elementsLength; i++) {
-			element = elements[i];
-			/* If the element has already been processed, skip it */
-			if (element.wasProcessed) {
-				elementsToPurge.push(i);
-			}
-		}
-		/* Removing elements to purge from this._elements. */
-		while (elementsToPurge.length > 0) {
-			elements.splice(elementsToPurge.pop(), 1);
-		}
-	};
+        for (i = 0; i < elementsLength; i++) {
+            element = elements[i];
+            /* If the element has already been processed, skip it */
+            if (element.wasProcessed) {
+                elementsToPurge.push(i);
+            }
+        }
+        /* Removing elements to purge from this._elements. */
+        while (elementsToPurge.length > 0) {
+            elements.splice(elementsToPurge.pop(), 1);
+        }
+    };
 
-	LazyLoad.prototype._startScrollHandler = function () {
-		if (!this._isHandlingScroll) {
-			this._isHandlingScroll = true;
-			_addEventListener(this._settings.container, "scroll", this._handleScrollFn);
-		}
-	};
+    LazyLoad.prototype._startScrollHandler = function() {
+        if (!this._isHandlingScroll) {
+            this._isHandlingScroll = true;
+            _addEventListener(this._settings.container, "scroll", this._handleScrollFn);
+        }
+    };
 
-	LazyLoad.prototype._stopScrollHandler = function () {
-		if (this._isHandlingScroll) {
-			this._isHandlingScroll = false;
-			_removeEventListener(this._settings.container, "scroll", this._handleScrollFn);
-		}
-	};
+    LazyLoad.prototype._stopScrollHandler = function() {
+        if (this._isHandlingScroll) {
+            this._isHandlingScroll = false;
+            _removeEventListener(this._settings.container, "scroll", this._handleScrollFn);
+        }
+    };
 
 
-	/*
-	 * PUBLIC FUNCTIONS
-	 * ----------------
-	 */
+    /*
+     * PUBLIC FUNCTIONS
+     * ----------------
+     */
 
-	LazyLoad.prototype.handleScroll = function () {
-		var remainingTime,
-			now,
-			throttle;
+    LazyLoad.prototype.handleScroll = function() {
+        var remainingTime,
+            now,
+            throttle;
 
-		// IE8 fix for destroy() malfunctioning
-		if (!this._settings) {
-			return;
-		}
+        // IE8 fix for destroy() malfunctioning
+        if (!this._settings) {
+            return;
+        }
 
-		now = _now();
-		throttle = this._settings.throttle;
+        now = _now();
+        throttle = this._settings.throttle;
 
-		if (throttle !== 0) {
-			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(_bind(function () {
-					this._previousLoopTime = _now();
-					this._loopTimeout = null;
-					this._loopThroughElements();
-				}, this), remainingTime);
-			}
-		}
-		else {
-			this._loopThroughElements();
-		}
-	};
+        if (throttle !== 0) {
+            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(_bind(function() {
+                    this._previousLoopTime = _now();
+                    this._loopTimeout = null;
+                    this._loopThroughElements();
+                }, this), remainingTime);
+            }
+        } else {
+            this._loopThroughElements();
+        }
+    };
 
-	LazyLoad.prototype.update = function () {
-		this._elements = _convertToArray(this._queryOriginNode.querySelectorAll(this._settings.elements_selector));
-		this._purgeElements();
-		this._loopThroughElements();
-		this._startScrollHandler();
-	};
+    LazyLoad.prototype.update = function() {
+        this._elements = _convertToArray(this._queryOriginNode.querySelectorAll(this._settings.elements_selector));
+        this._purgeElements();
+        this._loopThroughElements();
+        this._startScrollHandler();
+    };
 
-	LazyLoad.prototype.destroy = function () {
-		_removeEventListener(window, "resize", this._handleScrollFn);
-		if (this._loopTimeout) {
-			clearTimeout(this._loopTimeout);
-			this._loopTimeout = null;
-		}
-		this._stopScrollHandler();
-		this._elements = null;
-		this._queryOriginNode = null;
-		this._settings = null;
-	};
+    LazyLoad.prototype.destroy = function() {
+        _removeEventListener(window, "resize", this._handleScrollFn);
+        if (this._loopTimeout) {
+            clearTimeout(this._loopTimeout);
+            this._loopTimeout = null;
+        }
+        this._stopScrollHandler();
+        this._elements = null;
+        this._queryOriginNode = null;
+        this._settings = null;
+    };
 
 
-	return LazyLoad;
+    return LazyLoad;
 
 
 }));

dist/lazyload.min.js

@@ -1,3 +0,2 @@
-/*! lazyload 1.5.9 by Andrea "verlok" Verlicchi*/
-!function(a,b){"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.LazyLoad=b()}(this,function(){function a(){q||(m={elements_selector:"img",container:window,threshold:300,throttle:50,data_src:"original",data_srcset:"original-set",class_loading:"loading",class_loaded:"loaded",skip_invisible:!0,show_while_loading:!1,callback_load:null,callback_set:null,callback_processed:null,placeholder:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"},n=!!window.addEventListener,o=!!window.attachEvent,p=!!document.body.classList,q=!0)}function b(a,b,c){return n?void a.addEventListener(b,c):void(o&&(a.attachEvent("on"+b,function(a){return function(){c.call(a,window.event)}}(a)),a=null))}function c(a,b,c){return n?void a.removeEventListener(b,c):void(o&&a.detachEvent("on"+b,c))}function d(a,b,c){function d(){return window.innerWidth||l.documentElement.clientWidth||document.body.clientWidth}function e(){return window.innerHeight||l.documentElement.clientHeight||document.body.clientHeight}function f(a){return a.getBoundingClientRect().top+m-l.documentElement.clientTop}function g(a){return a.getBoundingClientRect().left+n-l.documentElement.clientLeft}function h(){var d;return d=b===window?e()+m:f(b)+b.offsetHeight,d<=f(a)-c}function i(){var e;return e=b===window?d()+window.pageXOffset:g(b)+d(),e<=g(a)-c}function j(){var d;return d=b===window?m:f(b),d>=f(a)+c+a.offsetHeight}function k(){var d;return d=b===window?n:g(b),d>=g(a)+c+a.offsetWidth}var l,m,n;return l=a.ownerDocument,m=window.pageYOffset||l.body.scrollTop,n=window.pageXOffset||l.body.scrollLeft,!(h()||j()||i()||k())}function e(){var a=new Date;return a.getTime()}function f(a,b){var c,d={};for(c in a)a.hasOwnProperty(c)&&(d[c]=a[c]);for(c in b)b.hasOwnProperty(c)&&(d[c]=b[c]);return d}function g(a){try{return Array.prototype.slice.call(a)}catch(b){var c,d=[],e=a.length;for(c=0;e>c;c++)d.push(a[c]);return d}}function h(a,b){return p?void a.classList.add(b):void(a.className+=(a.className?" ":"")+b)}function i(a,b){return p?void a.classList.remove(b):void(a.className=a.className.replace(new RegExp("(^|\\s+)"+b+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,""))}function j(a,b,c,d){var e=b.getAttribute("data-"+c),f=b.getAttribute("data-"+d);e&&a.setAttribute("srcset",e),f&&a.setAttribute("src",f)}function k(a,b){return function(){return a.apply(b,arguments)}}function l(c){a(),this._settings=f(m,c),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._handleScrollFn=k(this.handleScroll,this),b(window,"resize",this._handleScrollFn),this.update()}var m,n,o,p,q=!1;return l.prototype._showOnLoad=function(a){function d(){null!==f&&(f.callback_load&&f.callback_load(a),j(a,a,f.data_srcset,f.data_src),f.callback_set&&f.callback_set(a),i(a,f.class_loading),h(a,f.class_loaded),c(e,"load",d))}var e,f=this._settings;a.getAttribute("src")||a.setAttribute("src",f.placeholder),e=document.createElement("img"),b(e,"load",d),h(a,f.class_loading),j(e,a,f.data_srcset,f.data_src)},l.prototype._showOnAppear=function(a){function d(){null!==e&&(e.callback_load&&e.callback_load(a),i(a,e.class_loading),h(a,e.class_loaded),c(a,"load",d))}var e=this._settings;b(a,"load",d),h(a,e.class_loading),j(a,a,e.data_srcset,e.data_src),e.callback_set&&e.callback_set(a)},l.prototype._loopThroughElements=function(){var a,b,c=this._settings,e=this._elements,f=e?e.length:0,g=[];for(a=0;f>a;a++)b=e[a],c.skip_invisible&&null===b.offsetParent||d(b,c.container,c.threshold)&&(c.show_while_loading?this._showOnAppear(b):this._showOnLoad(b),g.push(a),b.wasProcessed=!0);for(;g.length>0;)e.splice(g.pop(),1),c.callback_processed&&c.callback_processed(e.length);0===f&&this._stopScrollHandler()},l.prototype._purgeElements=function(){var a,b,c=this._elements,d=c.length,e=[];for(a=0;d>a;a++)b=c[a],b.wasProcessed&&e.push(a);for(;e.length>0;)c.splice(e.pop(),1)},l.prototype._startScrollHandler=function(){this._isHandlingScroll||(this._isHandlingScroll=!0,b(this._settings.container,"scroll",this._handleScrollFn))},l.prototype._stopScrollHandler=function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,c(this._settings.container,"scroll",this._handleScrollFn))},l.prototype.handleScroll=function(){var a,b,c;this._settings&&(b=e(),c=this._settings.throttle,0!==c?(a=c-(b-this._previousLoopTime),0>=a||a>c?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=b,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(k(function(){this._previousLoopTime=e(),this._loopTimeout=null,this._loopThroughElements()},this),a))):this._loopThroughElements())},l.prototype.update=function(){this._elements=g(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},l.prototype.destroy=function(){c(window,"resize",this._handleScrollFn),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},l});
-//# sourceMappingURL=lazyload.min.js.map
+!function(a,b){"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.LazyLoad=b()}(this,function(){function a(){q||(m={elements_selector:"img",container:window,threshold:300,throttle:50,data_src:"original",data_srcset:"original-set",class_loading:"loading",class_loaded:"loaded",skip_invisible:!0,show_while_loading:!0,callback_load:null,callback_set:null,callback_processed:null,placeholder:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"},n=!!window.addEventListener,o=!!window.attachEvent,p=!!document.body.classList,q=!0)}function b(a,b,c){return n?void a.addEventListener(b,c):void(o&&(a.attachEvent("on"+b,function(a){return function(){c.call(a,window.event)}}(a)),a=null))}function c(a,b,c){return n?void a.removeEventListener(b,c):void(o&&a.detachEvent("on"+b,c))}function d(a,b,c){function d(){return window.innerWidth||l.documentElement.clientWidth||document.body.clientWidth}function e(){return window.innerHeight||l.documentElement.clientHeight||document.body.clientHeight}function f(a){return a.getBoundingClientRect().top+m-l.documentElement.clientTop}function g(a){return a.getBoundingClientRect().left+n-l.documentElement.clientLeft}function h(){var d;return d=b===window?e()+m:f(b)+b.offsetHeight,d<=f(a)-c}function i(){var e;return e=b===window?d()+window.pageXOffset:g(b)+d(),e<=g(a)-c}function j(){var d;return d=b===window?m:f(b),d>=f(a)+c+a.offsetHeight}function k(){var d;return d=b===window?n:g(b),d>=g(a)+c+a.offsetWidth}var l,m,n;return l=a.ownerDocument,m=window.pageYOffset||l.body.scrollTop,n=window.pageXOffset||l.body.scrollLeft,!(h()||j()||i()||k())}function e(){var a=new Date;return a.getTime()}function f(a,b){var c,d={};for(c in a)a.hasOwnProperty(c)&&(d[c]=a[c]);for(c in b)b.hasOwnProperty(c)&&(d[c]=b[c]);return d}function g(a){try{return Array.prototype.slice.call(a)}catch(e){var b,c=[],d=a.length;for(b=0;b<d;b++)c.push(a[b]);return c}}function h(a,b){return p?void a.classList.add(b):void(a.className+=(a.className?" ":"")+b)}function i(a,b){return p?void a.classList.remove(b):void(a.className=a.className.replace(new RegExp("(^|\\s+)"+b+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,""))}function j(a,b,c,d){var e=b.getAttribute("data-"+d),f=b.getAttribute("data-"+c),g=a.tagName;return"IMG"===g?(e&&a.setAttribute("src",e),void(f&&a.setAttribute("srcset",f))):"IFRAME"===g?void(e&&a.setAttribute("src",e)):void(a.style.backgroundImage="url("+e+")")}function k(a,b){return function(){return a.apply(b,arguments)}}function l(c){a(),this._settings=f(m,c),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._handleScrollFn=k(this.handleScroll,this),b(window,"resize",this._handleScrollFn),this.update()}var m,n,o,p,q=!1;return l.prototype._showOnLoad=function(a){function d(){null!==f&&(f.callback_load&&f.callback_load(a),j(a,a,f.data_srcset,f.data_src),f.callback_set&&f.callback_set(a),i(a,f.class_loading),h(a,f.class_loaded),c(e,"load",d))}var e,f=this._settings;a.getAttribute("src")||a.setAttribute("src",f.placeholder),e=document.createElement("img"),b(e,"load",d),h(a,f.class_loading),j(e,a,f.data_srcset,f.data_src)},l.prototype._showOnAppear=function(a){function d(){null!==e&&(e.callback_load&&e.callback_load(a),i(a,e.class_loading),h(a,e.class_loaded),c(a,"load",d))}var e=this._settings;"IMG"!==a.tagName&&"IFRAME"!==a.tagName||(b(a,"load",d),h(a,e.class_loading)),j(a,a,e.data_srcset,e.data_src),e.callback_set&&e.callback_set(a)},l.prototype._loopThroughElements=function(){var a,b,c=this._settings,e=this._elements,f=e?e.length:0,g=[];for(a=0;a<f;a++)b=e[a],c.skip_invisible&&null===b.offsetParent||d(b,c.container,c.threshold)&&(c.show_while_loading?this._showOnAppear(b):this._showOnLoad(b),g.push(a),b.wasProcessed=!0);for(;g.length>0;)e.splice(g.pop(),1),c.callback_processed&&c.callback_processed(e.length);0===f&&this._stopScrollHandler()},l.prototype._purgeElements=function(){var a,b,c=this._elements,d=c.length,e=[];for(a=0;a<d;a++)b=c[a],b.wasProcessed&&e.push(a);for(;e.length>0;)c.splice(e.pop(),1)},l.prototype._startScrollHandler=function(){this._isHandlingScroll||(this._isHandlingScroll=!0,b(this._settings.container,"scroll",this._handleScrollFn))},l.prototype._stopScrollHandler=function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,c(this._settings.container,"scroll",this._handleScrollFn))},l.prototype.handleScroll=function(){var a,b,c;this._settings&&(b=e(),c=this._settings.throttle,0!==c?(a=c-(b-this._previousLoopTime),a<=0||a>c?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=b,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(k(function(){this._previousLoopTime=e(),this._loopTimeout=null,this._loopThroughElements()},this),a))):this._loopThroughElements())},l.prototype.update=function(){this._elements=g(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},l.prototype.destroy=function(){c(window,"resize",this._handleScrollFn),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},l});
+//# sourceMappingURL=lazyload.min.js.map

dist/vanilla-lazyload.js

@@ -0,0 +0,0 @@ (function (root, factory) {

dist/vanilla-lazyload.min.js

 /*! vanilla-lazyload 1.6.0 by Andrea "verlok" Verlicchi*/
 !function(a,b){"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.LazyLoad=b()}(this,function(){function a(){q||(m={elements_selector:"img",container:window,threshold:300,throttle:50,data_src:"original",data_srcset:"original-set",class_loading:"loading",class_loaded:"loaded",skip_invisible:!0,show_while_loading:!1,callback_load:null,callback_set:null,callback_processed:null,placeholder:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"},n=!!window.addEventListener,o=!!window.attachEvent,p=!!document.body.classList,q=!0)}function b(a,b,c){return n?void a.addEventListener(b,c):void(o&&(a.attachEvent("on"+b,function(a){return function(){c.call(a,window.event)}}(a)),a=null))}function c(a,b,c){return n?void a.removeEventListener(b,c):void(o&&a.detachEvent("on"+b,c))}function d(a,b,c){function d(){return window.innerWidth||l.documentElement.clientWidth||document.body.clientWidth}function e(){return window.innerHeight||l.documentElement.clientHeight||document.body.clientHeight}function f(a){return a.getBoundingClientRect().top+m-l.documentElement.clientTop}function g(a){return a.getBoundingClientRect().left+n-l.documentElement.clientLeft}function h(){var d;return d=b===window?e()+m:f(b)+b.offsetHeight,d<=f(a)-c}function i(){var e;return e=b===window?d()+window.pageXOffset:g(b)+d(),e<=g(a)-c}function j(){var d;return d=b===window?m:f(b),d>=f(a)+c+a.offsetHeight}function k(){var d;return d=b===window?n:g(b),d>=g(a)+c+a.offsetWidth}var l,m,n;return l=a.ownerDocument,m=window.pageYOffset||l.body.scrollTop,n=window.pageXOffset||l.body.scrollLeft,!(h()||j()||i()||k())}function e(){var a=new Date;return a.getTime()}function f(a,b){var c,d={};for(c in a)a.hasOwnProperty(c)&&(d[c]=a[c]);for(c in b)b.hasOwnProperty(c)&&(d[c]=b[c]);return d}function g(a){try{return Array.prototype.slice.call(a)}catch(b){var c,d=[],e=a.length;for(c=0;e>c;c++)d.push(a[c]);return d}}function h(a,b){return p?void a.classList.add(b):void(a.className+=(a.className?" ":"")+b)}function i(a,b){return p?void a.classList.remove(b):void(a.className=a.className.replace(new RegExp("(^|\\s+)"+b+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,""))}function j(a,b,c,d){var e=b.getAttribute("data-"+c),f=b.getAttribute("data-"+d);e&&a.setAttribute("srcset",e),f&&a.setAttribute("src",f)}function k(a,b){return function(){return a.apply(b,arguments)}}function l(c){a(),this._settings=f(m,c),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._handleScrollFn=k(this.handleScroll,this),b(window,"resize",this._handleScrollFn),this.update()}var m,n,o,p,q=!1;return l.prototype._showOnLoad=function(a){function d(){null!==f&&(f.callback_load&&f.callback_load(a),j(a,a,f.data_srcset,f.data_src),f.callback_set&&f.callback_set(a),i(a,f.class_loading),h(a,f.class_loaded),c(e,"load",d))}var e,f=this._settings;a.getAttribute("src")||a.setAttribute("src",f.placeholder),e=document.createElement("img"),b(e,"load",d),h(a,f.class_loading),j(e,a,f.data_srcset,f.data_src)},l.prototype._showOnAppear=function(a){function d(){null!==e&&(e.callback_load&&e.callback_load(a),i(a,e.class_loading),h(a,e.class_loaded),c(a,"load",d))}var e=this._settings;b(a,"load",d),h(a,e.class_loading),j(a,a,e.data_srcset,e.data_src),e.callback_set&&e.callback_set(a)},l.prototype._loopThroughElements=function(){var a,b,c=this._settings,e=this._elements,f=e?e.length:0,g=[];for(a=0;f>a;a++)b=e[a],c.skip_invisible&&null===b.offsetParent||d(b,c.container,c.threshold)&&(c.show_while_loading?this._showOnAppear(b):this._showOnLoad(b),g.push(a),b.wasProcessed=!0);for(;g.length>0;)e.splice(g.pop(),1),c.callback_processed&&c.callback_processed(e.length);0===f&&this._stopScrollHandler()},l.prototype._purgeElements=function(){var a,b,c=this._elements,d=c.length,e=[];for(a=0;d>a;a++)b=c[a],b.wasProcessed&&e.push(a);for(;e.length>0;)c.splice(e.pop(),1)},l.prototype._startScrollHandler=function(){this._isHandlingScroll||(this._isHandlingScroll=!0,b(this._settings.container,"scroll",this._handleScrollFn))},l.prototype._stopScrollHandler=function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,c(this._settings.container,"scroll",this._handleScrollFn))},l.prototype.handleScroll=function(){var a,b,c;this._settings&&(b=e(),c=this._settings.throttle,0!==c?(a=c-(b-this._previousLoopTime),0>=a||a>c?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=b,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(k(function(){this._previousLoopTime=e(),this._loopTimeout=null,this._loopThroughElements()},this),a))):this._loopThroughElements())},l.prototype.update=function(){this._elements=g(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},l.prototype.destroy=function(){c(window,"resize",this._handleScrollFn),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},l});
 //# sourceMappingURL=vanilla-lazyload.min.js.map

Gruntfile.js

@@ -5,25 +5,12 @@ module.exports = function(grunt) {
 		pkg: grunt.file.readJSON('package.json'),
-		concat: {
-			options: {
-				separator: ';'
-			},
-			dist: {
-				src: ['src/**/*.js'],
-				dest: 'dist/<%= pkg.name %>.js'
-			}
-		},
 		uglify: {
 			options: {
-				banner: '/*! <%= pkg.name %> <%= pkg.version %> by <%= pkg.author %>*/',
+				banner: '<%= banner %>',
 				sourceMap: true
 			},
 			dist: {
-				files: {
-					'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
-				}
+				src: 'src/lazyload.js',
+				dest: 'dist/lazyload.min.js'
 			}
 		},
-		qunit: {
-			files: ['test/**/*.html']
-		},
 		jshint: {
@@ -50,8 +37,5 @@ files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
 	grunt.loadNpmTasks('grunt-contrib-watch');
-	grunt.loadNpmTasks('grunt-contrib-concat');
 
-	grunt.registerTask('test', ['jshint']);
+	grunt.registerTask('default', ['jshint', 'uglify', 'watch']);
 
-	grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'watch']);
-
 };

license.md

@@ -0,0 +0,0 @@ The MIT License (MIT)

package.json

 {
   "name": "vanilla-lazyload",
-  "version": "1.6.0",
+  "version": "2.0.0",
   "description": "LazyLoad is a fast, lightweight and flexible script for loading images only when they're about to enter the viewport of a scrollable area, with an excellent support to the progressive JPEG image format. Typescript module definition is available.",
@@ -5,0 +5,0 @@ "main": "dist/lazyload.min.js",

README.md

@@ -1,2 +0,2 @@
-# LazyLoad
+# LazyLoad (aka Vanilla LazyLoad)
 
@@ -32,2 +32,15 @@ _LazyLoad_ is a fast, lightweight and flexible script for **loading images only when they're about to enter the viewport** of a scrollable area, which **supports the `srcset` attribute** and with and **takes best advantage from the progressive JPEG image format** (which is [good for performance](http://blog.patrickmeenan.com/2013/06/progressive-jpegs-ftw.html)).
 
+To allow the lazyload script to display images where JavaScript isn't
+available, simply add a ```noscript```tag:
+
+```html
+<img data-original="/your/image1.jpg" width="100" height="172">
+<noscript><img src="/your/image1.jpg" width="100" height="172"></noscript>
+<img data-original="/your/image2.jpg" width="100" height="172">
+<noscript><img src="/your/image2.jpg" width="100" height="172"></noscript>
+<img data-original="/your/image3.jpg" width="100" height="172">
+<noscript><img src="/your/image13jpg" width="100" height="172"></noscript>
+```
+
+
 Or if you want to use `srcset`:
@@ -37,10 +50,10 @@
 <img data-original="/your/image1.jpg"
-     data-original-set="/your/image1.jpg 1x, /your/[e-mail] 2x"
-     width="100" height="172">
+    data-original-set="/your/image1.jpg 1x, /your/[e-mail] 2x"
+    width="100" height="172">
 <img data-original="/your/image2.jpg"
-     data-original-set="/your/image2.jpg 1x, /your/[e-mail] 2x"
-     width="100" height="172">
+    data-original-set="/your/image2.jpg 1x, /your/[e-mail] 2x"
+    width="100" height="172">
 <img data-original="/your/image3.jpg"
-     data-original-set="/your/image3.jpg 1x, /your/[e-mail] 2x"
-     width="100" height="172">
+    data-original-set="/your/image3.jpg 1x, /your/[e-mail] 2x"
+    width="100" height="172">
 ```
@@ -52,12 +65,47 @@
 <img data-original="/your/image1.jpg"
-     data-original-set="/your/image1.jpg 200w, /your/[e-mail] 400w"
-     sizes="(min-width: 20em) 35vw, 100vw">
+    data-original-set="/your/image1.jpg 200w, /your/[e-mail] 400w"
+    sizes="(min-width: 20em) 35vw, 100vw">
 <img data-original="/your/image2.jpg"
-     data-original-set="/your/image2.jpg 200x, /your/[e-mail] 400w"
-     sizes="(min-width: 20em) 35vw, 100vw">
+    data-original-set="/your/image2.jpg 200x, /your/[e-mail] 400w"
+    sizes="(min-width: 20em) 35vw, 100vw">
 <img data-original="/your/image3.jpg"
-     data-original-set="/your/image3.jpg 200w, /your/[e-mail] 400w"
-     sizes="(min-width: 20em) 35vw, 100vw">
+    data-original-set="/your/image3.jpg 200w, /your/[e-mail] 400w"
+    sizes="(min-width: 20em) 35vw, 100vw">
 ```
 
+Or, for the kitchen sink approach:
+
+```html
+<img data-original="/your/image1.jpg"
+    data-original-set="/your/image1.jpg 200w, /your/[e-mail] 400w"
+    sizes="(min-width: 20em) 35vw, 100vw">
+    <noscript>
+        <picture alt="your alt text">
+            <img src="/your/image1.jpg"
+                srcset="/your/image1.jpg 200w, /your/[e-mail] 400w"
+                alt="your alt text">
+        </picture>
+    </noscript>
+<img data-original="/your/image2.jpg"
+    data-original-set="/your/image2.jpg 200x, /your/[e-mail] 400w"
+    sizes="(min-width: 20em) 35vw, 100vw">
+    <noscript>
+        <picture alt="your alt text">
+            <img src="/your/image2.jpg"
+                srcset="/your/image2.jpg 200w, /your/[e-mail] 400w"
+                alt="your alt text">
+        </picture>
+    </noscript>
+<img data-original="/your/image3.jpg"
+    data-original-set="/your/image3.jpg 200w, /your/[e-mail] 400w"
+    sizes="(min-width: 20em) 35vw, 100vw">
+    <noscript>
+        <picture alt="your alt text">
+            <img src="/your/image3.jpg"
+                srcset="/your/image3.jpg 200w, /your/[e-mail] 400w"
+                alt="your alt text">
+        </picture>
+    </noscript>
+```
+
 **Note** that not all the images in the page needs to be lazy loaded. You can leave the first images (the amount that you're quite sure that fits in the majority of viewports) loaded normally, then start lazy loading the rest.
@@ -71,4 +119,4 @@
 <body>
-	<!-- Your content ... -->
-	<script src="lazyload.min.js"></script>
+    <!-- Your content ... -->
+    <script src="lazyload.min.js"></script>
 </body>
@@ -89,4 +137,4 @@ ```
 var myLazyLoad = new LazyLoad({
-	// example of options object -> see options section
-	threshold: 500,
+    // example of options object -> see options section
+    threshold: 500,
     container: document.getElementById('scrollPane'),
@@ -97,3 +145,2 @@ elements_selector: ".showCase img",
     data_srcset: "srcset",
-    show_while_loading: true,
     callback_set: function() { /* ... */ }
@@ -132,3 +179,3 @@ });
 
-Furthermore, if we are using the `show_while_loading` option, we need to deal with a Firefox anomaly that still shows the  "broken image" icon while the image is loading. The CSS code that does this trick is the following:
+Furthermore, if we are using the `show_while_loading` option (which defaults to `true`), we need to deal with a Firefox anomaly that still shows the "broken image" icon while the image is loading. The CSS code that does this trick is the following:
 
@@ -159,6 +206,6 @@ ```css
 | `data_srcset` | The name of the data attribute containing the original image source set. The "data-" is automatically added. If you also need to add the `sizes` attribute, you can do it directly to you `img` tag, as [`sizes` gets ignored when the `srcset` attribute is missing](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) . | `"original-set"` |
-| `class_loading` | The class applied to the elements while the loading is in progress | `"loading"` |
-| `class_loaded` | The class applied to the elements when the loading is complete | `"loaded"` |
+| `class_loading` | The class applied to the `img` or `iframe` elements while the loading is in progress | `"loading"` |
+| `class_loaded` | The class applied to the `img` or `iframe` elements when the loading is complete | `"loaded"` |
 | `skip_invisible` | Specifies whether the script has to consider invisible images or not | `true` |
-| `show_while_loading` | Specifies whether the script must show the images while they are loading. Set it to true when you use progressive JPEG format for your images. **Note**: to make the image visible while loading, you will have to avoid using the `src` attribute in the `img` tag | `false` |
+| `show_while_loading` | Specifies whether the script must show the images while they are loading. Set it to `true` when you use progressive JPEG format for your images, to `false` if you want to wait until the loading images is loaded to display it. **Note**: to make the image visible while loading, you will have to avoid setting the `src` attribute in the `img` tag | `true` |
 | `callback_load` | A function to be called when an image was loaded. | `null` |
@@ -199,8 +246,14 @@ | `callback_set` | A function to be called when the src of an image is set in the DOM. | `null` |
 
-#### Show images while loading demo
+#### Lazy loading `iframe` demo
 
-The images are in the page body, but as they are stored in the **Progressive JPEG** format we want them to be shown **while loading** and not only when they are fully loaded.
+To lazy load `iframe`s, set the `elements_selector` to `iframe`s and optionally change the `data_src` option (default `data-original`) to define which data attribute will contain the source of the `iframe`.
 
-[See it in action](http://verlok.github.io/lazyload/demos/show_while_loading.html) | [View source](https://github.com/verlok/lazyload/blob/master/demos/show_while_loading.html)
+[See it in action](http://verlok.github.io/lazyload/demos/iframes.html) | [View source](https://github.com/verlok/lazyload/blob/master/demos/iframes.html)
 
+#### Using background images demo
+
+To make lazy load use background images, set the `elements_selector` to whatever tag you want except `img` and `iframe`. The image will be loaded from the URL specified in the data attribute defined by the `data_src` option (default `data-original`).
+
+[See it in action](http://verlok.github.io/lazyload/demos/background_images.html) | [View source](https://github.com/verlok/lazyload/blob/master/demos/background_images.html)
+
 #### Single scrolling container demo
@@ -259,2 +312,2 @@
 npm install vanilla-lazyload
-```
+```

src/lazyload.js

@@ -1,443 +0,449 @@
-(function (root, factory) {
-	if (typeof define === 'function' && define.amd) {
-		define([], factory);
-	} else if (typeof exports === 'object') {
-		module.exports = factory();
-	} else {
-		root.LazyLoad = factory();
-	}
-}(this, function () {
+(function(root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define([], factory);
+    } else if (typeof exports === 'object') {
+        module.exports = factory();
+    } else {
+        root.LazyLoad = factory();
+    }
+}(this, function() {
 
-	var _defaultSettings,
-		_supportsAddEventListener,
-		_supportsAttachEvent,
-		_supportsClassList,
-		_isInitialized = false;
+    var _defaultSettings,
+        _supportsAddEventListener,
+        _supportsAttachEvent,
+        _supportsClassList,
+        _isInitialized = false;
 
 
-	/*
-	 * PRIVATE FUNCTIONS *NOT RELATED* TO A SPECIFIC INSTANCE OF LAZY LOAD
-	 * -------------------------------------------------------------------
-	 */
+    /*
+     * PRIVATE FUNCTIONS *NOT RELATED* TO A SPECIFIC INSTANCE OF LAZY LOAD
+     * -------------------------------------------------------------------
+     */
 
-	function _init() {
-		if(!_isInitialized) {
-			_defaultSettings = {
-				elements_selector: "img",
-				container: window,
-				threshold: 300,
-				throttle: 50,
-				data_src: "original",
-				data_srcset: "original-set",
-				class_loading: "loading",
-				class_loaded: "loaded",
-				skip_invisible: true,
-				show_while_loading: false,
-				callback_load: null,
-				callback_set: null,
-				callback_processed: null,
-				placeholder: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-			};
-			_supportsAddEventListener = !!window.addEventListener;
-			_supportsAttachEvent = !!window.attachEvent;
-			_supportsClassList = !!document.body.classList;
+    function _init() {
+        if (!_isInitialized) {
+            _defaultSettings = {
+                elements_selector: "img",
+                container: window,
+                threshold: 300,
+                throttle: 50,
+                data_src: "original",
+                data_srcset: "original-set",
+                class_loading: "loading",
+                class_loaded: "loaded",
+                skip_invisible: true,
+                show_while_loading: true,
+                callback_load: null,
+                callback_set: null,
+                callback_processed: null,
+                placeholder: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            };
+            _supportsAddEventListener = !!window.addEventListener;
+            _supportsAttachEvent = !!window.attachEvent;
+            _supportsClassList = !!document.body.classList;
 
-			_isInitialized = true;
-		}
-	}
+            _isInitialized = true;
+        }
+    }
 
-	function _addEventListener(element, eventName, callback) {
-		// Use addEventListener if available
-		if (_supportsAddEventListener) {
-			element.addEventListener(eventName, callback);
-			return;
-		}
-		// Otherwise use attachEvent, set this and event
-		if (_supportsAttachEvent) {
-			element.attachEvent('on' + eventName, (function (el) {
-				return function () {
-					callback.call(el, window.event);
-				};
-			}(element)));
-			// Break closure and primary circular reference to element
-			element = null;
-		}
-	}
+    function _addEventListener(element, eventName, callback) {
+        // Use addEventListener if available
+        if (_supportsAddEventListener) {
+            element.addEventListener(eventName, callback);
+            return;
+        }
+        // Otherwise use attachEvent, set this and event
+        if (_supportsAttachEvent) {
+            element.attachEvent('on' + eventName, (function(el) {
+                return function() {
+                    callback.call(el, window.event);
+                };
+            }(element)));
+            // Break closure and primary circular reference to element
+            element = null;
+        }
+    }
 
-	function _removeEventListener(element, eventName, callback) {
-		// Use removeEventListener if available
-		if (_supportsAddEventListener) {
-			element.removeEventListener(eventName, callback);
-			return;
-		}
-		// Otherwise use detachEvent
-		if (_supportsAttachEvent) {
-			element.detachEvent('on' + eventName, callback);
-		}
-	}
+    function _removeEventListener(element, eventName, callback) {
+        // Use removeEventListener if available
+        if (_supportsAddEventListener) {
+            element.removeEventListener(eventName, callback);
+            return;
+        }
+        // Otherwise use detachEvent
+        if (_supportsAttachEvent) {
+            element.detachEvent('on' + eventName, callback);
+        }
+    }
 
-	function _isInsideViewport(element, container, threshold) {
+    function _isInsideViewport(element, container, threshold) {
 
-		var ownerDocument, documentTop, documentLeft;
+        var ownerDocument, documentTop, documentLeft;
 
-		function _getDocumentWidth() {
-			return window.innerWidth || (ownerDocument.documentElement.clientWidth || document.body.clientWidth);
-		}
+        function _getDocumentWidth() {
+            return window.innerWidth || (ownerDocument.documentElement.clientWidth || document.body.clientWidth);
+        }
 
-		function _getDocumentHeight() {
-			return window.innerHeight || (ownerDocument.documentElement.clientHeight || document.body.clientHeight);
-		}
+        function _getDocumentHeight() {
+            return window.innerHeight || (ownerDocument.documentElement.clientHeight || document.body.clientHeight);
+        }
 
-		function _getTopOffset(element) {
-			return element.getBoundingClientRect().top + documentTop - ownerDocument.documentElement.clientTop;
-		}
+        function _getTopOffset(element) {
+            return element.getBoundingClientRect().top + documentTop - ownerDocument.documentElement.clientTop;
+        }
 
-		function _getLeftOffset(element) {
-			return element.getBoundingClientRect().left + documentLeft - ownerDocument.documentElement.clientLeft;
-		}
+        function _getLeftOffset(element) {
+            return element.getBoundingClientRect().left + documentLeft - ownerDocument.documentElement.clientLeft;
+        }
 
-		function _isBelowViewport() {
-			var fold;
-			if (container === window) {
-				fold = _getDocumentHeight() + documentTop;
-			} else {
-				fold = _getTopOffset(container) + container.offsetHeight;
-			}
-			return fold <= _getTopOffset(element) - threshold;
-		}
+        function _isBelowViewport() {
+            var fold;
+            if (container === window) {
+                fold = _getDocumentHeight() + documentTop;
+            } else {
+                fold = _getTopOffset(container) + container.offsetHeight;
+            }
+            return fold <= _getTopOffset(element) - threshold;
+        }
 
-		function _isAtRightOfViewport() {
-			var fold;
-			if (container === window) {
-				fold = _getDocumentWidth() + window.pageXOffset;
-			} else {
-				fold = _getLeftOffset(container) + _getDocumentWidth();
-			}
-			return fold <= _getLeftOffset(element) - threshold;
-		}
+        function _isAtRightOfViewport() {
+            var fold;
+            if (container === window) {
+                fold = _getDocumentWidth() + window.pageXOffset;
+            } else {
+                fold = _getLeftOffset(container) + _getDocumentWidth();
+            }
+            return fold <= _getLeftOffset(element) - threshold;
+        }
 
-		function _isAboveViewport() {
-			var fold;
-			if (container === window) {
-				fold = documentTop;
-			} else {
-				fold = _getTopOffset(container);
-			}
-			return fold >= _getTopOffset(element) + threshold + element.offsetHeight;
-		}
+        function _isAboveViewport() {
+            var fold;
+            if (container === window) {
+                fold = documentTop;
+            } else {
+                fold = _getTopOffset(container);
+            }
+            return fold >= _getTopOffset(element) + threshold + element.offsetHeight;
+        }
 
-		function _isAtLeftOfViewport() {
-			var fold;
-			if (container === window) {
-				fold = documentLeft;
-			} else {
-				fold = _getLeftOffset(container);
-			}
-			return fold >= _getLeftOffset(element) + threshold + element.offsetWidth;
-		}
+        function _isAtLeftOfViewport() {
+            var fold;
+            if (container === window) {
+                fold = documentLeft;
+            } else {
+                fold = _getLeftOffset(container);
+            }
+            return fold >= _getLeftOffset(element) + threshold + element.offsetWidth;
+        }
 
-		ownerDocument = element.ownerDocument;
-		documentTop = window.pageYOffset || ownerDocument.body.scrollTop;
-		documentLeft = window.pageXOffset || ownerDocument.body.scrollLeft;
+        ownerDocument = element.ownerDocument;
+        documentTop = window.pageYOffset || ownerDocument.body.scrollTop;
+        documentLeft = window.pageXOffset || ownerDocument.body.scrollLeft;
 
-		return !_isBelowViewport() && !_isAboveViewport() && !_isAtRightOfViewport() && !_isAtLeftOfViewport();
-	}
+        return !_isBelowViewport() && !_isAboveViewport() && !_isAtRightOfViewport() && !_isAtLeftOfViewport();
+    }
 
-	function _now() {
-		var d = new Date();
-		return d.getTime();
-	}
+    function _now() {
+        var d = new Date();
+        return d.getTime();
+    }
 
-	function _merge_objects(obj1, obj2) {
-		var obj3 = {}, propertyName;
-		for (propertyName in obj1) {
-			if (obj1.hasOwnProperty(propertyName)) {
-				obj3[propertyName] = obj1[propertyName];
-			}
-		}
-		for (propertyName in obj2) {
-			if (obj2.hasOwnProperty(propertyName)) {
-				obj3[propertyName] = obj2[propertyName];
-			}
-		}
-		return obj3;
-	}
+    function _merge_objects(obj1, obj2) {
+        var obj3 = {},
+            propertyName;
+        for (propertyName in obj1) {
+            if (obj1.hasOwnProperty(propertyName)) {
+                obj3[propertyName] = obj1[propertyName];
+            }
+        }
+        for (propertyName in obj2) {
+            if (obj2.hasOwnProperty(propertyName)) {
+                obj3[propertyName] = obj2[propertyName];
+            }
+        }
+        return obj3;
+    }
 
-	function _convertToArray(nodeSet) {
-		try {
-			return Array.prototype.slice.call(nodeSet);
-		}
-		catch (e) {
-			var array = [],
-				i, l = nodeSet.length;
+    function _convertToArray(nodeSet) {
+        try {
+            return Array.prototype.slice.call(nodeSet);
+        } catch (e) {
+            var array = [],
+                i, l = nodeSet.length;
 
-			for (i = 0; i < l; i++) {
-				array.push(nodeSet[i]);
-			}
-			return array;
-		}
-	}
+            for (i = 0; i < l; i++) {
+                array.push(nodeSet[i]);
+            }
+            return array;
+        }
+    }
 
-	function _addClass(element, className) {
-		/* HTML 5 compliant browsers. */
-		if (_supportsClassList) {
-			element.classList.add(className);
-			return;
-		}
-		/* Legacy browsers (IE<10) support. */
-		element.className += (element.className ? ' ' : '') + className;
-	}
+    function _addClass(element, className) {
+        /* HTML 5 compliant browsers. */
+        if (_supportsClassList) {
+            element.classList.add(className);
+            return;
+        }
+        /* Legacy browsers (IE<10) support. */
+        element.className += (element.className ? ' ' : '') + className;
+    }
 
-	function _removeClass(element, className) {
-		/* HTML 5 compliant browsers. */
-		if (_supportsClassList) {
-			element.classList.remove(className);
-			return;
-		}
-		/* Legacy browsers (IE<10) support. */
-		element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ').replace(/^\s+/, '').replace(/\s+$/, '');
-	}
+    function _removeClass(element, className) {
+        /* HTML 5 compliant browsers. */
+        if (_supportsClassList) {
+            element.classList.remove(className);
+            return;
+        }
+        /* Legacy browsers (IE<10) support. */
+        element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ').replace(/^\s+/, '').replace(/\s+$/, '');
+    }
 
-	function _setSrcAndSrcset(target, source, srcsetDataAttribute, srcDataAttribute) {
-		var srcSet = source.getAttribute('data-' + srcsetDataAttribute),
-			src = source.getAttribute('data-' + srcDataAttribute);
-		if (srcSet) {
-			target.setAttribute("srcset", srcSet);
-		}
-		if (src) {
-			target.setAttribute("src", src);
-		}
-	}
+    function _setSources(target, source, srcsetDataAttribute, srcDataAttribute) {
+        var src = source.getAttribute('data-' + srcDataAttribute);
+        var srcSet = source.getAttribute('data-' + srcsetDataAttribute);
+        var tagName = target.tagName;
+        if (tagName === "IMG") {
+            if (src) target.setAttribute("src", src);
+            if (srcSet) target.setAttribute("srcset", srcSet);
+            return;
+        }
+        if (tagName === "IFRAME") {
+            if (src) target.setAttribute("src", src);
+            return;
+        }
+        target.style.backgroundImage = "url(" + src + ")";
+    }
 
-	function _bind(fn, obj) {
-		return function () {
-			return fn.apply(obj, arguments);
-		};
-	}
+    function _bind(fn, obj) {
+        return function() {
+            return fn.apply(obj, arguments);
+        };
+    }
 
 
-	/*
-	 * INITIALIZER
-	 * -----------
-	 */
+    /*
+     * INITIALIZER
+     * -----------
+     */
 
-	function LazyLoad(instanceSettings) {
-		_init();
+    function LazyLoad(instanceSettings) {
+        _init();
 
-		this._settings = _merge_objects(_defaultSettings, instanceSettings);
-		this._queryOriginNode = this._settings.container === window ? document : this._settings.container;
+        this._settings = _merge_objects(_defaultSettings, instanceSettings);
+        this._queryOriginNode = this._settings.container === window ? document : this._settings.container;
 
-		this._previousLoopTime = 0;
-		this._loopTimeout = null;
+        this._previousLoopTime = 0;
+        this._loopTimeout = null;
 
-		this._handleScrollFn = _bind(this.handleScroll, this);
+        this._handleScrollFn = _bind(this.handleScroll, this);
 
-		_addEventListener(window, "resize", this._handleScrollFn);
-		this.update();
+        _addEventListener(window, "resize", this._handleScrollFn);
+        this.update();
+    }
 
-	}
 
+    /*
+     * PRIVATE FUNCTIONS *RELATED* TO A SPECIFIC INSTANCE OF LAZY LOAD
+     * ---------------------------------------------------------------
+     */
 
-	/*
-	 * PRIVATE FUNCTIONS *RELATED* TO A SPECIFIC INSTANCE OF LAZY LOAD
-	 * ---------------------------------------------------------------
-	 */
+    LazyLoad.prototype._showOnLoad = function(element) {
+        var fakeImg,
+            settings = this._settings;
 
-	LazyLoad.prototype._showOnLoad = function (element) {
-		var fakeImg,
-			settings = this._settings;
+        /* If no src attribute given use data:uri. */
+        if (!element.getAttribute("src")) {
+            element.setAttribute("src", settings.placeholder);
+        }
+        /* Creating a new `img` in a DOM fragment. */
+        fakeImg = document.createElement('img');
+        /* Listening to the load event */
+        function loadCallback() {
+            /* As this method is asynchronous, it must be protected against external destroy() calls */
+            if (settings === null) {
+                return;
+            }
+            /* Calling LOAD callback */
+            if (settings.callback_load) {
+                settings.callback_load(element);
+            }
+            _setSources(element, element, settings.data_srcset, settings.data_src);
+            /* Calling SET callback */
+            if (settings.callback_set) {
+                settings.callback_set(element);
+            }
+            _removeClass(element, settings.class_loading);
+            _addClass(element, settings.class_loaded);
+            _removeEventListener(fakeImg, "load", loadCallback);
+        }
 
-		/* If no src attribute given use data:uri. */
-		if (!element.getAttribute("src")) {
-			element.setAttribute("src", settings.placeholder);
-		}
-		/* Creating a new `img` in a DOM fragment. */
-		fakeImg = document.createElement('img');
-		/* Listening to the load event */
-		function loadCallback() {
-			/* As this method is asynchronous, it must be protected against external destroy() calls */
-			if (settings === null) {
-				return;
-			}
-			/* Calling LOAD callback */
-			if (settings.callback_load) {
-				settings.callback_load(element);
-			}
-			_setSrcAndSrcset(element, element, settings.data_srcset, settings.data_src);
-			/* Calling SET callback */
-			if (settings.callback_set) {
-				settings.callback_set(element);
-			}
-			_removeClass(element, settings.class_loading);
-			_addClass(element, settings.class_loaded);
-			_removeEventListener(fakeImg, "load", loadCallback);
-		}
+        _addEventListener(fakeImg, "load", loadCallback);
+        _addClass(element, settings.class_loading);
+        _setSources(fakeImg, element, settings.data_srcset, settings.data_src);
+    };
 
-		_addEventListener(fakeImg, "load", loadCallback);
-		_addClass(element, settings.class_loading);
-		_setSrcAndSrcset(fakeImg, element, settings.data_srcset, settings.data_src);
-	};
+    LazyLoad.prototype._showOnAppear = function(element) {
+        var settings = this._settings;
 
-	LazyLoad.prototype._showOnAppear = function (element) {
-		var settings = this._settings;
+        function loadCallback() {
+            /* As this method is asynchronous, it must be protected against external destroy() calls */
+            if (settings === null) {
+                return;
+            }
+            /* Calling LOAD callback */
+            if (settings.callback_load) {
+                settings.callback_load(element);
+            }
+            _removeClass(element, settings.class_loading);
+            _addClass(element, settings.class_loaded);
+            _removeEventListener(element, "load", loadCallback);
+        }
 
-		function loadCallback() {
-			/* As this method is asynchronous, it must be protected against external destroy() calls */
-			if (settings === null) {
-				return;
-			}
-			/* Calling LOAD callback */
-			if (settings.callback_load) {
-				settings.callback_load(element);
-			}
-			_removeClass(element, settings.class_loading);
-			_addClass(element, settings.class_loaded);
-			_removeEventListener(element, "load", loadCallback);
-		}
+        if (element.tagName === "IMG" || element.tagName === "IFRAME") {
+            _addEventListener(element, "load", loadCallback);
+            _addClass(element, settings.class_loading);
+        }
 
-		_addEventListener(element, "load", loadCallback);
-		_addClass(element, settings.class_loading);
-		_setSrcAndSrcset(element, element, settings.data_srcset, settings.data_src);
-		/* Calling SET callback */
-		if (settings.callback_set) {
-			settings.callback_set(element);
-		}
-	};
+        _setSources(element, element, settings.data_srcset, settings.data_src);
+        /* Calling SET callback */
+        if (settings.callback_set) {
+            settings.callback_set(element);
+        }
+    };
 
-	LazyLoad.prototype._loopThroughElements = function () {
-		var i, element,
-			settings = this._settings,
-			elements = this._elements,
-			elementsLength = (!elements) ? 0 : elements.length,
-			processedIndexes = [];
+    LazyLoad.prototype._loopThroughElements = function() {
+        var i, element,
+            settings = this._settings,
+            elements = this._elements,
+            elementsLength = (!elements) ? 0 : elements.length,
+            processedIndexes = [];
 
-		for (i = 0; i < elementsLength; i++) {
-			element = elements[i];
-			/* If must skip_invisible and element is invisible, skip it */
-			if (settings.skip_invisible && (element.offsetParent === null)) {
-				continue;
-			}
-			if (_isInsideViewport(element, settings.container, settings.threshold)) {
-				/* Forking behaviour depending on show_while_loading (true value is ideal for progressive jpeg). */
-				if (settings.show_while_loading) {
-					this._showOnAppear(element);
-				} else {
-					this._showOnLoad(element);
-				}
-				/* Marking the element as processed. */
-				processedIndexes.push(i);
-				element.wasProcessed = true;
-			}
-		}
-		/* Removing processed elements from this._elements. */
-		while (processedIndexes.length > 0) {
-			elements.splice(processedIndexes.pop(), 1);
-			/* Calling the end loop callback */
-			if (settings.callback_processed) {
-				settings.callback_processed(elements.length);
-			}
-		}
-		/* Stop listening to scroll event when 0 elements remains */
-		if (elementsLength === 0) {
-			this._stopScrollHandler();
-		}
-	};
+        for (i = 0; i < elementsLength; i++) {
+            element = elements[i];
+            /* If must skip_invisible and element is invisible, skip it */
+            if (settings.skip_invisible && (element.offsetParent === null)) {
+                continue;
+            }
+            if (_isInsideViewport(element, settings.container, settings.threshold)) {
+                /* Forking behaviour depending on show_while_loading (true value is ideal for progressive jpeg). */
+                if (settings.show_while_loading) {
+                    this._showOnAppear(element);
+                } else {
+                    this._showOnLoad(element);
+                }
+                /* Marking the element as processed. */
+                processedIndexes.push(i);
+                element.wasProcessed = true;
+            }
+        }
+        /* Removing processed elements from this._elements. */
+        while (processedIndexes.length > 0) {
+            elements.splice(processedIndexes.pop(), 1);
+            /* Calling the end loop callback */
+            if (settings.callback_processed) {
+                settings.callback_processed(elements.length);
+            }
+        }
+        /* Stop listening to scroll event when 0 elements remains */
+        if (elementsLength === 0) {
+            this._stopScrollHandler();
+        }
+    };
 
-	LazyLoad.prototype._purgeElements = function () {
-		var i, element,
-			elements = this._elements,
-			elementsLength = elements.length,
-			elementsToPurge = [];
+    LazyLoad.prototype._purgeElements = function() {
+        var i, element,
+            elements = this._elements,
+            elementsLength = elements.length,
+            elementsToPurge = [];
 
-		for (i = 0; i < elementsLength; i++) {
-			element = elements[i];
-			/* If the element has already been processed, skip it */
-			if (element.wasProcessed) {
-				elementsToPurge.push(i);
-			}
-		}
-		/* Removing elements to purge from this._elements. */
-		while (elementsToPurge.length > 0) {
-			elements.splice(elementsToPurge.pop(), 1);
-		}
-	};
+        for (i = 0; i < elementsLength; i++) {
+            element = elements[i];
+            /* If the element has already been processed, skip it */
+            if (element.wasProcessed) {
+                elementsToPurge.push(i);
+            }
+        }
+        /* Removing elements to purge from this._elements. */
+        while (elementsToPurge.length > 0) {
+            elements.splice(elementsToPurge.pop(), 1);
+        }
+    };
 
-	LazyLoad.prototype._startScrollHandler = function () {
-		if (!this._isHandlingScroll) {
-			this._isHandlingScroll = true;
-			_addEventListener(this._settings.container, "scroll", this._handleScrollFn);
-		}
-	};
+    LazyLoad.prototype._startScrollHandler = function() {
+        if (!this._isHandlingScroll) {
+            this._isHandlingScroll = true;
+            _addEventListener(this._settings.container, "scroll", this._handleScrollFn);
+        }
+    };
 
-	LazyLoad.prototype._stopScrollHandler = function () {
-		if (this._isHandlingScroll) {
-			this._isHandlingScroll = false;
-			_removeEventListener(this._settings.container, "scroll", this._handleScrollFn);
-		}
-	};
+    LazyLoad.prototype._stopScrollHandler = function() {
+        if (this._isHandlingScroll) {
+            this._isHandlingScroll = false;
+            _removeEventListener(this._settings.container, "scroll", this._handleScrollFn);
+        }
+    };
 
 
-	/*
-	 * PUBLIC FUNCTIONS
-	 * ----------------
-	 */
+    /*
+     * PUBLIC FUNCTIONS
+     * ----------------
+     */
 
-	LazyLoad.prototype.handleScroll = function () {
-		var remainingTime,
-			now,
-			throttle;
+    LazyLoad.prototype.handleScroll = function() {
+        var remainingTime,
+            now,
+            throttle;
 
-		// IE8 fix for destroy() malfunctioning
-		if (!this._settings) {
-			return;
-		}
+        // IE8 fix for destroy() malfunctioning
+        if (!this._settings) {
+            return;
+        }
 
-		now = _now();
-		throttle = this._settings.throttle;
+        now = _now();
+        throttle = this._settings.throttle;
 
-		if (throttle !== 0) {
-			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(_bind(function () {
-					this._previousLoopTime = _now();
-					this._loopTimeout = null;
-					this._loopThroughElements();
-				}, this), remainingTime);
-			}
-		}
-		else {
-			this._loopThroughElements();
-		}
-	};
+        if (throttle !== 0) {
+            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(_bind(function() {
+                    this._previousLoopTime = _now();
+                    this._loopTimeout = null;
+                    this._loopThroughElements();
+                }, this), remainingTime);
+            }
+        } else {
+            this._loopThroughElements();
+        }
+    };
 
-	LazyLoad.prototype.update = function () {
-		this._elements = _convertToArray(this._queryOriginNode.querySelectorAll(this._settings.elements_selector));
-		this._purgeElements();
-		this._loopThroughElements();
-		this._startScrollHandler();
-	};
+    LazyLoad.prototype.update = function() {
+        this._elements = _convertToArray(this._queryOriginNode.querySelectorAll(this._settings.elements_selector));
+        this._purgeElements();
+        this._loopThroughElements();
+        this._startScrollHandler();
+    };
 
-	LazyLoad.prototype.destroy = function () {
-		_removeEventListener(window, "resize", this._handleScrollFn);
-		if (this._loopTimeout) {
-			clearTimeout(this._loopTimeout);
-			this._loopTimeout = null;
-		}
-		this._stopScrollHandler();
-		this._elements = null;
-		this._queryOriginNode = null;
-		this._settings = null;
-	};
+    LazyLoad.prototype.destroy = function() {
+        _removeEventListener(window, "resize", this._handleScrollFn);
+        if (this._loopTimeout) {
+            clearTimeout(this._loopTimeout);
+            this._loopTimeout = null;
+        }
+        this._stopScrollHandler();
+        this._elements = null;
+        this._queryOriginNode = null;
+        this._settings = null;
+    };
 
 
-	return LazyLoad;
+    return LazyLoad;
 
 
 }));

todo.md

@@ -0,0 +0,0 @@ TODO

typings/lazyload.d.ts

@@ -0,0 +0,0 @@ interface ILazyLoadOptions {

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

803747

increased by3.6%

Number of lines in readme file

304

increased by21.6%

Worsened metrics

Lines of code

1291

decreased by-0.31%

No dependency changes