Rumah > Artikel > hujung hadapan web > Bagaimana untuk memuatkan js secara dinamik untuk meningkatkan kemahiran speed_javascript membuka halaman web

Bagaimana untuk memuatkan js secara dinamik untuk meningkatkan kemahiran speed_javascript membuka halaman web

WBOYasal: 2016-05-16 16:42:311047semak imbas

Secara umumnya, jika anda memuatkan semua kod JavaScript yang diperlukan sekali gus, ia akan menyebabkan halaman web awal dibuka dengan perlahan Walau bagaimanapun, banyak kod yang dimuatkan tidak perlu digunakan pembaziran prestasi yang tidak perlu ini . Jika anda ingin memuatkan kod JavaScript secara dinamik, anda boleh menggunakan model DOM untuk menambah 855348821b2e8f2cc4b633bf98f064df nod dalam dokumen HTML dan menetapkan atribut src nod ini (iaitu, fail Javascript luaran) kepada kod JavaScript yang perlu dimuatkan secara dinamik.

Berikut ialah contoh melengkapkan fungsi sedemikian:

(1), buat fail JsLoaderTest.html baharu

<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). Cipta fail hello.js baharu, termasuk kod berikut:

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：pemalam teg input Baidu tiruan jQuery dengan renderings_jqueryArtikel seterusnya：pemalam teg input Baidu tiruan jQuery dengan renderings_jquery

Artikel berkaitan

Lihat lagi