DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 動態載入js提高網頁打開速度的方法
動態載入js提高網頁打開速度的方法
編輯:關於JavaScript     

一般來說如果一次性的載入所有需要的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文件");   
} 
// JavaScript Document
function sayHello(){
  alert("Hello World!成功載入JavaScript文件");  
}
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved