872 lines
30 KiB
JavaScript
872 lines
30 KiB
JavaScript
|
/*!
|
||
|
|
* jQuery & Zepto Lazy - v1.7.10
|
||
|
|
* http://jquery.eisbehr.de/lazy/
|
||
|
|
*
|
||
|
|
* Copyright 2012 - 2018, Daniel 'Eisbehr' Kern
|
||
|
|
*
|
||
|
|
* Dual licensed under the MIT and GPL-2.0 licenses:
|
||
|
|
* http://www.opensource.org/licenses/mit-license.php
|
||
|
|
* http://www.gnu.org/licenses/gpl-2.0.html
|
||
|
|
*
|
||
|
|
* $("img.lazy").lazy();
|
||
|
|
*/
|
||
|
|
|
||
|
|
;(function(window, undefined) {
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
// noinspection JSUnresolvedVariable
|
||
|
|
/**
|
||
|
|
* library instance - here and not in construct to be shorter in minimization
|
||
|
|
* @return void
|
||
|
|
*/
|
||
|
|
var $ = window.jQuery || window.Zepto,
|
||
|
|
|
||
|
|
/**
|
||
|
|
* unique plugin instance id counter
|
||
|
|
* @type {number}
|
||
|
|
*/
|
||
|
|
lazyInstanceId = 0,
|
||
|
|
|
||
|
|
/**
|
||
|
|
* helper to register window load for jQuery 3
|
||
|
|
* @type {boolean}
|
||
|
|
*/
|
||
|
|
windowLoaded = false;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* make lazy available to jquery - and make it a bit more case-insensitive :)
|
||
|
|
* @access public
|
||
|
|
* @type {function}
|
||
|
|
* @param {object} settings
|
||
|
|
* @return {LazyPlugin}
|
||
|
|
*/
|
||
|
|
$.fn.Lazy = $.fn.lazy = function(settings) {
|
||
|
|
return new LazyPlugin(this, settings);
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* helper to add plugins to lazy prototype configuration
|
||
|
|
* @access public
|
||
|
|
* @type {function}
|
||
|
|
* @param {string|Array} names
|
||
|
|
* @param {string|Array|function} [elements]
|
||
|
|
* @param {function} loader
|
||
|
|
* @return void
|
||
|
|
*/
|
||
|
|
$.Lazy = $.lazy = function(names, elements, loader) {
|
||
|
|
// make second parameter optional
|
||
|
|
if ($.isFunction(elements)) {
|
||
|
|
loader = elements;
|
||
|
|
elements = [];
|
||
|
|
}
|
||
|
|
|
||
|
|
// exit here if parameter is not a callable function
|
||
|
|
if (!$.isFunction(loader)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// make parameters an array of names to be sure
|
||
|
|
names = $.isArray(names) ? names : [names];
|
||
|
|
elements = $.isArray(elements) ? elements : [elements];
|
||
|
|
|
||
|
|
var config = LazyPlugin.prototype.config,
|
||
|
|
forced = config._f || (config._f = {});
|
||
|
|
|
||
|
|
// add the loader plugin for every name
|
||
|
|
for (var i = 0, l = names.length; i < l; i++) {
|
||
|
|
if (config[names[i]] === undefined || $.isFunction(config[names[i]])) {
|
||
|
|
config[names[i]] = loader;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// add forced elements loader
|
||
|
|
for (var c = 0, a = elements.length; c < a; c++) {
|
||
|
|
forced[elements[c]] = names[0];
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* contains all logic and the whole element handling
|
||
|
|
* is packed in a private function outside class to reduce memory usage, because it will not be created on every plugin instance
|
||
|
|
* @access private
|
||
|
|
* @type {function}
|
||
|
|
* @param {LazyPlugin} instance
|
||
|
|
* @param {object} config
|
||
|
|
* @param {object|Array} items
|
||
|
|
* @param {object} events
|
||
|
|
* @param {string} namespace
|
||
|
|
* @return void
|
||
|
|
*/
|
||
|
|
function _executeLazy(instance, config, items, events, namespace) {
|
||
|
|
/**
|
||
|
|
* a helper to trigger the 'onFinishedAll' callback after all other events
|
||
|
|
* @access private
|
||
|
|
* @type {number}
|
||
|
|
*/
|
||
|
|
var _awaitingAfterLoad = 0,
|
||
|
|
|
||
|
|
/**
|
||
|
|
* visible content width
|
||
|
|
* @access private
|
||
|
|
* @type {number}
|
||
|
|
*/
|
||
|
|
_actualWidth = -1,
|
||
|
|
|
||
|
|
/**
|
||
|
|
* visible content height
|
||
|
|
* @access private
|
||
|
|
* @type {number}
|
||
|
|
*/
|
||
|
|
_actualHeight = -1,
|
||
|
|
|
||
|
|
/**
|
||
|
|
* determine possibly detected high pixel density
|
||
|
|
* @access private
|
||
|
|
* @type {boolean}
|
||
|
|
*/
|
||
|
|
_isRetinaDisplay = false,
|
||
|
|
|
||
|
|
/**
|
||
|
|
* dictionary entry for better minimization
|
||
|
|
* @access private
|
||
|
|
* @type {string}
|
||
|
|
*/
|
||
|
|
_afterLoad = 'afterLoad',
|
||
|
|
|
||
|
|
/**
|
||
|
|
* dictionary entry for better minimization
|
||
|
|
* @access private
|
||
|
|
* @type {string}
|
||
|
|
*/
|
||
|
|
_load = 'load',
|
||
|
|
|
||
|
|
/**
|
||
|
|
* dictionary entry for better minimization
|
||
|
|
* @access private
|
||
|
|
* @type {string}
|
||
|
|
*/
|
||
|
|
_error = 'error',
|
||
|
|
|
||
|
|
/**
|
||
|
|
* dictionary entry for better minimization
|
||
|
|
* @access private
|
||
|
|
* @type {string}
|
||
|
|
*/
|
||
|
|
_img = 'img',
|
||
|
|
|
||
|
|
/**
|
||
|
|
* dictionary entry for better minimization
|
||
|
|
* @access private
|
||
|
|
* @type {string}
|
||
|
|
*/
|
||
|
|
_src = 'src',
|
||
|
|
|
||
|
|
/**
|
||
|
|
* dictionary entry for better minimization
|
||
|
|
* @access private
|
||
|
|
* @type {string}
|
||
|
|
*/
|
||
|
|
_srcset = 'srcset',
|
||
|
|
|
||
|
|
/**
|
||
|
|
* dictionary entry for better minimization
|
||
|
|
* @access private
|
||
|
|
* @type {string}
|
||
|
|
*/
|
||
|
|
_sizes = 'sizes',
|
||
|
|
|
||
|
|
/**
|
||
|
|
* dictionary entry for better minimization
|
||
|
|
* @access private
|
||
|
|
* @type {string}
|
||
|
|
*/
|
||
|
|
_backgroundImage = 'background-image';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* initialize plugin
|
||
|
|
* bind loading to events or set delay time to load all items at once
|
||
|
|
* @access private
|
||
|
|
* @return void
|
||
|
|
*/
|
||
|
|
function _initialize() {
|
||
|
|
// detect actual device pixel ratio
|
||
|
|
// noinspection JSUnresolvedVariable
|
||
|
|
_isRetinaDisplay = window.devicePixelRatio > 1;
|
||
|
|
|
||
|
|
// prepare all initial items
|
||
|
|
items = _prepareItems(items);
|
||
|
|
|
||
|
|
// if delay time is set load all items at once after delay time
|
||
|
|
if (config.delay >= 0) {
|
||
|
|
setTimeout(function() {
|
||
|
|
_lazyLoadItems(true);
|
||
|
|
}, config.delay);
|
||
|
|
}
|
||
|
|
|
||
|
|
// if no delay is set or combine usage is active bind events
|
||
|
|
if (config.delay < 0 || config.combined) {
|
||
|
|
// create unique event function
|
||
|
|
events.e = _throttle(config.throttle, function(event) {
|
||
|
|
// reset detected window size on resize event
|
||
|
|
if (event.type === 'resize') {
|
||
|
|
_actualWidth = _actualHeight = -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
// execute 'lazy magic'
|
||
|
|
_lazyLoadItems(event.all);
|
||
|
|
});
|
||
|
|
|
||
|
|
// create function to add new items to instance
|
||
|
|
events.a = function(additionalItems) {
|
||
|
|
additionalItems = _prepareItems(additionalItems);
|
||
|
|
items.push.apply(items, additionalItems);
|
||
|
|
};
|
||
|
|
|
||
|
|
// create function to get all instance items left
|
||
|
|
events.g = function() {
|
||
|
|
// filter loaded items before return in case internal filter was not running until now
|
||
|
|
return (items = $(items).filter(function() {
|
||
|
|
return !$(this).data(config.loadedName);
|
||
|
|
}));
|
||
|
|
};
|
||
|
|
|
||
|
|
// create function to force loading elements
|
||
|
|
events.f = function(forcedItems) {
|
||
|
|
for (var i = 0; i < forcedItems.length; i++) {
|
||
|
|
// only handle item if available in current instance
|
||
|
|
// use a compare function, because Zepto can't handle object parameter for filter
|
||
|
|
// var item = items.filter(forcedItems[i]);
|
||
|
|
/* jshint loopfunc: true */
|
||
|
|
var item = items.filter(function() {
|
||
|
|
return this === forcedItems[i];
|
||
|
|
});
|
||
|
|
|
||
|
|
if (item.length) {
|
||
|
|
_lazyLoadItems(false, item);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// load initial items
|
||
|
|
_lazyLoadItems();
|
||
|
|
|
||
|
|
// bind lazy load functions to scroll and resize event
|
||
|
|
// noinspection JSUnresolvedVariable
|
||
|
|
$(config.appendScroll).on('scroll.' + namespace + ' resize.' + namespace, events.e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* prepare items before handle them
|
||
|
|
* @access private
|
||
|
|
* @param {Array|object|jQuery} items
|
||
|
|
* @return {Array|object|jQuery}
|
||
|
|
*/
|
||
|
|
function _prepareItems(items) {
|
||
|
|
// fetch used configurations before loops
|
||
|
|
var defaultImage = config.defaultImage,
|
||
|
|
placeholder = config.placeholder,
|
||
|
|
imageBase = config.imageBase,
|
||
|
|
srcsetAttribute = config.srcsetAttribute,
|
||
|
|
loaderAttribute = config.loaderAttribute,
|
||
|
|
forcedTags = config._f || {};
|
||
|
|
|
||
|
|
// filter items and only add those who not handled yet and got needed attributes available
|
||
|
|
items = $(items).filter(function() {
|
||
|
|
var element = $(this),
|
||
|
|
tag = _getElementTagName(this);
|
||
|
|
|
||
|
|
return !element.data(config.handledName) &&
|
||
|
|
(element.attr(config.attribute) || element.attr(srcsetAttribute) || element.attr(loaderAttribute) || forcedTags[tag] !== undefined);
|
||
|
|
})
|
||
|
|
|
||
|
|
// append plugin instance to all elements
|
||
|
|
.data('plugin_' + config.name, instance);
|
||
|
|
|
||
|
|
for (var i = 0, l = items.length; i < l; i++) {
|
||
|
|
var element = $(items[i]),
|
||
|
|
tag = _getElementTagName(items[i]),
|
||
|
|
elementImageBase = element.attr(config.imageBaseAttribute) || imageBase;
|
||
|
|
|
||
|
|
// generate and update source set if an image base is set
|
||
|
|
if (tag === _img && elementImageBase && element.attr(srcsetAttribute)) {
|
||
|
|
element.attr(srcsetAttribute, _getCorrectedSrcSet(element.attr(srcsetAttribute), elementImageBase));
|
||
|
|
}
|
||
|
|
|
||
|
|
// add loader to forced element types
|
||
|
|
if (forcedTags[tag] !== undefined && !element.attr(loaderAttribute)) {
|
||
|
|
element.attr(loaderAttribute, forcedTags[tag]);
|
||
|
|
}
|
||
|
|
|
||
|
|
// set default image on every element without source
|
||
|
|
if (tag === _img && defaultImage && !element.attr(_src)) {
|
||
|
|
element.attr(_src, defaultImage);
|
||
|
|
}
|
||
|
|
|
||
|
|
// set placeholder on every element without background image
|
||
|
|
else if (tag !== _img && placeholder && (!element.css(_backgroundImage) || element.css(_backgroundImage) === 'none')) {
|
||
|
|
element.css(_backgroundImage, "url('" + placeholder + "')");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return items;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* the 'lazy magic' - check all items
|
||
|
|
* @access private
|
||
|
|
* @param {boolean} [allItems]
|
||
|
|
* @param {object} [forced]
|
||
|
|
* @return void
|
||
|
|
*/
|
||
|
|
function _lazyLoadItems(allItems, forced) {
|
||
|
|
// skip if no items where left
|
||
|
|
if (!items.length) {
|
||
|
|
// destroy instance if option is enabled
|
||
|
|
if (config.autoDestroy) {
|
||
|
|
// noinspection JSUnresolvedFunction
|
||
|
|
instance.destroy();
|
||
|
|
}
|
||
|
|
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var elements = forced || items,
|
||
|
|
loadTriggered = false,
|
||
|
|
imageBase = config.imageBase || '',
|
||
|
|
srcsetAttribute = config.srcsetAttribute,
|
||
|
|
handledName = config.handledName;
|
||
|
|
|
||
|
|
// loop all available items
|
||
|
|
for (var i = 0; i < elements.length; i++) {
|
||
|
|
// item is at least in loadable area
|
||
|
|
if (allItems || forced || _isInLoadableArea(elements[i])) {
|
||
|
|
var element = $(elements[i]),
|
||
|
|
tag = _getElementTagName(elements[i]),
|
||
|
|
attribute = element.attr(config.attribute),
|
||
|
|
elementImageBase = element.attr(config.imageBaseAttribute) || imageBase,
|
||
|
|
customLoader = element.attr(config.loaderAttribute);
|
||
|
|
|
||
|
|
// is not already handled
|
||
|
|
if (!element.data(handledName) &&
|
||
|
|
// and is visible or visibility doesn't matter
|
||
|
|
(!config.visibleOnly || element.is(':visible')) && (
|
||
|
|
// and image source or source set attribute is available
|
||
|
|
(attribute || element.attr(srcsetAttribute)) && (
|
||
|
|
// and is image tag where attribute is not equal source or source set
|
||
|
|
(tag === _img && (elementImageBase + attribute !== element.attr(_src) || element.attr(srcsetAttribute) !== element.attr(_srcset))) ||
|
||
|
|
// or is non image tag where attribute is not equal background
|
||
|
|
(tag !== _img && elementImageBase + attribute !== element.css(_backgroundImage))
|
||
|
|
) ||
|
||
|
|
// or custom loader is available
|
||
|
|
customLoader))
|
||
|
|
{
|
||
|
|
// mark element always as handled as this point to prevent double handling
|
||
|
|
loadTriggered = true;
|
||
|
|
element.data(handledName, true);
|
||
|
|
|
||
|
|
// load item
|
||
|
|
_handleItem(element, tag, elementImageBase, customLoader);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// when something was loaded remove them from remaining items
|
||
|
|
if (loadTriggered) {
|
||
|
|
items = $(items).filter(function() {
|
||
|
|
return !$(this).data(handledName);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* load the given element the lazy way
|
||
|
|
* @access private
|
||
|
|
* @param {object} element
|
||
|
|
* @param {string} tag
|
||
|
|
* @param {string} imageBase
|
||
|
|
* @param {function} [customLoader]
|
||
|
|
* @return void
|
||
|
|
*/
|
||
|
|
function _handleItem(element, tag, imageBase, customLoader) {
|
||
|
|
// increment count of items waiting for after load
|
||
|
|
++_awaitingAfterLoad;
|
||
|
|
|
||
|
|
// extended error callback for correct 'onFinishedAll' handling
|
||
|
|
var errorCallback = function() {
|
||
|
|
_triggerCallback('onError', element);
|
||
|
|
_reduceAwaiting();
|
||
|
|
|
||
|
|
// prevent further callback calls
|
||
|
|
errorCallback = $.noop;
|
||
|
|
};
|
||
|
|
|
||
|
|
// trigger function before loading image
|
||
|
|
_triggerCallback('beforeLoad', element);
|
||
|
|
|
||
|
|
// fetch all double used data here for better code minimization
|
||
|
|
var srcAttribute = config.attribute,
|
||
|
|
srcsetAttribute = config.srcsetAttribute,
|
||
|
|
sizesAttribute = config.sizesAttribute,
|
||
|
|
retinaAttribute = config.retinaAttribute,
|
||
|
|
removeAttribute = config.removeAttribute,
|
||
|
|
loadedName = config.loadedName,
|
||
|
|
elementRetina = element.attr(retinaAttribute);
|
||
|
|
|
||
|
|
// handle custom loader
|
||
|
|
if (customLoader) {
|
||
|
|
// on load callback
|
||
|
|
var loadCallback = function() {
|
||
|
|
// remove attribute from element
|
||
|
|
if (removeAttribute) {
|
||
|
|
element.removeAttr(config.loaderAttribute);
|
||
|
|
}
|
||
|
|
|
||
|
|
// mark element as loaded
|
||
|
|
element.data(loadedName, true);
|
||
|
|
|
||
|
|
// call after load event
|
||
|
|
_triggerCallback(_afterLoad, element);
|
||
|
|
|
||
|
|
// remove item from waiting queue and possibly trigger finished event
|
||
|
|
// it's needed to be asynchronous to run after filter was in _lazyLoadItems
|
||
|
|
setTimeout(_reduceAwaiting, 1);
|
||
|
|
|
||
|
|
// prevent further callback calls
|
||
|
|
loadCallback = $.noop;
|
||
|
|
};
|
||
|
|
|
||
|
|
// bind error event to trigger callback and reduce waiting amount
|
||
|
|
element.off(_error).one(_error, errorCallback)
|
||
|
|
|
||
|
|
// bind after load callback to element
|
||
|
|
.one(_load, loadCallback);
|
||
|
|
|
||
|
|
// trigger custom loader and handle response
|
||
|
|
if (!_triggerCallback(customLoader, element, function(response) {
|
||
|
|
if(response) {
|
||
|
|
element.off(_load);
|
||
|
|
loadCallback();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
element.off(_error);
|
||
|
|
errorCallback();
|
||
|
|
}
|
||
|
|
})) {
|
||
|
|
element.trigger(_error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// handle images
|
||
|
|
else {
|
||
|
|
// create image object
|
||
|
|
var imageObj = $(new Image());
|
||
|
|
|
||
|
|
// bind error event to trigger callback and reduce waiting amount
|
||
|
|
imageObj.one(_error, errorCallback)
|
||
|
|
|
||
|
|
// bind after load callback to image
|
||
|
|
.one(_load, function() {
|
||
|
|
// remove element from view
|
||
|
|
element.hide();
|
||
|
|
|
||
|
|
// set image back to element
|
||
|
|
// do it as single 'attr' calls, to be sure 'src' is set after 'srcset'
|
||
|
|
if (tag === _img) {
|
||
|
|
element.attr(_sizes, imageObj.attr(_sizes))
|
||
|
|
.attr(_srcset, imageObj.attr(_srcset))
|
||
|
|
.attr(_src, imageObj.attr(_src));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
element.css(_backgroundImage, "url('" + imageObj.attr(_src) + "')");
|
||
|
|
}
|
||
|
|
|
||
|
|
// bring it back with some effect!
|
||
|
|
element[config.effect](config.effectTime);
|
||
|
|
|
||
|
|
// remove attribute from element
|
||
|
|
if (removeAttribute) {
|
||
|
|
element.removeAttr(srcAttribute + ' ' + srcsetAttribute + ' ' + retinaAttribute + ' ' + config.imageBaseAttribute);
|
||
|
|
|
||
|
|
// only remove 'sizes' attribute, if it was a custom one
|
||
|
|
if (sizesAttribute !== _sizes) {
|
||
|
|
element.removeAttr(sizesAttribute);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// mark element as loaded
|
||
|
|
element.data(loadedName, true);
|
||
|
|
|
||
|
|
// call after load event
|
||
|
|
_triggerCallback(_afterLoad, element);
|
||
|
|
|
||
|
|
// cleanup image object
|
||
|
|
imageObj.remove();
|
||
|
|
|
||
|
|
// remove item from waiting queue and possibly trigger finished event
|
||
|
|
_reduceAwaiting();
|
||
|
|
});
|
||
|
|
|
||
|
|
// set sources
|
||
|
|
// do it as single 'attr' calls, to be sure 'src' is set after 'srcset'
|
||
|
|
var imageSrc = (_isRetinaDisplay && elementRetina ? elementRetina : element.attr(srcAttribute)) || '';
|
||
|
|
imageObj.attr(_sizes, element.attr(sizesAttribute))
|
||
|
|
.attr(_srcset, element.attr(srcsetAttribute))
|
||
|
|
.attr(_src, imageSrc ? imageBase + imageSrc : null);
|
||
|
|
|
||
|
|
// call after load even on cached image
|
||
|
|
imageObj.complete && imageObj.trigger(_load); // jshint ignore : line
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* check if the given element is inside the current viewport or threshold
|
||
|
|
* @access private
|
||
|
|
* @param {object} element
|
||
|
|
* @return {boolean}
|
||
|
|
*/
|
||
|
|
function _isInLoadableArea(element) {
|
||
|
|
var elementBound = element.getBoundingClientRect(),
|
||
|
|
direction = config.scrollDirection,
|
||
|
|
threshold = config.threshold,
|
||
|
|
vertical = // check if element is in loadable area from top
|
||
|
|
((_getActualHeight() + threshold) > elementBound.top) &&
|
||
|
|
// check if element is even in loadable are from bottom
|
||
|
|
(-threshold < elementBound.bottom),
|
||
|
|
horizontal = // check if element is in loadable area from left
|
||
|
|
((_getActualWidth() + threshold) > elementBound.left) &&
|
||
|
|
// check if element is even in loadable area from right
|
||
|
|
(-threshold < elementBound.right);
|
||
|
|
|
||
|
|
if (direction === 'vertical') {
|
||
|
|
return vertical;
|
||
|
|
}
|
||
|
|
else if (direction === 'horizontal') {
|
||
|
|
return horizontal;
|
||
|
|
}
|
||
|
|
|
||
|
|
return vertical && horizontal;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* receive the current viewed width of the browser
|
||
|
|
* @access private
|
||
|
|
* @return {number}
|
||
|
|
*/
|
||
|
|
function _getActualWidth() {
|
||
|
|
return _actualWidth >= 0 ? _actualWidth : (_actualWidth = $(window).width());
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* receive the current viewed height of the browser
|
||
|
|
* @access private
|
||
|
|
* @return {number}
|
||
|
|
*/
|
||
|
|
function _getActualHeight() {
|
||
|
|
return _actualHeight >= 0 ? _actualHeight : (_actualHeight = $(window).height());
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* get lowercase tag name of an element
|
||
|
|
* @access private
|
||
|
|
* @param {object} element
|
||
|
|
* @returns {string}
|
||
|
|
*/
|
||
|
|
function _getElementTagName(element) {
|
||
|
|
return element.tagName.toLowerCase();
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* prepend image base to all srcset entries
|
||
|
|
* @access private
|
||
|
|
* @param {string} srcset
|
||
|
|
* @param {string} imageBase
|
||
|
|
* @returns {string}
|
||
|
|
*/
|
||
|
|
function _getCorrectedSrcSet(srcset, imageBase) {
|
||
|
|
if (imageBase) {
|
||
|
|
// trim, remove unnecessary spaces and split entries
|
||
|
|
var entries = srcset.split(',');
|
||
|
|
srcset = '';
|
||
|
|
|
||
|
|
for (var i = 0, l = entries.length; i < l; i++) {
|
||
|
|
srcset += imageBase + entries[i].trim() + (i !== l - 1 ? ',' : '');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return srcset;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* helper function to throttle down event triggering
|
||
|
|
* @access private
|
||
|
|
* @param {number} delay
|
||
|
|
* @param {function} callback
|
||
|
|
* @return {function}
|
||
|
|
*/
|
||
|
|
function _throttle(delay, callback) {
|
||
|
|
var timeout,
|
||
|
|
lastExecute = 0;
|
||
|
|
|
||
|
|
return function(event, ignoreThrottle) {
|
||
|
|
var elapsed = +new Date() - lastExecute;
|
||
|
|
|
||
|
|
function run() {
|
||
|
|
lastExecute = +new Date();
|
||
|
|
// noinspection JSUnresolvedFunction
|
||
|
|
callback.call(instance, event);
|
||
|
|
}
|
||
|
|
|
||
|
|
timeout && clearTimeout(timeout); // jshint ignore : line
|
||
|
|
|
||
|
|
if (elapsed > delay || !config.enableThrottle || ignoreThrottle) {
|
||
|
|
run();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
timeout = setTimeout(run, delay - elapsed);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* reduce count of awaiting elements to 'afterLoad' event and fire 'onFinishedAll' if reached zero
|
||
|
|
* @access private
|
||
|
|
* @return void
|
||
|
|
*/
|
||
|
|
function _reduceAwaiting() {
|
||
|
|
--_awaitingAfterLoad;
|
||
|
|
|
||
|
|
// if no items were left trigger finished event
|
||
|
|
if (!items.length && !_awaitingAfterLoad) {
|
||
|
|
_triggerCallback('onFinishedAll');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* single implementation to handle callbacks, pass element and set 'this' to current instance
|
||
|
|
* @access private
|
||
|
|
* @param {string|function} callback
|
||
|
|
* @param {object} [element]
|
||
|
|
* @param {*} [args]
|
||
|
|
* @return {boolean}
|
||
|
|
*/
|
||
|
|
function _triggerCallback(callback, element, args) {
|
||
|
|
if ((callback = config[callback])) {
|
||
|
|
// jQuery's internal '$(arguments).slice(1)' are causing problems at least on old iPads
|
||
|
|
// below is shorthand of 'Array.prototype.slice.call(arguments, 1)'
|
||
|
|
callback.apply(instance, [].slice.call(arguments, 1));
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// if event driven or window is already loaded don't wait for page loading
|
||
|
|
if (config.bind === 'event' || windowLoaded) {
|
||
|
|
_initialize();
|
||
|
|
}
|
||
|
|
|
||
|
|
// otherwise load initial items and start lazy after page load
|
||
|
|
else {
|
||
|
|
// noinspection JSUnresolvedVariable
|
||
|
|
$(window).on(_load + '.' + namespace, _initialize);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* lazy plugin class constructor
|
||
|
|
* @constructor
|
||
|
|
* @access private
|
||
|
|
* @param {object} elements
|
||
|
|
* @param {object} settings
|
||
|
|
* @return {object|LazyPlugin}
|
||
|
|
*/
|
||
|
|
function LazyPlugin(elements, settings) {
|
||
|
|
/**
|
||
|
|
* this lazy plugin instance
|
||
|
|
* @access private
|
||
|
|
* @type {object|LazyPlugin|LazyPlugin.prototype}
|
||
|
|
*/
|
||
|
|
var _instance = this,
|
||
|
|
|
||
|
|
/**
|
||
|
|
* this lazy plugin instance configuration
|
||
|
|
* @access private
|
||
|
|
* @type {object}
|
||
|
|
*/
|
||
|
|
_config = $.extend({}, _instance.config, settings),
|
||
|
|
|
||
|
|
/**
|
||
|
|
* instance generated event executed on container scroll or resize
|
||
|
|
* packed in an object to be referenceable and short named because properties will not be minified
|
||
|
|
* @access private
|
||
|
|
* @type {object}
|
||
|
|
*/
|
||
|
|
_events = {},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* unique namespace for instance related events
|
||
|
|
* @access private
|
||
|
|
* @type {string}
|
||
|
|
*/
|
||
|
|
_namespace = _config.name + '-' + (++lazyInstanceId);
|
||
|
|
|
||
|
|
// noinspection JSUndefinedPropertyAssignment
|
||
|
|
/**
|
||
|
|
* wrapper to get or set an entry from plugin instance configuration
|
||
|
|
* much smaller on minify as direct access
|
||
|
|
* @access public
|
||
|
|
* @type {function}
|
||
|
|
* @param {string} entryName
|
||
|
|
* @param {*} [value]
|
||
|
|
* @return {LazyPlugin|*}
|
||
|
|
*/
|
||
|
|
_instance.config = function(entryName, value) {
|
||
|
|
if (value === undefined) {
|
||
|
|
return _config[entryName];
|
||
|
|
}
|
||
|
|
|
||
|
|
_config[entryName] = value;
|
||
|
|
return _instance;
|
||
|
|
};
|
||
|
|
|
||
|
|
// noinspection JSUndefinedPropertyAssignment
|
||
|
|
/**
|
||
|
|
* add additional items to current instance
|
||
|
|
* @access public
|
||
|
|
* @param {Array|object|string} items
|
||
|
|
* @return {LazyPlugin}
|
||
|
|
*/
|
||
|
|
_instance.addItems = function(items) {
|
||
|
|
_events.a && _events.a($.type(items) === 'string' ? $(items) : items); // jshint ignore : line
|
||
|
|
return _instance;
|
||
|
|
};
|
||
|
|
|
||
|
|
// noinspection JSUndefinedPropertyAssignment
|
||
|
|
/**
|
||
|
|
* get all left items of this instance
|
||
|
|
* @access public
|
||
|
|
* @returns {object}
|
||
|
|
*/
|
||
|
|
_instance.getItems = function() {
|
||
|
|
return _events.g ? _events.g() : {};
|
||
|
|
};
|
||
|
|
|
||
|
|
// noinspection JSUndefinedPropertyAssignment
|
||
|
|
/**
|
||
|
|
* force lazy to load all items in loadable area right now
|
||
|
|
* by default without throttle
|
||
|
|
* @access public
|
||
|
|
* @type {function}
|
||
|
|
* @param {boolean} [useThrottle]
|
||
|
|
* @return {LazyPlugin}
|
||
|
|
*/
|
||
|
|
_instance.update = function(useThrottle) {
|
||
|
|
_events.e && _events.e({}, !useThrottle); // jshint ignore : line
|
||
|
|
return _instance;
|
||
|
|
};
|
||
|
|
|
||
|
|
// noinspection JSUndefinedPropertyAssignment
|
||
|
|
/**
|
||
|
|
* force element(s) to load directly, ignoring the viewport
|
||
|
|
* @access public
|
||
|
|
* @param {Array|object|string} items
|
||
|
|
* @return {LazyPlugin}
|
||
|
|
*/
|
||
|
|
_instance.force = function(items) {
|
||
|
|
_events.f && _events.f($.type(items) === 'string' ? $(items) : items); // jshint ignore : line
|
||
|
|
return _instance;
|
||
|
|
};
|
||
|
|
|
||
|
|
// noinspection JSUndefinedPropertyAssignment
|
||
|
|
/**
|
||
|
|
* force lazy to load all available items right now
|
||
|
|
* this call ignores throttling
|
||
|
|
* @access public
|
||
|
|
* @type {function}
|
||
|
|
* @return {LazyPlugin}
|
||
|
|
*/
|
||
|
|
_instance.loadAll = function() {
|
||
|
|
_events.e && _events.e({all: true}, true); // jshint ignore : line
|
||
|
|
return _instance;
|
||
|
|
};
|
||
|
|
|
||
|
|
// noinspection JSUndefinedPropertyAssignment
|
||
|
|
/**
|
||
|
|
* destroy this plugin instance
|
||
|
|
* @access public
|
||
|
|
* @type {function}
|
||
|
|
* @return undefined
|
||
|
|
*/
|
||
|
|
_instance.destroy = function() {
|
||
|
|
// unbind instance generated events
|
||
|
|
// noinspection JSUnresolvedFunction, JSUnresolvedVariable
|
||
|
|
$(_config.appendScroll).off('.' + _namespace, _events.e);
|
||
|
|
// noinspection JSUnresolvedVariable
|
||
|
|
$(window).off('.' + _namespace);
|
||
|
|
|
||
|
|
// clear events
|
||
|
|
_events = {};
|
||
|
|
|
||
|
|
return undefined;
|
||
|
|
};
|
||
|
|
|
||
|
|
// start using lazy and return all elements to be chainable or instance for further use
|
||
|
|
// noinspection JSUnresolvedVariable
|
||
|
|
_executeLazy(_instance, _config, elements, _events, _namespace);
|
||
|
|
return _config.chainable ? elements : _instance;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* settings and configuration data
|
||
|
|
* @access public
|
||
|
|
* @type {object|*}
|
||
|
|
*/
|
||
|
|
LazyPlugin.prototype.config = {
|
||
|
|
// general
|
||
|
|
name : 'lazy',
|
||
|
|
chainable : true,
|
||
|
|
autoDestroy : true,
|
||
|
|
bind : 'load',
|
||
|
|
threshold : 500,
|
||
|
|
visibleOnly : false,
|
||
|
|
appendScroll : window,
|
||
|
|
scrollDirection : 'both',
|
||
|
|
imageBase : null,
|
||
|
|
defaultImage : 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
|
||
|
|
placeholder : null,
|
||
|
|
delay : -1,
|
||
|
|
combined : false,
|
||
|
|
|
||
|
|
// attributes
|
||
|
|
attribute : 'data-src',
|
||
|
|
srcsetAttribute : 'data-srcset',
|
||
|
|
sizesAttribute : 'data-sizes',
|
||
|
|
retinaAttribute : 'data-retina',
|
||
|
|
loaderAttribute : 'data-loader',
|
||
|
|
imageBaseAttribute : 'data-imagebase',
|
||
|
|
removeAttribute : true,
|
||
|
|
handledName : 'handled',
|
||
|
|
loadedName : 'loaded',
|
||
|
|
|
||
|
|
// effect
|
||
|
|
effect : 'show',
|
||
|
|
effectTime : 0,
|
||
|
|
|
||
|
|
// throttle
|
||
|
|
enableThrottle : true,
|
||
|
|
throttle : 250,
|
||
|
|
|
||
|
|
// callbacks
|
||
|
|
beforeLoad : undefined,
|
||
|
|
afterLoad : undefined,
|
||
|
|
onError : undefined,
|
||
|
|
onFinishedAll : undefined
|
||
|
|
};
|
||
|
|
|
||
|
|
// register window load event globally to prevent not loading elements
|
||
|
|
// since jQuery 3.X ready state is fully async and may be executed after 'load'
|
||
|
|
$(window).on('load', function() {
|
||
|
|
windowLoaded = true;
|
||
|
|
});
|
||
|
|
})(window);
|