javascript preload&lazy load


Posted in Javascript onMay 13, 2010
(function($) { 
(function($) { 
$.preload = function(data, cfg) { 
return new Loader(data, cfg); 
}; 
var maps = {}, 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, timeout, defer) { 
var s, timer; 
if (defer) { 
if (ie) { 
return loaders.img(url, callback, timeout); 
} 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 (timer) 
clearTimeout(timer); 
s.onreadystatechange = s.onload = s.onerror = null; 
callback(url, false); 
} 
if (ie) { 
s.onreadystatechange = function() { 
if (this.readyState === 'loaded' || this.readyState === 'complete') { 
if (timer) 
clearTimeout(timer); 
s.onreadystatechange = null; 
callback(url, true); 
} 
}; 
} else { 
s.onload = function() { 
if (timer) 
clearTimeout(timer); 
s.onload = s.onerror = null; 
callback(url, true); 
}; 
s.onerror = f; 
} 
timer = setTimeout(f, timeout); 
body.appendChild(s); 
}, 
'css' : function(url, callback, timeout, defer) { 
if (defer) { 
return loaders.js(url, callback, timeout, defer); 
} 
var s = document.createElement('link'), timer; 
s.setAttribute('rel', 'stylesheet'); 
s.setAttribute('type', 'text/css'); 
s.setAttribute('href', url); 
function f() { 
if (timer) 
clearTimeout(timer); 
s.onreadystatechange = s.onload = s.onerror = null; 
callback(url, false); 
} 
if (ie) { 
s.onreadystatechange = function() { 
if (this.readyState === 'loaded' || this.readyState === 'complete') { 
if (timer) 
clearTimeout(timer); 
s.onreadystatechange = null; 
callback(url, true); 
} 
}; 
timer = 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() - timer > timeout) { 
callback(url, false); 
} else { 
setTimeout(f, space); 
} 
} 
setTimeout(f, space * 2); 
} else { 
s.onload = function() { 
if (timer) 
clearTimeout(timer); 
s.onload = s.onerror = null; 
callback(url, true); 
}; 
s.onerror = f; 
timer = setTimeout(f, timeout); 
} 
head.appendChild(s); 
}, 
'img' : function(url, callback, timeout) { 
var s = new Image(), timer; 
function f() { 
if (timer) 
clearTimeout(timer); 
s.onload = s.onerror = null; 
callback(url, false); 
} 
s.onload = function() { 
if (timer) 
clearTimeout(timer); 
s.onload = s.onerror = null; 
callback(url, true); 
}; 
s.onerror = f; 
timer = setTimeout(f, timeout); 
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, item, doing = 
0, load; 
cfg = cfg || {}; 
for (; i < l; ++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; j < m; ++j) { 
s = s || item[j].substr(item[j].lastIndexOf('.') + 1); 
items.push(maps[item[j]] = { 
type : loaders[s] ? s : 'img', 
url : item[j], 
require : t, 
callback : c, 
defer : d, 
timeout : tt 
}); 
} 
} else { 
if (!item.type) { 
s = item.url.substr(item.url.lastIndexOf('.') + 1); 
item.type = loaders[s] ? s : 'img'; 
} 
items.push(maps[item.url] = item); 
} 
} 
this.success = this.fail = this.progress = 0; 
if (cfg.onFinish) 
this.onFinish = cfg.onFinish; 
timeout = 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(flag); 
item = maps[url]; 
item.success = flag; 
if (self.progress === 1) { 
self.stop(); 
} 
if (item.parent && !item.defer && !cfg.defer) { 
$(item.parent)[0].innerHTML = data || ''; 
} 
if (item.callback) { 
item.callback(data); 
} 
item.done = true; 
--doing; 
} 
function runnable(item, pend) { 
var it; 
if (typeof item.require === 'string') { 
if (item.done) 
return false; 
if (!item.require) 
return true; 
it = maps[item.require]; 
if (!it || it.done) { 
if (pend) 
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; 
} 
return 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) { 
++doing; 
if (item.type === 'ajax') { 
if (item.cfg && !item.cfg.timeout) 
item.cfg.timeout = timeout; 
fn(item.url, callback, item.cfg); 
} else { 
fn(item.url, callback, item.timeout || timeout, item.defer === undefined ? cfg.defer 
: item.defer); 
} 
}; 
if (load) { 
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; 
done = true; 
if (this.onFinish) { 
if (!doing) 
this.onFinish(); 
else { 
s = setInterval(function() { 
if (!doing) { 
clearInterval(s); 
self.onFinish(); 
} 
}, space); 
} 
} 
} 
}; 
this.pause = function() { 
clearTimeout(this.timer); 
}; 
this.resume = function() { 
this.timer = setTimeout(run, space); 
}; 
this.load = function() { 
clearTimeout(this.timer); 
load = true; 
run(); 
}; 
} 
})(jQuery); 
/** 
* @example 
* var loader = $.preload([ 
// 字符串,采用默认配置 
'1.jpg', '1.js', 
// 对象,自定义配置,如type, require, timeout, defer, callback 
{ 
type : 'img', 
url : 'http://foo.com/foo', 
timeout : 10 
}, { 
url : '3.js', 
callback : fn, 
defer : true, 
require : '1.js' 
}, 
// 对象,可用urls指定一组相同配置 
{ 
type : 'css', 
urls : ['4.css', '5.css'] 
}], { 
// 加载结束后调用 
onFinish : fn, 
// 加载超时 
timeout : 50 
}); 
// 开始预加载 
loader.start(); 
loader.stop(); 
// 暂停预加载 
loader.pause(); 
loader.resume(); 
// 实时加载 
loader.load(); 
*/
Javascript 相关文章推荐
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
js密码强度校验
Nov 10 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
吃通javascript正则表达式
Apr 21 Javascript
一文搞懂redux在react中的初步用法
Jun 09 Javascript
javascript 当前日期转化为中文的实现代码
May 13 #Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 #Javascript
IE8下关于querySelectorAll()的问题
May 13 #Javascript
关于可运行代码无法正常执行的使用说明
May 13 #Javascript
jquery validate.js表单验证的基本用法入门
May 13 #Javascript
JQuery 选择器 xpath 语法应用
May 13 #Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 #Javascript
You might like
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
php 可变函数使用小结
2018/06/12 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
python Django模板的使用方法
2016/01/14 Python
python计算列表内各元素的个数实例
2018/06/29 Python
python日志模块logbook使用方法
2019/09/19 Python
python 函数中的参数类型
2020/02/11 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
远东集团网络工程师面试题
2014/10/20 面试题
中学生教师节演讲稿
2014/09/03 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
大学生实训报告总结
2014/11/05 职场文书
公司庆典欢迎词
2015/01/26 职场文书
教师节主持词开场白
2015/05/29 职场文书
如何在Python中创建二叉树
2021/03/30 Python