3 Star 0 Fork 0

Gitee 极速下载 / lazysizes

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
此仓库是为了提升国内下载速度的镜像仓库,每日同步一次。 原始仓库: https://github.com/aFarkas/lazysizes
克隆/下载
lazysizes-umd.js 19.53 KB
一键复制 编辑 原始数据 按行查看 历史
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815
(function(window, factory) {
var lazySizes = factory(window, window.document, Date);
if(typeof module == 'object' && module.exports){
module.exports = lazySizes;
} else if (typeof define == 'function' && define.amd) {
define(lazySizes);
} else {
window.lazySizes = lazySizes;
}
}(window,
/**
* @typedef { import("./types/global").LazySizesConfigPartial } LazySizesConfigPartial
*/
function l(window, document, Date) { // Pass in the window Date function also for SSR because the Date class can be lost
'use strict';
/*jshint eqnull:true */
var lazysizes,
/**
* @type { LazySizesConfigPartial }
*/
lazySizesCfg;
(function(){
var prop;
var lazySizesDefaults = {
lazyClass: 'lazyload',
loadedClass: 'lazyloaded',
loadingClass: 'lazyloading',
preloadClass: 'lazypreload',
errorClass: 'lazyerror',
//strictClass: 'lazystrict',
autosizesClass: 'lazyautosizes',
fastLoadedClass: 'ls-is-cached',
iframeLoadMode: 0,
srcAttr: 'data-src',
srcsetAttr: 'data-srcset',
sizesAttr: 'data-sizes',
//preloadAfterLoad: false,
minSize: 40,
customMedia: {},
init: true,
expFactor: 1.5,
hFac: 0.8,
loadMode: 2,
loadHidden: true,
ricTimeout: 0,
throttleDelay: 125,
};
lazySizesCfg = window.lazySizesConfig || window.lazysizesConfig || {};
for(prop in lazySizesDefaults){
if(!(prop in lazySizesCfg)){
lazySizesCfg[prop] = lazySizesDefaults[prop];
}
}
})();
if (!document || !document.getElementsByClassName) {
return {
init: function () {},
/**
* @type { LazySizesConfigPartial }
*/
cfg: lazySizesCfg,
/**
* @type { true }
*/
noSupport: true,
};
}
var docElem = document.documentElement;
var supportPicture = window.HTMLPictureElement;
var _addEventListener = 'addEventListener';
var _getAttribute = 'getAttribute';
/**
* Update to bind to window because 'this' becomes null during SSR
* builds.
*/
var addEventListener = window[_addEventListener].bind(window);
var setTimeout = window.setTimeout;
var requestAnimationFrame = window.requestAnimationFrame || setTimeout;
var requestIdleCallback = window.requestIdleCallback;
var regPicture = /^picture$/i;
var loadEvents = ['load', 'error', 'lazyincluded', '_lazyloaded'];
var regClassCache = {};
var forEach = Array.prototype.forEach;
/**
* @param ele {Element}
* @param cls {string}
*/
var hasClass = function(ele, cls) {
if(!regClassCache[cls]){
regClassCache[cls] = new RegExp('(\\s|^)'+cls+'(\\s|$)');
}
return regClassCache[cls].test(ele[_getAttribute]('class') || '') && regClassCache[cls];
};
/**
* @param ele {Element}
* @param cls {string}
*/
var addClass = function(ele, cls) {
if (!hasClass(ele, cls)){
ele.setAttribute('class', (ele[_getAttribute]('class') || '').trim() + ' ' + cls);
}
};
/**
* @param ele {Element}
* @param cls {string}
*/
var removeClass = function(ele, cls) {
var reg;
if ((reg = hasClass(ele,cls))) {
ele.setAttribute('class', (ele[_getAttribute]('class') || '').replace(reg, ' '));
}
};
var addRemoveLoadEvents = function(dom, fn, add){
var action = add ? _addEventListener : 'removeEventListener';
if(add){
addRemoveLoadEvents(dom, fn);
}
loadEvents.forEach(function(evt){
dom[action](evt, fn);
});
};
/**
* @param elem { Element }
* @param name { string }
* @param detail { any }
* @param noBubbles { boolean }
* @param noCancelable { boolean }
* @returns { CustomEvent }
*/
var triggerEvent = function(elem, name, detail, noBubbles, noCancelable){
var event = document.createEvent('Event');
if(!detail){
detail = {};
}
detail.instance = lazysizes;
event.initEvent(name, !noBubbles, !noCancelable);
event.detail = detail;
elem.dispatchEvent(event);
return event;
};
var updatePolyfill = function (el, full){
var polyfill;
if( !supportPicture && ( polyfill = (window.picturefill || lazySizesCfg.pf) ) ){
if(full && full.src && !el[_getAttribute]('srcset')){
el.setAttribute('srcset', full.src);
}
polyfill({reevaluate: true, elements: [el]});
} else if(full && full.src){
el.src = full.src;
}
};
var getCSS = function (elem, style){
return (getComputedStyle(elem, null) || {})[style];
};
/**
*
* @param elem { Element }
* @param parent { Element }
* @param [width] {number}
* @returns {number}
*/
var getWidth = function(elem, parent, width){
width = width || elem.offsetWidth;
while(width < lazySizesCfg.minSize && parent && !elem._lazysizesWidth){
width = parent.offsetWidth;
parent = parent.parentNode;
}
return width;
};
var rAF = (function(){
var running, waiting;
var firstFns = [];
var secondFns = [];
var fns = firstFns;
var run = function(){
var runFns = fns;
fns = firstFns.length ? secondFns : firstFns;
running = true;
waiting = false;
while(runFns.length){
runFns.shift()();
}
running = false;
};
var rafBatch = function(fn, queue){
if(running && !queue){
fn.apply(this, arguments);
} else {
fns.push(fn);
if(!waiting){
waiting = true;
(document.hidden ? setTimeout : requestAnimationFrame)(run);
}
}
};
rafBatch._lsFlush = run;
return rafBatch;
})();
var rAFIt = function(fn, simple){
return simple ?
function() {
rAF(fn);
} :
function(){
var that = this;
var args = arguments;
rAF(function(){
fn.apply(that, args);
});
}
;
};
var throttle = function(fn){
var running;
var lastTime = 0;
var gDelay = lazySizesCfg.throttleDelay;
var rICTimeout = lazySizesCfg.ricTimeout;
var run = function(){
running = false;
lastTime = Date.now();
fn();
};
var idleCallback = requestIdleCallback && rICTimeout > 49 ?
function(){
requestIdleCallback(run, {timeout: rICTimeout});
if(rICTimeout !== lazySizesCfg.ricTimeout){
rICTimeout = lazySizesCfg.ricTimeout;
}
} :
rAFIt(function(){
setTimeout(run);
}, true)
;
return function(isPriority){
var delay;
if((isPriority = isPriority === true)){
rICTimeout = 33;
}
if(running){
return;
}
running = true;
delay = gDelay - (Date.now() - lastTime);
if(delay < 0){
delay = 0;
}
if(isPriority || delay < 9){
idleCallback();
} else {
setTimeout(idleCallback, delay);
}
};
};
//based on http://modernjavascript.blogspot.de/2013/08/building-better-debounce.html
var debounce = function(func) {
var timeout, timestamp;
var wait = 99;
var run = function(){
timeout = null;
func();
};
var later = function() {
var last = Date.now() - timestamp;
if (last < wait) {
setTimeout(later, wait - last);
} else {
(requestIdleCallback || run)(run);
}
};
return function() {
timestamp = Date.now();
if (!timeout) {
timeout = setTimeout(later, wait);
}
};
};
var loader = (function(){
var preloadElems, isCompleted, resetPreloadingTimer, loadMode, started;
var eLvW, elvH, eLtop, eLleft, eLright, eLbottom, isBodyHidden;
var regImg = /^img$/i;
var regIframe = /^iframe$/i;
var supportScroll = ('onscroll' in window) && !(/(gle|ing)bot/.test(navigator.userAgent));
var shrinkExpand = 0;
var currentExpand = 0;
var isLoading = 0;
var lowRuns = -1;
var resetPreloading = function(e){
isLoading--;
if(!e || isLoading < 0 || !e.target){
isLoading = 0;
}
};
var isVisible = function (elem) {
if (isBodyHidden == null) {
isBodyHidden = getCSS(document.body, 'visibility') == 'hidden';
}
return isBodyHidden || !(getCSS(elem.parentNode, 'visibility') == 'hidden' && getCSS(elem, 'visibility') == 'hidden');
};
var isNestedVisible = function(elem, elemExpand){
var outerRect;
var parent = elem;
var visible = isVisible(elem);
eLtop -= elemExpand;
eLbottom += elemExpand;
eLleft -= elemExpand;
eLright += elemExpand;
while(visible && (parent = parent.offsetParent) && parent != document.body && parent != docElem){
visible = ((getCSS(parent, 'opacity') || 1) > 0);
if(visible && getCSS(parent, 'overflow') != 'visible'){
outerRect = parent.getBoundingClientRect();
visible = eLright > outerRect.left &&
eLleft < outerRect.right &&
eLbottom > outerRect.top - 1 &&
eLtop < outerRect.bottom + 1
;
}
}
return visible;
};
var checkElements = function() {
var eLlen, i, rect, autoLoadElem, loadedSomething, elemExpand, elemNegativeExpand, elemExpandVal,
beforeExpandVal, defaultExpand, preloadExpand, hFac;
var lazyloadElems = lazysizes.elements;
if((loadMode = lazySizesCfg.loadMode) && isLoading < 8 && (eLlen = lazyloadElems.length)){
i = 0;
lowRuns++;
for(; i < eLlen; i++){
if(!lazyloadElems[i] || lazyloadElems[i]._lazyRace){continue;}
if(!supportScroll || (lazysizes.prematureUnveil && lazysizes.prematureUnveil(lazyloadElems[i]))){unveilElement(lazyloadElems[i]);continue;}
if(!(elemExpandVal = lazyloadElems[i][_getAttribute]('data-expand')) || !(elemExpand = elemExpandVal * 1)){
elemExpand = currentExpand;
}
if (!defaultExpand) {
defaultExpand = (!lazySizesCfg.expand || lazySizesCfg.expand < 1) ?
docElem.clientHeight > 500 && docElem.clientWidth > 500 ? 500 : 370 :
lazySizesCfg.expand;
lazysizes._defEx = defaultExpand;
preloadExpand = defaultExpand * lazySizesCfg.expFactor;
hFac = lazySizesCfg.hFac;
isBodyHidden = null;
if(currentExpand < preloadExpand && isLoading < 1 && lowRuns > 2 && loadMode > 2 && !document.hidden){
currentExpand = preloadExpand;
lowRuns = 0;
} else if(loadMode > 1 && lowRuns > 1 && isLoading < 6){
currentExpand = defaultExpand;
} else {
currentExpand = shrinkExpand;
}
}
if(beforeExpandVal !== elemExpand){
eLvW = innerWidth + (elemExpand * hFac);
elvH = innerHeight + elemExpand;
elemNegativeExpand = elemExpand * -1;
beforeExpandVal = elemExpand;
}
rect = lazyloadElems[i].getBoundingClientRect();
if ((eLbottom = rect.bottom) >= elemNegativeExpand &&
(eLtop = rect.top) <= elvH &&
(eLright = rect.right) >= elemNegativeExpand * hFac &&
(eLleft = rect.left) <= eLvW &&
(eLbottom || eLright || eLleft || eLtop) &&
(lazySizesCfg.loadHidden || isVisible(lazyloadElems[i])) &&
((isCompleted && isLoading < 3 && !elemExpandVal && (loadMode < 3 || lowRuns < 4)) || isNestedVisible(lazyloadElems[i], elemExpand))){
unveilElement(lazyloadElems[i]);
loadedSomething = true;
if(isLoading > 9){break;}
} else if(!loadedSomething && isCompleted && !autoLoadElem &&
isLoading < 4 && lowRuns < 4 && loadMode > 2 &&
(preloadElems[0] || lazySizesCfg.preloadAfterLoad) &&
(preloadElems[0] || (!elemExpandVal && ((eLbottom || eLright || eLleft || eLtop) || lazyloadElems[i][_getAttribute](lazySizesCfg.sizesAttr) != 'auto')))){
autoLoadElem = preloadElems[0] || lazyloadElems[i];
}
}
if(autoLoadElem && !loadedSomething){
unveilElement(autoLoadElem);
}
}
};
var throttledCheckElements = throttle(checkElements);
var switchLoadingClass = function(e){
var elem = e.target;
if (elem._lazyCache) {
delete elem._lazyCache;
return;
}
resetPreloading(e);
addClass(elem, lazySizesCfg.loadedClass);
removeClass(elem, lazySizesCfg.loadingClass);
addRemoveLoadEvents(elem, rafSwitchLoadingClass);
triggerEvent(elem, 'lazyloaded');
};
var rafedSwitchLoadingClass = rAFIt(switchLoadingClass);
var rafSwitchLoadingClass = function(e){
rafedSwitchLoadingClass({target: e.target});
};
var changeIframeSrc = function(elem, src){
var loadMode = elem.getAttribute('data-load-mode') || lazySizesCfg.iframeLoadMode;
// loadMode can be also a string!
if (loadMode == 0) {
elem.contentWindow.location.replace(src);
} else if (loadMode == 1) {
elem.src = src;
}
};
var handleSources = function(source){
var customMedia;
var sourceSrcset = source[_getAttribute](lazySizesCfg.srcsetAttr);
if( (customMedia = lazySizesCfg.customMedia[source[_getAttribute]('data-media') || source[_getAttribute]('media')]) ){
source.setAttribute('media', customMedia);
}
if(sourceSrcset){
source.setAttribute('srcset', sourceSrcset);
}
};
var lazyUnveil = rAFIt(function (elem, detail, isAuto, sizes, isImg){
var src, srcset, parent, isPicture, event, firesLoad;
if(!(event = triggerEvent(elem, 'lazybeforeunveil', detail)).defaultPrevented){
if(sizes){
if(isAuto){
addClass(elem, lazySizesCfg.autosizesClass);
} else {
elem.setAttribute('sizes', sizes);
}
}
srcset = elem[_getAttribute](lazySizesCfg.srcsetAttr);
src = elem[_getAttribute](lazySizesCfg.srcAttr);
if(isImg) {
parent = elem.parentNode;
isPicture = parent && regPicture.test(parent.nodeName || '');
}
firesLoad = detail.firesLoad || (('src' in elem) && (srcset || src || isPicture));
event = {target: elem};
addClass(elem, lazySizesCfg.loadingClass);
if(firesLoad){
clearTimeout(resetPreloadingTimer);
resetPreloadingTimer = setTimeout(resetPreloading, 2500);
addRemoveLoadEvents(elem, rafSwitchLoadingClass, true);
}
if(isPicture){
forEach.call(parent.getElementsByTagName('source'), handleSources);
}
if(srcset){
elem.setAttribute('srcset', srcset);
} else if(src && !isPicture){
if(regIframe.test(elem.nodeName)){
changeIframeSrc(elem, src);
} else {
elem.src = src;
}
}
if(isImg && (srcset || isPicture)){
updatePolyfill(elem, {src: src});
}
}
if(elem._lazyRace){
delete elem._lazyRace;
}
removeClass(elem, lazySizesCfg.lazyClass);
rAF(function(){
// Part of this can be removed as soon as this fix is older: https://bugs.chromium.org/p/chromium/issues/detail?id=7731 (2015)
var isLoaded = elem.complete && elem.naturalWidth > 1;
if( !firesLoad || isLoaded){
if (isLoaded) {
addClass(elem, lazySizesCfg.fastLoadedClass);
}
switchLoadingClass(event);
elem._lazyCache = true;
setTimeout(function(){
if ('_lazyCache' in elem) {
delete elem._lazyCache;
}
}, 9);
}
if (elem.loading == 'lazy') {
isLoading--;
}
}, true);
});
/**
*
* @param elem { Element }
*/
var unveilElement = function (elem){
if (elem._lazyRace) {return;}
var detail;
var isImg = regImg.test(elem.nodeName);
//allow using sizes="auto", but don't use. it's invalid. Use data-sizes="auto" or a valid value for sizes instead (i.e.: sizes="80vw")
var sizes = isImg && (elem[_getAttribute](lazySizesCfg.sizesAttr) || elem[_getAttribute]('sizes'));
var isAuto = sizes == 'auto';
if( (isAuto || !isCompleted) && isImg && (elem[_getAttribute]('src') || elem.srcset) && !elem.complete && !hasClass(elem, lazySizesCfg.errorClass) && hasClass(elem, lazySizesCfg.lazyClass)){return;}
detail = triggerEvent(elem, 'lazyunveilread').detail;
if(isAuto){
autoSizer.updateElem(elem, true, elem.offsetWidth);
}
elem._lazyRace = true;
isLoading++;
lazyUnveil(elem, detail, isAuto, sizes, isImg);
};
var afterScroll = debounce(function(){
lazySizesCfg.loadMode = 3;
throttledCheckElements();
});
var altLoadmodeScrollListner = function(){
if(lazySizesCfg.loadMode == 3){
lazySizesCfg.loadMode = 2;
}
afterScroll();
};
var onload = function(){
if(isCompleted){return;}
if(Date.now() - started < 999){
setTimeout(onload, 999);
return;
}
isCompleted = true;
lazySizesCfg.loadMode = 3;
throttledCheckElements();
addEventListener('scroll', altLoadmodeScrollListner, true);
};
return {
_: function(){
started = Date.now();
lazysizes.elements = document.getElementsByClassName(lazySizesCfg.lazyClass);
preloadElems = document.getElementsByClassName(lazySizesCfg.lazyClass + ' ' + lazySizesCfg.preloadClass);
addEventListener('scroll', throttledCheckElements, true);
addEventListener('resize', throttledCheckElements, true);
addEventListener('pageshow', function (e) {
if (e.persisted) {
var loadingElements = document.querySelectorAll('.' + lazySizesCfg.loadingClass);
if (loadingElements.length && loadingElements.forEach) {
requestAnimationFrame(function () {
loadingElements.forEach( function (img) {
if (img.complete) {
unveilElement(img);
}
});
});
}
}
});
if(window.MutationObserver){
new MutationObserver( throttledCheckElements ).observe( docElem, {childList: true, subtree: true, attributes: true} );
} else {
docElem[_addEventListener]('DOMNodeInserted', throttledCheckElements, true);
docElem[_addEventListener]('DOMAttrModified', throttledCheckElements, true);
setInterval(throttledCheckElements, 999);
}
addEventListener('hashchange', throttledCheckElements, true);
//, 'fullscreenchange'
['focus', 'mouseover', 'click', 'load', 'transitionend', 'animationend'].forEach(function(name){
document[_addEventListener](name, throttledCheckElements, true);
});
if((/d$|^c/.test(document.readyState))){
onload();
} else {
addEventListener('load', onload);
document[_addEventListener]('DOMContentLoaded', throttledCheckElements);
setTimeout(onload, 20000);
}
if(lazysizes.elements.length){
checkElements();
rAF._lsFlush();
} else {
throttledCheckElements();
}
},
checkElems: throttledCheckElements,
unveil: unveilElement,
_aLSL: altLoadmodeScrollListner,
};
})();
var autoSizer = (function(){
var autosizesElems;
var sizeElement = rAFIt(function(elem, parent, event, width){
var sources, i, len;
elem._lazysizesWidth = width;
width += 'px';
elem.setAttribute('sizes', width);
if(regPicture.test(parent.nodeName || '')){
sources = parent.getElementsByTagName('source');
for(i = 0, len = sources.length; i < len; i++){
sources[i].setAttribute('sizes', width);
}
}
if(!event.detail.dataAttr){
updatePolyfill(elem, event.detail);
}
});
/**
*
* @param elem {Element}
* @param dataAttr
* @param [width] { number }
*/
var getSizeElement = function (elem, dataAttr, width){
var event;
var parent = elem.parentNode;
if(parent){
width = getWidth(elem, parent, width);
event = triggerEvent(elem, 'lazybeforesizes', {width: width, dataAttr: !!dataAttr});
if(!event.defaultPrevented){
width = event.detail.width;
if(width && width !== elem._lazysizesWidth){
sizeElement(elem, parent, event, width);
}
}
}
};
var updateElementsSizes = function(){
var i;
var len = autosizesElems.length;
if(len){
i = 0;
for(; i < len; i++){
getSizeElement(autosizesElems[i]);
}
}
};
var debouncedUpdateElementsSizes = debounce(updateElementsSizes);
return {
_: function(){
autosizesElems = document.getElementsByClassName(lazySizesCfg.autosizesClass);
addEventListener('resize', debouncedUpdateElementsSizes);
},
checkElems: debouncedUpdateElementsSizes,
updateElem: getSizeElement
};
})();
var init = function(){
if(!init.i && document.getElementsByClassName){
init.i = true;
autoSizer._();
loader._();
}
};
setTimeout(function(){
if(lazySizesCfg.init){
init();
}
});
lazysizes = {
/**
* @type { LazySizesConfigPartial }
*/
cfg: lazySizesCfg,
autoSizer: autoSizer,
loader: loader,
init: init,
uP: updatePolyfill,
aC: addClass,
rC: removeClass,
hC: hasClass,
fire: triggerEvent,
gW: getWidth,
rAF: rAF,
};
return lazysizes;
}
));
1
https://gitee.com/mirrors/lazysizes.git
git@gitee.com:mirrors/lazysizes.git
mirrors
lazysizes
lazysizes
master

搜索帮助