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代码.好的方面是,这些网站不 ...
随机推荐
- C#基础之lock
1.lock的本质 实现线程同步的第一种方式是我们经常使用的lock关键字,它将包围的语句块标记为临界区,这样一次只有一个线程进入临界区并执行代码.下面第一段的几行代码是关于lock关键字的使用方式, ...
- 浅入DNS
1.DNS是怎么工作的 首先我们可以很简单的理解DNS协议,它就是一个将域名与ip地址进行双向转换的协议,而消息类型只有查询和回应2种类型.那客户端查询域名,是要请求谁呢?答案是域名服务器,现在域名服 ...
- 『转载』C# winform 中dataGridView的重绘(进度条,虚线,单元格合并等)
原文转载自:http://hi.baidu.com/suming/item/81e45b1ab9b4585f2a3e2243 最近比较浅的研究了一下dataGridView的重绘,发现里面还是有很多东 ...
- Asp.net MVC 搭建属于自己的框架(一)
为什么要自己搭框架? 大家伙别急,让我慢慢地告诉你!大家有没有这种感觉,从一家跳槽到另一家公司,公司的框架往往是不相同的,这样你必须就得摒弃原来的,学习新的框架. 问题是你用习惯了一种框架,比如封装的 ...
- 《TCP/IP详解卷1:协议》第3章 IP:网际协议(1)-读书笔记
章节回顾: <TCP/IP详解卷1:协议>第1章 概述-读书笔记 <TCP/IP详解卷1:协议>第2章 链路层-读书笔记 <TCP/IP详解卷1:协议>第3章 IP ...
- python 逐行读取文件的三种方法
方法一: 复制代码代码如下: f = open("foo.txt") # 返回一个文件对象 line = f.readline() ...
- 图片百分百问题 z-index问题
遇到的问题: 1.图片设置宽高都为100%,为什么高度没有100%呢? 我日了狗了! 答:因为图片默认高度大于包含框, 此时元素的高度100%将不会参照父元素? 继承出现了问 ...
- Qt无边框,可移动窗口
QPoint dragPosition; void MainWindow::mousePressEvent(QMouseEvent *event) { if(event->button()==Q ...
- 另一套Oracle SQL练习题,更新参考答案
题干: create table student( sno ) primary key, sname ), sage ), ssex ) ); create table teacher( tno ) ...
- iOS边练边学--文件压缩和解压缩的第三方框架SSZipArchive的简单使用
一.非cocoaPods方法,需要注意的是:直接将SSZipArchive拖入项目编译会报错. Undefined symbols for architecture x86_64: "_cr ...