Comment implémenter la fonction de rappel correspondante après le chargement à l'aide du script JS

Cet article explique principalement comment exécuter la tâche de rappel correspondante après le chargement réussi du fichier js. Les amis intéressés par la méthode opérationnelle d'exécution de la fonction de rappel correspondante après le chargement du script JS peuvent apprendre de cet article

Souvent utilisé dans les projets Vous rencontrerez un tel problème : lorsqu'un script js est chargé, la tâche correspondante sera exécutée, mais de nombreux amis peuvent ne pas savoir comment juger si le fichier js que nous voulons charger a été chargé. n'est pas chargé, nous appellerons le fichier js. La fonction échouera. Cet article explique principalement comment exécuter la tâche de rappel correspondante après avoir chargé avec succès le fichier js.

Idée de base

On peut créer dynamiquement l'élément 3f1c4e4b6b16bbbd69b2ee476dc4f83a puis charger le script en changeant son attribut src, mais comment faire tu sais ? Le fichier de script a-t-il été chargé ? Parce que certaines fonctions doivent être appelées après le chargement du script. Vous pouvez utiliser le 3f1c4e4b6b16bbbd69b2ee476dc4f83a de l'élément onreadystatechange dans le navigateur IE pour surveiller les changements d'état de chargement et déterminer si le script est chargé en déterminant 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 exemple simple de script dynamique

Un processus de mise en œuvre simple est le suivant :

// IE下：
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement
var src = 'http://xxxxxx.com'
var script = document.createElement('script')
script.setAttribute('type','text/javascript')
script.onreadystatechange = function() {
 if(this.readyState === 'loaded' || this.readyState === 'complete') {
  console.log('加载成功！')
 }
}
script.setAttribute('src', src)
HEAD.appendChild(script)
// Chrome等现代浏览器：
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
var src = 'http://xxxxxx.com'
var script = document.createElement('script')
script.setAttribute('type','text/javascript')
script.onload = function() {
 console.log('加载成功!')
}
script.setAttribute('src', src)
HEAD.appendChild(script)

Le principe est très simple, selon ça Deux principes simples, on fait quelques modifications, je les ai changés en deux fonctions, à savoir le chargement en série et le chargement en parallèle.

Scripts dynamiques série et parallèles

Lors du passage d'un tableau contenant plusieurs chemins de fichiers JS, la fonction de chargement en série démarre à partir du premier fichier de script A commence le chargement. Chaque fois qu'un fichier est chargé avec succès, le fichier de script suivant commence à être chargé une fois le chargement terminé, la fonction de rappel est exécutée. 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.

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

Ici, la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a est insérée dynamiquement dans la page à l'intérieur de la balise 93f0f5c25f18dab9d176bd4f6de5d30e , et l'élément de balise sera automatiquement supprimé une fois le chargement terminé.

Utilisation

Une variable tableau est déclarée ici, qui contient deux adresses de fichiers JS distants (bien sûr la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a appelle Le script prend en charge plusieurs domaines) :

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 插件
// 然后你可以使用下面的方法调用并在成功后执行回调了。
parallelLoadScripts(scripts, function() { 
 /*
 debug = new $.debug({ 
  posTo : { x:'right', y:'bottom' },
  width: '480px',
  height: '50%',
  itempider : &#39;<hr>&#39;,
  listDOM : &#39;all&#39;
 });
 */
 console.log(&#39;脚本加载完成啦&#39;);
});

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Explication détaillée de l'attribut mixins de vue

Instance du point d'ancrage de simulation vue2.0

Vue utilise des mixins pour implémenter du code d'image compressé

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!