(转)提高网页打开速度的方法_5（按需加载Javascript & css)

最新推荐文章于 2022-03-04 11:56:34 发布

iteye_9160

最新推荐文章于 2022-03-04 11:56:34 发布

阅读量144

点赞数

分类专栏： JavaScript 文章标签： JavaScript CSS IE 浏览器 HTML ViewUI

本文链接：https://blog.csdn.net/iteye_9160/article/details/81895569

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

[size=small][color=red]如果一次载入所有需要的JavaScript代码会造成初始网页打开速度变慢，而且很多载入的代码并不需要使用，这种无谓的性能浪费应该避免。如果要动态载入JavaScript代码,可以利用DOM模型在HTML文档中添加<script>结点，并将此结点的src属性（即外联 Javascript文件）设置为需要动态载入的JavaScript代码。[/color][/size]

下面是一个完成这样功能的例子。

[color=green](1)、新建JsLoaderTest.html文件[/color]

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>按需载入JavaScript代码的例子</title>
<script type="text/javascript">
    function JsLoader(){

   this.load=function(url){
            //获取所有的<script>标记
            var ss=document.getElementsByTagName("script");
            //判断指定的文件是否已经包含，如果已包含则触发onsuccess事件并返回
            for (i=0;i<ss.length;i++){
                if (ss[i].src && ss[i].src.indexOf(url)!=-1){
                    this.onsuccess();
                    return;
                }
            }
            //创建script结点,并将其属性设为外联JavaScript文件
            s=document.createElement("script");
            s.type="text/javascript";
            s.src=url;
            //获取head结点，并将<script>插入到其中
            var head=document.getElementsByTagName("head")[0];
            head.appendChild(s);

            //获取自身的引用
            var self=this;
            //对于IE浏览器，使用readystatechange事件判断是否载入成功
            //对于其他浏览器，使用onload事件判断载入是否成功
            //s.onload=s.onreadystatechange=function(){
            s.onload=s.onreadystatechange=function(){
                //在此函数中this指针指的是s结点对象，而不是JsLoader实例,
                //所以必须用self来调用onsuccess事件，下同。
                if (this.readyState && this.readyState=="loading") return;
                self.onsuccess();
            }
            s.onerror=function(){
                head.removeChild(s);
                self.onfailure();
            }
        };
        //定义载入成功事件
        this.onsuccess=function(){};
        //定义失败事件
        this.onfailure=function(){};
    }

    function btnClick(){
            //创建对象
        var jsLoader=new JsLoader();

        //定义载入成功处理程序
        jsLoader.onsuccess=function(){
             sayHello();
        }

        //定义载入失败处理程序
        jsLoader.onfailure=function(){
             alert("文件载入失败！");
        }

        //开始载入
        jsLoader.load("hello.js");
    }

</script>
</head>

<body>
<label>
<input type="submit" name="Submit" onClick="javascript:btnClick()" value="载入JavaScript文件">
</label>
</body>
</html>

[color=green](2)、新建hello.js文件,包含如下代码：[/color]

// JavaScript Document
function sayHello(){
    alert("Hello World!成功载入JavaScript文件");   
}

转自：[url]http://hi.baidu.com/zhouwanquan/blog/item/cfef9d1666025253f2de328b.html[/url]

iteye_9160

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(转)提高网页打开速度的方法_5（按需加载Javascript & css)

[size=small][color=red]如果一次载入所有需要的JavaScript代码会造成初始网页打开速度变慢，而且很多载入的代码并不需要使用，这种无谓的性能浪费应该避免。如果要动态载入JavaScript代码,可以利用DOM模型在HTML文档中添加结点，并将此结点的src属性（即外联 Javascript文件）设置为需要动态载入的JavaScript代码。[/color][/size...
复制链接

扫一扫

专栏目录