zoukankan      html  css  js  c++  java
  • JS/CSS module LazyLoad 之三

    在开始这篇前,有两个小问题须说明一下

    情况一

    LazyLoad.js(['a.js','a.js'],function(){});
    

    有人会问为什么要在页面中引入两次a.js? 我也想问。其实是多余的。但有人就喜欢这么用,那怎么办。只能凉拌了。我可以在内部对数组中重复元素去重下。但这无疑增加了LazyLoad.js的代码量,或者说我更愿意看到不要这么去写。当然我自己用肯定不会这么写的。

    情况二

    LazyLoad.js(['a.js'], function(){});
    LazyLoad.js(['b.js'], function(){});
    

    这种写法也是杜绝的,它等同于

    LazyLoad.js(['a.js', 'b.js'], function(){});

    有人或许想在每一个js载入后单独有一个回调,这个功能后续有专门的篇幅。 因为这个系列的前提是所有的js都加载后才回调,即所有资源加载完后只回调一次。


    好了,如果你赞同以上约定,那么请继续往下看。

    前两篇完成对js和css的惰性加载功能,但其实还有一些问题的。最重要的就是加载重复资源的问题。这篇会在将已经加载过的资源(JS/CSS)记录下,第二次加载重复的则会有如下提示


    html如下

    <!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做了重构,请仔细比对。


    example下载

  • 相关阅读:
    洛谷 P1919 【模板】A*B Problem升级版(FFT快速傅里叶)
    Codeforces Goodbye 2018
    ubuntu 百度云
    【UOJ 351】新年的叶子
    【SDOI2008】仪仗队
    NOI 2002 贪吃的九头龙
    最大获利
    codeforces 814E An unavoidable detour for home
    codeforces 814D An overnight dance in discotheque
    bzoj3191 [JLOI2013]卡牌游戏
  • 原文地址:https://www.cnblogs.com/snandy/p/2033336.html
Copyright © 2011-2022 走看看