JS module LazyLoad之一

来源:http://www.sh-fengwen.com 作者:瘦身美容 人气:192 发布时间:2019-09-04
摘要:随着webapp中JS越来越多,有时页面首次加载时有很多JS并没有用到。这时为了提高下载速度,提高页面渲染效率就需要让这部分暂时不用的JS延迟加载,即只在用到它们的时候再下载。这

随着web app中JS越来越多,有时页面首次加载时有很多JS并没有用到。这时为了提高下载速度,提高页面渲染效率就需要让这部分暂时不用的JS延迟加载,即只在用到它们的时候再下载。这里会先实现一个最简单JS的惰性加载。后续几篇会逐步加强功能直至一个完整的JS/CSS模块加载库。这个系列里我不会实现队列,即各个JS文件是并行下载的,只有当多个JS全部下载后才执行回调。当然在第二个系列JS Queue LazyLoad中会实现各个JS文件顺序加载,每个JS文件下载后都有一次回调机会。这两种方式有各自的应用场景。

在开始这篇前,有两个小问题须说明一下
情况一
1
LazyLoad.js([a.js,a.js],function(){});
有人会问为什么要在页面中引入两次a.js? 我也想问。其实是多余的。但有人就喜欢这么用,那怎么办。只能凉拌了。我可以在内部对数组中重复元素去重下。但这无疑增加了LazyLoad.js的代码量,或者说我更愿意看到不要这么去写。当然我自己用肯定不会这么写的。
情况二
1
LazyLoad.js([a.js], function(){});
2
LazyLoad.js([b.js], function(){});
这种写法也是杜绝的,它等同于
1
LazyLoad.js([a.js, b.js], function(){});
有人或许想在每一个js载入后单独有一个回调,这个功能后续有专门的篇幅。 因为这个系列的前提是所有的js都加载后才回调,即所有资源加载完后只回调一次。

 

好了,如果你赞同以上约定,那么请继续往下看。
前两篇完成对js和css的惰性加载功能,但其实还有一些问题的。最重要的就是加载重复资源的问题。这篇会在将已经加载过的资源(JS/CSS)记录下,第二次加载重复的则会有如下提示

先给出使用接口

图片 1

view sourceprint?1 LazyLoad.js( 

html如下
01
<!DOCTYPE HTML>
02
<html>
03
    <head>
04
        <meta charset="utf-8">
05
        <title>LazyLoad_0.3.js</title>
06
        <script src=";
07
        <script type="text/javascript">
08
            var ary = [
09
                ,
10
                ,
11
               
12
            ];
13
            LazyLoad.js(ary, function(){
14
                c();
15
            });
16
            function clk(){
17
                LazyLoad.js([], function(){
18
                    alert(b);
19
                });
20
            }
21
        </script>
22
    </head>
23
    <body>
24
        <button onclick="clk()">loading a.js again</button>
25
    </body>
26
</html>
页面打开后就载入了a,b,c三个js,点击按钮"loading a.js again"后会弹出对话框

2     urls  // js文件路径 

图片 2

3     fn    // 全部加载后回调函数 

从Firebug可以看到,不会重复载入a.js。

4     scope // 指定回调函数执行上下文 

图片 3

5 );

但如果此html文件引入的上一篇的LazyLoad_0.2.js,你会发现a.js被再次载入了

 

图片 4

示例

情况一 1 LazyLoad.js([a.js,a.js],function(){}); 有人会问为什么要在页面中引入两次a.js? 我也想问。其实...

view sourceprint?1 LazyLoad.js([a.js,b.js,c.js], function(){ 

2     alert(加载完毕); 

3 });

 

这个系统会尽全力去加载所有的JS文件,即当某个文件不存在或加载失败它不会就此中断,仍然会去加载其它的JS文件。直到所有的模块都加载了一次才去回调。

 

完整代码

view sourceprint?01 LazyLoad = function(win){    

02     var list, 

03         isIE = /*@[email protected]*/!1, 

04         doc = win.document, 

05         head = doc.getElementsByTagName(head)[0]; 

06   

07     function createEl(type, attrs){ 

08         var el = doc.createElement(type), 

09             attr; 

10         for(attr in attrs){ 

11             el.setAttribute(attr, attrs[attr]); 

12         } 

13         return el; 

14     } 

本文由美高梅游戏平台网站发布于瘦身美容,转载请注明出处:JS module LazyLoad之一

关键词:

上一篇:理解javascript异步编程,javascript异步编程

下一篇:没有了

最火资讯