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代码.好的方面是,这些网站不 ...
随机推荐
- iOS - 语音云通讯
iOS SDK 2.0 语音及图片消息详解本文档将详细介绍融云的语音及图片消息接口功能及使用说明.阅读本文前,我们假设您已经阅读了融云 iOS 开发指南,并掌握融云 SDK 的基本用法. 语音消息用来 ...
- IT应届生如何准备找工作?
今天和一个弟弟吃饭,他明年年初即将计算机研究生毕业.谈论到怎么找工作,觉得自己会的不多,心里非常发虚.虽然我当年找工作也走了很多弯路,思路并不是很清晰.但是工作了这么多年,对企业需要什么样子的人还是有 ...
- Fluent NHibernate关系映射
1.好处:Fluent NHibernate让你不再需要去写NHibernate的标准映射文件(.hbm.xml), 方便了我们的代码重构,提供了代码的易读性,并精简了项目代码 实现: (1).首先我 ...
- [BZOJ 1266][AHOI2006]上学路线(最短路+最小割)
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1266 分析: 很简单的题目,容易想到就是把所有的最短路径挑出来,然后在这个图里跑最小割 ...
- 常用js正则
selectedName = selectedName.replace(/,$/, '');//去除尾部字符串 selectedCode = selectedCode.replace(/,$/, '' ...
- css学习归纳总结
来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...
- overlay-3
if(typeof Shadowbox=="undefined"){ throw"Unable to load Shadowbox, no base library ad ...
- iOS开发中的错误整理,通过storyboard做项目,遇到view看不见,或者view被压缩的情况
前言:在网易新闻的练习中遇到了这个错误 注意:练习中遇到了如图的bug,主要是因为用storyboard布局 600 * 600 显示的时候要经过自动布局,缩小到相应手机的屏幕大小.也就是有的尺寸 ...
- 在 Visual Studio 2013 中创建 ASP.NET Web 项目(0):专题导航 [持续更新中]
写在前面的话 随着 Visual Studio 2013 的正式推出,ASP.NET 和 Visual Studio Web 开发工具 也发布了各自的最新版本. 新版本在构建 One ASP.NET ...
- 人工免疫算法-python实现
AIAIndividual.py import numpy as np import ObjFunction class AIAIndividual: ''' individual of artifi ...