Explication détaillée de la façon d'utiliser javascript pour charger un script et exécuter des exemples de code de rappel

Nous pouvons créer dynamiquement l'élément 3f1c4e4b6b16bbbd69b2ee476dc4f83a, puis charger le script en modifiant son attribut src, mais comment savoir que le fichier de script est chargé, car certaines de nos fonctions doivent prendre effet après le script est chargé pour démarrer l'exécution. Dans le navigateur IE, vous pouvez utiliser onreadystatechange de l'élément 3f1c4e4b6b16bbbd69b2ee476dc4f83a pour surveiller le changement d'état de chargement et juger si le script est chargé en jugeant si son état prêt est chargé ou terminé. Les navigateurs non-IE peuvent utiliser onload pour déterminer directement si le script est chargé.

Un processus de mise en œuvre simple ressemble à ceci :

//IE下：
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.onreadystatechange = function() {
  if(this.readyState == "loaded" || this.readyState == "complete"){
    alert("加载成功啦！");
  }
}
script.setAttribute("src",scripts[i]);

//Opera、FF、Chrome等：
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.onload = function() {
  alert("加载成功啦！");
}
script.setAttribute("src",scripts[i]);

Le principe est très simple, basé sur ces deux principes simples, nous faisons quelques modifications, à savoir les scripts de chargement en série et de chargement parallèle.

Lorsqu'un tableau contenant plusieurs chemins de fichiers JS est transmis, la fonction de chargement en série commence par le chargement du premier fichier de script. Chaque fois qu'un fichier est chargé avec succès, il commence à charger le fichier de script suivant. . Exécutez ensuite la fonction de rappel. Le chargement parallèle charge tous les fichiers de script depuis le début, c'est-à-dire qu'ils commencent à se charger au même point. Lorsque tout le chargement est terminé, la fonction de rappel est exécutée.

Après tests, ces deux fonctions sont compatibles avec tous les navigateurs grand public actuels.

/** 
 * 串联加载指定的脚本
 * 串联加载[异步]逐个加载，每个加载完成后加载下一个
 * 全部加载完成后执行回调
 * @param array|string 指定的脚本们
 * @param function 成功后回调的函数
 * @return array 所有生成的脚本元素对象数组
 */
function seriesLoadScripts(scripts,callback) {
  if(typeof(scripts) != "object") var scripts = [scripts];
  var HEAD = document.getElementsByTagName("head").item(0) || document.documentElement;
  var s = new Array(), last = scripts.length - 1, recursiveLoad = function(i) { //递归
    s[i] = document.createElement("script");
    s[i].setAttribute("type","text/javascript");
    s[i].onload = s[i].onreadystatechange = function() { //Attach handlers for all browsers
      if(!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") {
        this.onload = this.onreadystatechange = null; this.parentNode.removeChild(this); 
        if(i != last) recursiveLoad(i + 1); else if(typeof(callback) == "function") callback();
      }
    }
    s[i].setAttribute("src",scripts[i]);
    HEAD.appendChild(s[i]);
  };
  recursiveLoad(0);
}
 

/**
 * 并联加载指定的脚本
 * 并联加载[同步]同时加载，不管上个是否加载完成，直接加载全部
 * 全部加载完成后执行回调
 * @param array|string 指定的脚本们
 * @param function 成功后回调的函数
 * @return array 所有生成的脚本元素对象数组
 */

function parallelLoadScripts(scripts,callback) {
  if(typeof(scripts) != "object") var scripts = [scripts];
  var HEAD = document.getElementsByTagName("head").item(0) || document.documentElement, s = new Array(), loaded = 0;
  for(var i=0; i<scripts.length; i++) {
    s[i] = document.createElement("script");
    s[i].setAttribute("type","text/javascript");
    s[i].onload = s[i].onreadystatechange = function() { //Attach handlers for all browsers
      if(!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") {
        loaded++;
        this.onload = this.onreadystatechange = null; this.parentNode.removeChild(this); 
        if(loaded == scripts.length && typeof(callback) == "function") callback();
      }
    };
    s[i].setAttribute("src",scripts[i]);
    HEAD.appendChild(s[i]);
  }
}

Ici, la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a est insérée dynamiquement dans la balise 93f0f5c25f18dab9d176bd4f6de5d30e
Si vous êtes prudent, vous constaterez également qu'une méthode appelée compilation conditionnelle est utilisée ici comme expression (!/*@cc_on!@*/0) pour déterminer s'il s'agit d'un navigateur non-IE. pas sur la compilation conditionnelle. Si vous êtes intéressé, vous pouvez rechercher des informations pertinentes en ligne pour en savoir plus.

Comment utiliser ces deux fonctions : Ici, nous déclarons une variable de tableau, qui contient deux adresses de fichiers JS distants (bien sûr, le script d'appel de balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a prend en charge le cross-domain) :

var scripts = [ 
  "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
  "http://wellstyled.com/files/jquery.debug/jquery.debug.js"
];

//这两个文件分别是 jQuery 1.4.的库文件和 jQuery Debug 插件
//然后你可以使用下面的方法调用并在成功后执行回调了。

seriesLoadScripts(scripts,function(){ 

  /*
  debug = new $.debug({ 
    posTo : { x:'right', y:'bottom' },
    width: '480px',
    height: '50%',
    itempider : &#39;<hr>&#39;,
    listDOM : &#39;all&#39;
  }); 

  */
  alert(&#39;脚本加载完成啦&#39;);
});

Ce qui est utilisé ici, c'est la fonction de chargement en série. Bien sûr, vous pouvez également utiliser la fonction de chargement parallèle. Cela peut être utilisé selon la situation. chaque script doit être associé à Si un script a des dépendances, utilisez le chargement en série, sinon utilisez une connexion parallèle, car en principe, la connexion parallèle est plus rapide que la connexion en série.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!