suchen

Heim >Web-Frontend >js-Tutorial >So laden Sie js dynamisch, um die Geschwindigkeit beim Öffnen von Webseiten zu verbessern. Javascript-Fähigkeiten

So laden Sie js dynamisch, um die Geschwindigkeit beim Öffnen von Webseiten zu verbessern. Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 16:42:311122Durchsuche

Wenn Sie den gesamten erforderlichen JavaScript-Code auf einmal laden, wird die erste Webseite jedoch langsam geöffnet. Viele der geladenen Codes müssen jedoch nicht verwendet werden . Wenn Sie JavaScript-Code dynamisch laden möchten, können Sie das DOM-Modell verwenden, um einen 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Knoten im HTML-Dokument hinzuzufügen und das src-Attribut dieses Knotens (d. h. externe Javascript-Datei) auf den erforderlichen JavaScript-Code festzulegen dynamisch geladen werden.

Das Folgende ist ein Beispiel für die Vervollständigung einer solchen Funktion:

(1), erstellen Sie eine neue JsLoaderTest.html-Datei 

<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). Erstellen Sie eine neue hello.js-Datei, einschließlich des folgenden Codes: 

// JavaScript Document 
function sayHello(){ 
  alert("Hello World!成功载入JavaScript文件");   
} 
// JavaScript Document
function sayHello(){
  alert("Hello World!成功载入JavaScript文件");  
}
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery-Imitation des Baidu-Eingabe-Tag-Plug-Ins mit Renderings_jqueryNächster Artikel：jQuery-Imitation des Baidu-Eingabe-Tag-Plug-Ins mit Renderings_jquery

In Verbindung stehende Artikel

Mehr sehen