`
gongmingwind
  • 浏览: 577737 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

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

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


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

(1)、新建JsLoaderTest.html文件 

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

(2)、新建hello.js文件,包含如下代码： 
// JavaScript Document
function sayHello(){
    alert("Hello World!成功载入JavaScript文件");   
}


转自：http://hi.baidu.com/zhouwanquan/blog/item/cfef9d1666025253f2de328b.html
分享到：
| 实战JavaScript按需加载Js
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics