/**
* 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. MJExtension的使用:https://github.com/CoderMJLee/MJExtension

    MJExtension能做什么? MJExtension是一套字典和模型之间互相转换的超轻量级框架 MJExtension能完成的功能 字典(JSON) --> 模型(Model) 模型(Mod ...

  2. Opencv step by step - 鼠标事件

    鼠标事件有下面几种(没有滚轮事件,比较遗憾): #define CV_EVENT_MOUSEMOVE 0 滑动 #define CV_EVENT_LBUTTONDOWN 1 左键点击 #define ...

  3. 一个bug案例分析

    Bug描述: 某大型系统的一个提供基础数据服务的子系统A进行了一次升级.升级的内容为:优化了失败重传功能,在优化的同时,开发人员发现传输数据的时间戳精度只是精确到了秒,于是顺手把精度改成了1/100秒 ...

  4. 第一周Web类WriteUp

    Forms 看到这题目第一反应就是先抓个包试试,抓包之后效果如图所示 看到一个showsource=0,那就想着把它改成1看看会出现什么效果,改成1之后forward,发现网页上变成了这个样子 根据这 ...

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

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

  6. 斯坦福机器学习实现与分析之八(kmeans算法)

    Kmeans算法简介 作为无监督学习领域的一种简单的算法,Kmeans在实际应用中却是相当广泛的.其过程是通过不断交替迭代求得最优的类中心以及每个样本所属类别,具体步骤如下: 确定类别个数k 随机初始 ...

  7. 文件夹文件遍历并插入数据库的操作,IO Directory File的递归操作

    在我们管理内容管理系统时,数据量大时,对机器的依赖性就比较强了,比如,我要将一个文件夹中的很多图片上传到网站,一个个上传会很花时间,就想到了通过遍历文件夹得到文件名,并将路径与文件保存到数据库中对应的 ...

  8. 第三十课:JSDeferred详解1

    本课难度非常大,看一遍,蛋会疼,第二遍蛋不舒服,第三遍应该貌似懂了.初学者莫来,没必要,这完全就是一个研究. JSDeferred是日本高手cho45搞出来的,其易用性远胜于Mochikit Defe ...

  9. java多线程-Condition

    Condition 将 Object 监视器方法(wait.notify 和 notifyAll)分解成截然不同的对象,以便通过将这些对象与任意 Lock 实现组合使用,为每个对象提供多个等待 set ...

  10. MyEclipse内存不足问题

    1.修改eclipse.ini 在Myeclipse安装目录下G:\MyEclipse8.5\Genuitec\MyEclipse 8.5有一个myeclipse.ini配置文件,设置如下: -vma ...