Maison > Article > interface Web > Comment charger dynamiquement js pour améliorer les compétences d'ouverture de page Web speed_javascript

Comment charger dynamiquement js pour améliorer les compétences d'ouverture de page Web speed_javascript

WBOYoriginal: 2016-05-16 16:42:311044parcourir

De manière générale, si vous chargez tout le code JavaScript requis en même temps, la page Web initiale s'ouvrira lentement. Cependant, de nombreux codes chargés n'ont pas besoin d'être utilisés. Ce gaspillage de performances inutile doit être évité. . Si vous souhaitez charger dynamiquement du code JavaScript, vous pouvez utiliser le modèle DOM pour ajouter un nœud 3f1c4e4b6b16bbbd69b2ee476dc4f83a dans le document HTML et définir l'attribut src de ce nœud (c'est-à-dire un fichier Javascript externe) sur le code JavaScript qui doit être chargé dynamiquement.

Ce qui suit est un exemple de réalisation d'une telle fonction :

(1), créez un nouveau fichier 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). Créez un nouveau fichier hello.js, comprenant le code suivant :

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jQuery imitation plug-in de balise d'entrée Baidu avec Renders_jqueryArticle suivant：jQuery imitation plug-in de balise d'entrée Baidu avec Renders_jquery

Articles Liés

Voir plus