javascript preload&lazyload_javascript技巧

コードをコピー コードは次のとおりです:

(function($) {
(function($) {
$.preload = function(data, cfg) {
return new Loader(data, cfg);
};
var マップ = {}、on = $.event.add、un = $.event.remove、head = document.getElementsByTagName('head')[0]、body =
document.body、 bs = $.browser、ie = bs.msie、webkit = bs.webkit、gecko = bs.mozilla、space = 1000、ajax =
$.ajax、
loaders = $.preload.loaders = {
'js' : function(url, callback, ti​​meout, defer) {
var s, timer;
if (defer) {
if (ie) {
return loaders.img(url) 、コールバック、タイムアウト);
s = document.createElement('object');
s.width = s.height = 0; >}
} else {
s = document.createElement('script');
s.setAttribute('type', 'text/javascript'); , url);
関数 f() {
if (タイマー)
clearTimeout(タイマー);
s.onreadystatechange = s.onload = s.onerror = null; >callback(url, false);
}
if (ie) {
s.onreadystatechange = function() {
if (this.readyState === 'loaded' || this.readyState === 'complete') {
if (タイマー)
clearTimeout(タイマー);
s.onreadystatechange = null;
callback(url, true);
}
};
} else {
s.onload = function() {
if (タイマー)
clearTimeout(タイマー);
s.onload = s.onerror = null;
callback(url, true);
};
s.onerror = f;
}
timer = setTimeout(f, timeout);
body.appendChild(s);
},
'css' : function(url, callback, ti​​meout, defer) {
if (defer) {
return loaders.js(url, callback, ti​​meout, defer);
}
var s = document.createElement('link'), タイマー;
s.setAttribute('rel', 'stylesheet');
s.setAttribute('type', 'text/css');
s.setAttribute('href', url);
function f() {
if (タイマー)
clearTimeout(タイマー);
s.onreadystatechange = s.onload = s.onerror = null;
コールバック(url, false);
}
if (ie) {
s.onreadystatechange = function() {
if (this.readyState === 'loaded' || this.readyState === 'complete') {
if (タイマー)
clearTimeout(タイマー);
s.onreadystatechange = null;
callback(url, true);
}
};
タイマー = setTimeout(f, タイムアウト);
} else if (webkit || gecko) {
timer = new Date();
function f() {
if (('sheet' in s) && ('cssRules' in s.sheet)) {
try {
callback(url, !!s.sheet. cssRules[0]);
} catch (e) {
setTimeout(f, space);
}
} else if (new Date() - タイマー > タイムアウト) {
callback(url, false);
} else {
setTimeout(f, space);
}
}
setTimeout(f, space * 2);
} else {
s.onload = function() {
if (タイマー)
clearTimeout(タイマー);
s.onload = s.onerror = null;
callback(url, true);
};
s.onerror = f;
タイマー = setTimeout(f, タイムアウト);
}
head.appendChild(s);
},
'img' : function(url, callback, ti​​meout) {
var s = new Image(), timer;
function f() {
if (タイマー)
clearTimeout(タイマー);
s.onload = s.onerror = null;
コールバック(url, false);
}
s.onload = function() {
if (タイマー)
clearTimeout(タイマー);
s.onload = s.onerror = null;
callback(url, true);
};
s.onerror = f;
タイマー = setTimeout(f, タイムアウト);
s.src = URL;
},
'ajax' : function(url, callback, cfg) {
cfg = cfg || {};
cfg.url = URL;
cfg.success = function(data) {
callback(url, true, data);
};
cfg.error = function() {
callback(url, false);
};
ajax(cfg);
}
};
function Loader(data, cfg) {
var self = this、cur = -1、items = []、pendings = []、done、i = 0、l = data.length、j、m、 s、t、c、d、tt、アイテム、実行中 =
0、ロード;
cfg = cfg || {};
for (; i item = data[i];
if (typeof item === 'string') {
s = item.substr(item.lastIndexOf('.') 1);
items.push(maps[item] = {
type :loaders[s] ? s : 'img',
url : item
});
} else if (item.urls) {
for (j = 0, s = item.type, t = item.require, c = item.callback, d = item.defer, tt = item.timeout , item =
item.urls, m = item.length; {
s = s || item[j].substr(item[j].lastIndexOf('.') 1);
items.push(maps[item[j]] = {
type :loaders[s] ? s : 'img',
url : item[j],
require : t,
コールバック : c,
遅延 : d,
タイムアウト : tt
});
}
} else {
if (!item.type) {
s = item.url.substr(item.url.lastIndexOf('.') 1);
item.type = ローダー[s] ? s: 'img';
}
items.push(maps[item.url] = item);
}
}
this.success = this.fail = this.progress = 0;
if (cfg.onFinish)
this.onFinish = cfg.onFinish;
タイムアウト = cfg.timeout || 2000年;
function callback(url, flag, data) {
if (flag) {
self.success;
} else {
self.fail;
}
self.progress = (self.success self.fail) / items.length;
console.info(url);
console.warn(フラグ);
アイテム = マップ[url];
item.success = フラグ;
if (self.progress === 1) {
self.stop();
}
if (item.parent && !item.defer && !cfg.defer) {
$(item.parent)[0].innerHTML = データ || '';
}
if (item.callback) {
item.callback(data);
}
item.done = true;
--やってます;
}
function runnable(item, pend) {
var it;
if (typeof item.require === 'string') {
if (item.done)
return false;
if (!item.require)
true を返します。
it = マップ[item.require];
if (!it || it.done) {
if (保留)
pendings.shift();
if (it && it.success) {
return true;
} else {
callback(item.url, false);
}
} else if (!pend) {
pendings.push(item);
}
} else {
for (it = item.length; it--;) {
if (!runnable(item[it], pend))
return false;
}
true を返します。
}
}
function run() {
var item = pendings[0];
if (!item || !runnable(item, true)) {
while (item = items[ cur]) {
if (runnable(item)) {
break;
}
}
}
if (item) {
var fn =loaders[item.type || 'img'];
if (fn) {
実行中;
if (item.type === 'ajax') {
if (item.cfg && !item.cfg.timeout)
item.cfg.timeout = タイムアウト;
fn(item.url, コールバック, item.cfg);
} else {
fn(item.url, callback, item.timeout || timeout, item.defer === 未定義 ? cfg.defer
: item.defer);
}
};
if (ロード) {
run();
} else {
self.timer = setTimeout(run, space);
}
} else if (pendings.length) {
self.timer = setTimeout(run, space);
}
}
this.start = function(lay) {
if (!done)
this.timer = setTimeout(run, 遅延 > スペース ? 遅延 : スペース);
};
this.stop = function() {
if (this.timer) {
clearTimeout(this.timer);
this.timer = null;
完了 = true;
if (this.onFinish) {
if (!doing)
this.onFinish();
else {
s = setInterval(function() {
if (!doing) {
clearInterval(s);
self.onFinish();
}
} 、 空間）;
}
}
}
};
this.pause = function() {
clearTimeout(this.timer);
};
this.resume = function() {
this.timer = setTimeout(run, space);
};
this.load = function() {
clearTimeout(this.timer);
ロード = true;
run();
};
}
})(jQuery);
/**
* @example
* varloader = $.preload([
// 文字列、デフォルト設定を使用
'1.jpg', '1.js',
// Object ,カスタム構成 (type、require、timeout、defer、callback など)
{
type : 'img',
url : 'http://foo.com/foo',
timeout : 10
}, {
url : '3.js',
callback : fn,
defer : true,
require : '1.js'
},
/ / オブジェクト、URL は同じ設定のセットを指定するために使用できます
{
type : 'css',
urls : ['4.css', '5.css']
} ], {
// ロード完了後に
onFinish を呼び出します: fn,
// ロード タイムアウト
timeout: 50
}); .start() ;
loader.stop();
// プリロードを一時停止します
loader.resume(); >loader.load( );
*/