JS/CSS 延迟加载脚本
2011-04-30 13:52
232 查看
来源:/article/4664279.html
随着web app中JS越来越多,有时页面首次加载时有很多JS并没有用到。这时为了提高下载速度,提高页面渲染效率就需要让这部分暂时不用的JS延迟加载,即只在用到它们的时候再下载。这里会先实现一个最简单JS的惰性加载。后续几篇会逐步加强功能直至一个完整的JS/CSS模块加载库。这个系列里我不会实现队列,即各个JS文件是并行下载的,只有当多个JS全部下载后才执行回调。当然在第二个系列JS Queue LazyLoad中会实现各个JS文件顺序加载,每个JS文件下载后都有一次回调机会。这两种方式有各自的应用场景。
先给出使用接口
示例
这个系统会尽全力去加载所有的JS文件,即当某个文件不存在或加载失败它不会就此中断,仍然会去加载其它的JS文件。直到所有的模块都加载了一次才去回调。
上一篇完成的JS的按需加载,这篇添加个新方法css,完成对CSS文件的加载。接口与JS相同,示例如下
上一篇对JS的加载实现是通过script元素,css则是通过link元素。而link元素仅IE6/7/8/9和Opera中支持其onreadystatechange事件,Firefox/Safari/Chrome既不支持onreadystatechange,也不支持onload。这里取了一个巧使用setTimeout延迟加载。
完整代码
文件下载:http://files.cnblogs.com/snandy/LazyLoad_0.3.js
随着web app中JS越来越多,有时页面首次加载时有很多JS并没有用到。这时为了提高下载速度,提高页面渲染效率就需要让这部分暂时不用的JS延迟加载,即只在用到它们的时候再下载。这里会先实现一个最简单JS的惰性加载。后续几篇会逐步加强功能直至一个完整的JS/CSS模块加载库。这个系列里我不会实现队列,即各个JS文件是并行下载的,只有当多个JS全部下载后才执行回调。当然在第二个系列JS Queue LazyLoad中会实现各个JS文件顺序加载,每个JS文件下载后都有一次回调机会。这两种方式有各自的应用场景。
先给出使用接口
LazyLoad.js( urls // js文件路径 fn // 全部加载后回调函数 scope // 指定回调函数执行上下文 );
示例
LazyLoad.js(['a.js','b.js','c.js'], function(){ alert('加载完毕'); });
这个系统会尽全力去加载所有的JS文件,即当某个文件不存在或加载失败它不会就此中断,仍然会去加载其它的JS文件。直到所有的模块都加载了一次才去回调。
上一篇完成的JS的按需加载,这篇添加个新方法css,完成对CSS文件的加载。接口与JS相同,示例如下
LazyLoad.css(['a.css', 'b.css', 'c.css'], function(){ console.log('css模块加载完毕'); });
上一篇对JS的加载实现是通过script元素,css则是通过link元素。而link元素仅IE6/7/8/9和Opera中支持其onreadystatechange事件,Firefox/Safari/Chrome既不支持onreadystatechange,也不支持onload。这里取了一个巧使用setTimeout延迟加载。
完整代码
LazyLoad = function(win){ var list1, list2, isIE = /*@cc_on!@*/!1, doc = win.document, head = doc.getElementsByTagName('head')[0]; function createEl(type, attrs){ var el = doc.createElement(type), attr; for(attr in attrs){ el.setAttribute(attr, attrs[attr]); } return el; } function jsDone(obj){ list1.shift(); if(!list1.length){ obj.fn.call(obj.scope); } } function cssDone(obj){ list2.shift(); if(!list2.length){ obj.fn.call(obj.scope); } } function js(urls, fn, scope){ var obj = { scope : scope || win, fn : fn }; list1 = [].concat(urls); for(var i=0,len=urls.length; i<len; i++){ var script = createEl('script', {src: urls[i]}); if(isIE){ script.onreadystatechange = function(){ var readyState = this.readyState; if (readyState == 'loaded' || readyState == 'complete'){ this.onreadystatechange = null; jsDone(obj); } } }else{ script.onload = script.onerror = function(){ jsDone(obj); } } head.appendChild(script); } } function css(urls, fn, scope){ var obj = { scope : scope || win, fn : fn }; list2 = [].concat(urls); for(var i=0,len=urls.length; i<len; i++){ var link = createEl('link', { href : urls[i], rel : 'stylesheet', type : 'text/css' }); if(isIE){ link.onreadystatechange = function(){ var readyState = this.readyState; if (readyState == 'loaded' || readyState == 'complete'){ this.onreadystatechange = null; cssDone(obj); } } }else{ setTimeout(function (){ cssDone(obj); },50*len); } head.appendChild(link); } } return { js : js, css : css }; }(this);
文件下载:http://files.cnblogs.com/snandy/LazyLoad_0.3.js
相关文章推荐
- 利用jQuery的ResourceLoader插件实现JS和CSS脚本的动态按需加载
- 动态加载js文件和css脚本
- js,css 文件延迟加载
- js实用方法记录-js动态加载css、js脚本文件
- 延迟加载JS脚本
- 前端性能优化--延迟加载js、css、图片等组件
- js实用方法记录-js动态加载css、js脚本文件
- (转)CDHtmlDialog 中 html 资源加载 css 样式,js 脚本,图片
- 延迟加载js脚本
- 动态加载js、css等文件跨iframe实现
- web优化之-js 异步加载 js延迟执行 js插件
- 动态加载、移除、替换js/css文件
- php ci框架中加载css和js文件失败的解决方法
- Android 拦截WebView加载URL,控制其加载CSS、JS资源
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
- html,css,js加载顺序
- 用JavaScript动态加载CSS和JS文件
- iOS 加载本地HTML,css,js
- jquery.lazyload.js 图片延迟加载
- spring mvc项目的jsp找不到 静态CSS,JS加载js 404错误