javascript 사전 로드&지연 로드_javascript技巧

코드 복사 코드는 다음과 같습니다.

(function($) {
(function($) {
$.preload = function(data, cfg) {
return new Loader(data, cfg);
};
var map = {}, on = $.event.add, un = $.event.remove, head = document.getElementsByTagName('head')[0], body =
document.body, bs = $.browser, 즉 = bs.msie, webkit = bs.webkit, gecko = bs.mozilla, space = 1000, ajax =
$.ajax,
loaders = $.preload.loaders = {
'js': function(url, callback, timeout, defer) {
var s, 타이머
if (defer) {
if (ie) {
return loaders.img(url; , 콜백, 시간 초과);
} else {
s = document.createElement('object')
s.data = url
s.width = s.height = 0; >}
} else {
s = document.createElement('script')
s.setAttribute('type', 'text/javascript')
s.setAttribute('src' , url);
}
function f() {
if(타이머)
clearTimeout(timer)
s.onreadystatechange = s.onload = s.onerror = null; >callback(url, false);
}
if (ie) {
s.onreadystatechange = function() {
if (this.readyState === 'loaded' || this.readyState === '완료') {
if (타이머)
clearTimeout(타이머);
s.onreadystatechange = null;
콜백(url, true);
}
};
} else {
s.onload = function() {
if(타이머)
clearTimeout(타이머);
s.onload = s.onerror = null;
콜백(url, true);
};
s.onerror = f;
}
timer = setTimeout(f, timeout);
body.appendChild(들);
},
'css' : function(url, callback, timeout, defer) {
if (defer) {
return loaders.js(url, callback, timeout, 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 (즉) {
s.onreadystatechange = function() {
if (this.readyState === '로드됨' || this.readyState === '완료') {
if(타이머)
clearTimeout(타이머);
s.onreadystatechange = null;
콜백(url, true);
}
};
타이머 = setTimeout(f, timeout);
} 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;
콜백(url, true);
};
s.onerror = f;
타이머 = setTimeout(f, timeout);
}
head.appendChild(들);
},
'img' : function(url, callback, timeout) {
var s = new Image(), 타이머;
function f() {
if(타이머)
clearTimeout(타이머);
s.onload = s.onerror = null;
콜백(url, false);
}
s.onload = function() {
if(타이머)
clearTimeout(타이머);
s.onload = s.onerror = null;
콜백(url, true);
};
s.onerror = f;
타이머 = setTimeout(f, timeout);
s.src = URL;
},
'ajax' : 함수(url, 콜백, cfg) {
cfg = cfg || {};
cfg.url = url;
cfg.success = function(data) {
callback(url, true, data);
};
cfg.error = function() {
callback(url, false);
};
아약스(cfg);
}
};
function Loader(data, cfg) {
var self = this, cur = -1, items = [], 보류 중인 항목 = [], done, i = 0, l = data.length, j, m, s, t, c, d, tt, 항목, 수행 =
0, 로드;
cfg = cfg || {};
for (; i 항목 = 데이터[i];
if (typeof item === 'string') {
s = item.substr(item.lastIndexOf('.') 1);
items.push(maps[item] = {
type : 로더[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.urls, m = 항목.길이 j < m; j) {
s = s || item[j].substr(item[j].lastIndexOf('.') 1);
items.push(maps[item[j]] = {
type : 로더[s] ? s : 'img',
url : item[j],
require : t,
콜백 : c,
defer : d,
timeout : tt
});
}
} else {
if (!item.type) {
s = item.url.substr(item.url.lastIndexOf('.') 1);
item.type = 로더[들] ? s : 'img';
}
items.push(maps[item.url] = 항목);
}
}
this.success = this.fail = this.progress = 0;
if (cfg.onFinish)
this.onFinish = cfg.onFinish;
시간 초과 = cfg.timeout || 2000;
함수 콜백(url, 플래그, 데이터) {
if (플래그) {
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)
false를 반환합니다.
if (!item.require)
true를 반환합니다.
그것 = 지도[item.require];
if (!it || it.done) {
if (보류)
pendings.shift();
if (it && it.success) {
true를 반환합니다.
} else {
콜백(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 = 보류 중[0];
if (!item || !runnable(item, true)) {
while (item = items[ cur]) {
if (runnable(item)) {
break;
}
}
}
if (항목) {
var fn = loaders[item.type || 'img'];
if (fn) {
하고;
if (item.type === 'ajax') {
if (item.cfg && !item.cfg.timeout)
item.cfg.timeout = 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(delay) {
if (!done)
this.timer = setTimeout(run, Delay > space ? Delay : space);
};
this.stop = function() {
if (this.timer) {
clearTimeout(this.timer);
this.timer = null;
완료 = 사실;
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;
실행();
};
}
})(jQuery);
/**
* @example
* var loader = $.preload([
// 문자열, 기본 구성 사용
'1.jpg', '1.js',
// Object , 유형, 요구, 시간 초과, 연기, 콜백과 같은 사용자 정의 구성
{
유형 : 'img',
url : 'http://foo.com/foo',
시간 초과 : 10
}, {
url : '3.js',
callback : fn,
defer : true,
require : '1.js'
},
/ / Object, urls를 사용하여 동일한 구성의 집합을 지정할 수 있습니다
{
type : 'css',
urls : ['4.css', '5.css']
} ], {
// 로딩이 완료된 후
onFinish를 호출합니다: fn,
// 로딩 시간 제한
timeout: 50
})
// 사전 로드 시작
loader .start() ;
loader.stop();
// 사전 로드 일시 중지
loader.pause()
loader.resume(); >로더.로드( )
*/