/**
* 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延迟加载器的更多相关文章

  1. 第一百五十六节,封装库--JavaScript,延迟加载

    封装库--JavaScript,延迟加载 延迟加载的好处,就是在浏览器视窗外的图片,不加载,拖动鼠标到浏览器视窗内后加载,用户不看的图片就不用加载,可以减少服务器大量流量 将图片的src地址用一张统一 ...

  2. JavaScript包管理器综述

    JavaScript包管理器综述 作者:chszs,未经博主同意不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs 对于JavaScript来说.包管理器 ...

  3. Google浏览器开发者工具:CSSViewer(一个Css查看器)

    CSSViewer的简介 CSSViewer是一款可以帮助用户快速查看当前的网页元素的CSS属性的谷歌浏览器插件,在Chrome中安装了CSSViewer插件以后,用户就可以在设计网页的时候,快速地模 ...

  4. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  5. 自己实现的一款在线Javascript正则表达式测试器——JRE-Parser

    本文最初发布于我的个人博客:http://jerryzou.com/posts/jreparser/ 昨天在看<正则表达式30分钟入门教程>的时候,看到博主自己实现了一个C#写的正则测试器 ...

  6. JavaScript之延迟加载

    本文参阅http://www.appelsiini.net/projects/lazyload Javascript Lazyload延迟加载特效,有效降低HTPP连接次数,提高首屏加载时间 1.增加 ...

  7. ECHO.js 纯javascript轻量级延迟加载

    演示 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf ...

  8. JavaScript CSS Style属性对照表

    JavaScript CSS Style属性对照表 盒子标签和属性对照 CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border border border-bottom ...

  9. 5款最好的免费在线网站CSS验证器

    这里是一个名单, 5免费在线CSS验证器的网站.这些网站让你验证你的CSS代码的自由,没有任何麻烦.你可以选择上传文件,验证CSS添加URL,或简单的复制和粘贴完整的CSS代码.好的方面是,这些网站不 ...

随机推荐

  1. [NOIP2016-day1-T2]天天爱跑步running_题解

    题目来源:http://www.lydsy.com/JudgeOnline/problem.php?id=4719 镇楼图: noip滚粗后..订正的第一题. 题目大意: 有若干条路径在一棵树上,问每 ...

  2. JavaScript,php文件上传简单实现

    非ajax,非iframe,最原始使用file控件的文件上传,记录过程备忘.(同步,页面刷新) 实现目标,能够将文件上传到指定位置. 客户端用input的file控件: <form action ...

  3. 【总结】学习Socket编写的聊天室小程序

    1.前言 在学习Socket之前,先来学习点网络相关的知识吧,自己学习过程中的一些总结,Socket是一门很高深的学问,本文只是Socket一些最基础的东西,大神请自觉绕路. 传输协议 TCP:Tra ...

  4. iOS 自定义控件开发(中)

    <iOS 自定义控件开发(上)> <iOS 自定义控件开发(中)> 接上篇iOS自定义控件开发之后,我们尝试另外一种. 在Xcode的右边,会看到如下的图 其中,上面有一个:C ...

  5. Linux 常用工具贴

    1. nmon for Linux  用于监控Linux CPU.IO.网络等,可以生产excel格式的报表  http://nmon.sourceforge.net/pmwiki.php?n=Sit ...

  6. Extension 代表的是私有成员变量

    不明白就问百度.百度搜索得到的结果总是那么多却总是那么千篇一律.不晓得是什么原因. 刚完成一个项目.需要整理一下知识点. 在新项目开始的时候就比较矛盾.因为以前的项目中都有BaseViewContro ...

  7. [wikioi 1519]过路费(最小生成树+树链剖分)

    题目:http://www.wikioi.com/problem/1519/ 题意:给你一个连通的无向图,每条边都有权值,给你若干个询问(x,y),要输出从x到y的路径上边的最大值的最小值 分析:首先 ...

  8. Linq之延迟加载特性

    目录 写在前面 系列文章 延迟加载 总结 写在前面 上篇文章介绍了linq中常见的几个关键字,并列举了几个例子,算是对linq如何使用有了初步了解.上篇文章中也提到了,能够使用linq的场合有一个要求 ...

  9. nginx root && alias 文件路径配置

    文章摘自:http://www.ttlsa.com/nginx/nginx-root_alias-file-path-configuration/ nginx指定文件路径有两种方式root和alias ...

  10. JQuery思维导图