javascript,css延迟加载器
/**
* js/css LazyLoad
*
* 变量hash记录已经加载过的资源,避免重复加载
*
* Z.loadScript('a.js', function() { ... })
*
* Z.loadScript('a.js', option, function() { ... })
*
* 加载多个js后才回调,如果某个js文件没有下载下来则会报错,且不会执行回调函数
* Z.loadScript(['a.js','b.js','c.js'], function() { ... })
*
* option
* charset: 'utf-8'
* scope: xx
*
* 加载多个css后才回调,IE6/7/8/9和Opera中支持link的onreadystatechange事件
* Firefox/Safari/Chrome既不支持onreadystatechange,也不支持onload。使用setTimeout延迟加载
*
* Z.loadLink('a.css', function() { ... })
*
*/ var Z = {
error : function(msg) {
throw new Error(msg)
},
ua : window.navigator.userAgent.toLowerCase(),
ie : /msie/.test(this.ua) && !/opera/.test(this.ua)
}; (function(Z) { var doc = window.document;
var hash = {};
var types = ['Array', 'Function', 'Object', 'String', 'Number', 'Boolean', 'Date'];
var nativeForEach = types.forEach;
var emptyFunc = function () {};
var head = doc.head || doc.getElementsByTagName('head')[0]; function forEach(obj, iterator, context) {
if (obj == null) return;
if (nativeForEach && obj.forEach === nativeForEach) {
obj.forEach(iterator, context)
} else if ( obj.length === +obj.length ) {
for (var i = 0; i < obj.length; i++) {
if (iterator.call(context||obj[i], obj[i], i, obj) === true) return
}
} else {
for (var k in obj) {
if (iterator.call(context||obj[k], obj[k], k, obj) === true) return
}
}
} forEach(types, function(name) {
Z['is' + name] = function(obj) {
if (obj === undefined || obj === null) return false;
return Object.prototype.toString.call(obj) === '[object ' + name + ']'
}
}); function createEl(type, attrs) {
var el = doc.createElement(type), attr;
for (attr in attrs) {
el.setAttribute(attr, attrs[attr])
}
return el
}
function done(list, obj) {
hash[obj.url] = true;
list.shift();
if (!list.length) {
obj.callback.call(obj.scope)
}
}
function load(type, urls, option, callback) { if (Z.isString(urls)) {
urls = [urls]
} if (Z.isFunction(option)) {
callback = option;
option = {}
} option = option || {}; var obj = {
scope: option.scope || window,
callback: callback || emptyFunc
};
var list = [].concat(urls);
var charset = option.charset || 'utf-8'; forEach(urls, function(url, i) {
var el = null; // 已经加载的不再加载
if (hash[url]) {
Z.error('warning: ' + url + ' has loaded.')
} if (type === 'js') {
el = createEl('script', {
src: url,
async: 'async',
charset: charset
})
} else {
el = createEl('link', {
href: url,
rel: 'stylesheet',
type: 'text/css'
})
} (function(url) {
if (Z.ie) {
el.onreadystatechange = function() {
var readyState = this.readyState;
if(readyState === 'loaded' || readyState === 'complete') {
obj.url = url;
this.onreadystatechange = null;
done(list, obj)
}
}
} else {
if (type == 'js') {
el.onload = function() {
obj.url = url;
done(list, obj)
};
el.onerror = function () {
Z.error(url + ' 不存在');
}
} else {
setTimeout(function() {
obj.url = url;
done(list, obj)
}, 100)
}
}
})(url); if (type === 'js') {
head.insertBefore(el, head.firstChild)
} else {
head.appendChild(el)
}
}) } Z.loadScript = function(urls, option, callback) {
load('js', urls, option, callback)
}; Z.loadLink = function(urls, option, callback) {
load('css', urls, option, callback)
} })(Z);
javascript,css延迟加载器的更多相关文章
- 第一百五十六节,封装库--JavaScript,延迟加载
封装库--JavaScript,延迟加载 延迟加载的好处,就是在浏览器视窗外的图片,不加载,拖动鼠标到浏览器视窗内后加载,用户不看的图片就不用加载,可以减少服务器大量流量 将图片的src地址用一张统一 ...
- JavaScript包管理器综述
JavaScript包管理器综述 作者:chszs,未经博主同意不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs 对于JavaScript来说.包管理器 ...
- Google浏览器开发者工具:CSSViewer(一个Css查看器)
CSSViewer的简介 CSSViewer是一款可以帮助用户快速查看当前的网页元素的CSS属性的谷歌浏览器插件,在Chrome中安装了CSSViewer插件以后,用户就可以在设计网页的时候,快速地模 ...
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
- 自己实现的一款在线Javascript正则表达式测试器——JRE-Parser
本文最初发布于我的个人博客:http://jerryzou.com/posts/jreparser/ 昨天在看<正则表达式30分钟入门教程>的时候,看到博主自己实现了一个C#写的正则测试器 ...
- JavaScript之延迟加载
本文参阅http://www.appelsiini.net/projects/lazyload Javascript Lazyload延迟加载特效,有效降低HTPP连接次数,提高首屏加载时间 1.增加 ...
- ECHO.js 纯javascript轻量级延迟加载
演示 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf ...
- JavaScript CSS Style属性对照表
JavaScript CSS Style属性对照表 盒子标签和属性对照 CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border border border-bottom ...
- 5款最好的免费在线网站CSS验证器
这里是一个名单, 5免费在线CSS验证器的网站.这些网站让你验证你的CSS代码的自由,没有任何麻烦.你可以选择上传文件,验证CSS添加URL,或简单的复制和粘贴完整的CSS代码.好的方面是,这些网站不 ...
随机推荐
- rem详解及使用方法
好像有一段时间没有写博客了……今天刚好总结一下rem的使用方法 首先,先说一个常识,浏览器的默认字体高都是16px.步入正题-----〉 兼容性: 目前,IE9+,Firefox.Chrome.Saf ...
- C#爬页面总结
错误的思路是这样的:发送一个访问页面的请求过去,得到一个html页面,然后我要的数据全都在这上面.后来发现不是这样的,也猜到可能是页面加载之后还有js代码的ajax的异步加载,那么问题来了?我是不是要 ...
- [wikioi 1307][poj 2054]欧少堆(乱搞)
题目:http://www.wikioi.com/problem/1307/ 题意:给你一个树,上面有n个节点,每个节点都有一个价值p,求一个n个节点的排列顺序,是的Σi*p[i]最小(要求父节点一定 ...
- [USACO2004][poj2373]Dividing the Path(DP+单调队列)
http://poj.org/problem?id=2373 题意:一条直线分割成N(<=25000)块田,有一群奶牛会在其固定区域吃草,每1把雨伞可以遮住向左右延伸各A到B的区域,一只奶牛吃草 ...
- 每天一个linux命令(33):ps命令
Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...
- Android Fresco (Facebook开源的图片加载管理库)
Fresco是Facebook开源的一个图片加载和管理库. 这里是Fresco的GitHub网址. 同类型的开源库市面有非常多,比如Picasso, Universal Image Loader, G ...
- 【kAri OJ】621. 廖神的树
时间限制 3000 ms 内存限制 65536 KB 题目描述 廖神和男神在植树节的时候准备玩一个奇怪的游戏,他们现在有一个被分割成n*n个格子的矩形土地,他们现在准备往这个地里种树,但这个种树游戏必 ...
- Oracle创建DBLink的方法
文章从http://blog.csdn.net/davidhsing/article/details/6408770拷贝过来的 1.如果需要创建全局 DBLink,则需要先确定用户有创建 dblink ...
- 【BZOJ-2295】我爱你啊 暴力
2295: [POJ Challenge]我爱你啊 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 202 Solved: 141[Submit][St ...
- python运行报错:urllib2.URLError: <urlopen error [Errno 10061] >
Traceback (most recent call last): File "F:\adt-bundle-windows-x86_64-20140702\eclipse\workspac ...