JS/CSS module LazyLoad 之三
在开始这篇前,有两个小问题须说明一下
情况一
1 | LazyLoad.js([ 'a.js' , 'a.js' ], function (){}); |
有人会问为什么要在页面中引入两次a.js? 我也想问。其实是多余的。但有人就喜欢这么用,那怎么办。只能凉拌了。我可以在内部对数组中重复元素去重下。但这无疑增加了LazyLoad.js的代码量,或者说我更愿意看到不要这么去写。当然我自己用肯定不会这么写的。
情况二
1 2 | LazyLoad.js([ 'a.js' ], function (){}); LazyLoad.js([ 'b.js' ], function (){}); |
这种写法也是杜绝的,它等同于
1 | LazyLoad.js([ 'a.js' , 'b.js' ], function (){}); |
有人或许想在每一个js载入后单独有一个回调,这个功能后续有专门的篇幅。 因为这个系列的前提是所有的js都加载后才回调,即所有资源加载完后只回调一次。
好了,如果你赞同以上约定,那么请继续往下看。
前两篇完成对js和css的惰性加载功能,但其实还有一些问题的。最重要的就是加载重复资源的问题。这篇会在将已经加载过的资源(JS/CSS)记录下,第二次加载重复的则会有如下提示
html如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE HTML> <html> <head> <meta charset= "utf-8" > <title>LazyLoad_0.3.js</title> <script src= "https://files.cnblogs.com/snandy/LazyLoad_0.3.js" ></script> <script type= "text/javascript" > var ary = [ 'https://files.cnblogs.com/snandy/a.js' , 'https://files.cnblogs.com/snandy/b.js' , 'https://files.cnblogs.com/snandy/c.js' ]; LazyLoad.js(ary, function (){ c(); }); function clk(){ LazyLoad.js([ 'https://files.cnblogs.com/snandy/a.js' ], function (){ alert( 'b' ); }); } </script> </head> <body> <button onclick= "clk()" >loading a.js again</button> </body> </html> |
页面打开后就载入了a,b,c三个js,点击按钮"loading a.js again"后会弹出对话框
从Firebug可以看到,不会重复载入a.js。
但如果此html文件引入的上一篇的LazyLoad_0.2.js,你会发现a.js被再次载入了
此外,上一篇代码虽然较容易理解。如js与css方法时分开的。但冗余代码较多。此篇LazyLoad_0.3.js做了重构,请仔细比对。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步