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

  • 相关阅读:
    spring mvc 返回json
    spring mvc 解决后台传递值乱码问题
    sring mvc 返回值至jsp界面的几种方式
    spring mvc 注解访问控制器以及接收form数据的方式,包括直接接收日期类型及对象的方法
    spring mvc 通过配置xml访问控制器的三种方式
    spring mvc 入门配置
    HBase 学习笔记
    Centos搭建Linux测试环境,几个基本的设置项
    kafka 集群安装与安装测试
    Kafka 分布式消息队列介绍
  • 原文地址:https://www.cnblogs.com/snandy/p/2033336.html
Copyright © 2011-2022 走看看