• 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下载

  • 相关阅读:
    MySQL锁之三:MySQL的共享锁与排它锁编码演示
    服务链路追踪(Spring Cloud Sleuth)
    服务网关zuul之四:zuul网关配置
    hdu 1505 City Game (hdu1506加强版)
    PHP设计模式——訪问者模式
    极客互联网电视不是噱头,用户体验成创维G7200核心竞争力
    深入理解JavaScript系列(23):JavaScript与DOM(上)——也适用于新手
    使用php分页类实现简单分类
    管理之路(四)
    poj 2485 Highways (最小生成树)
  • 原文地址:https://www.cnblogs.com/snandy/p/2033336.html
Copyright © 2020-2023  润新知