Méthode pour exécuter la fonction de rappel JS après le chargement du script

Cette fois, je vais vous montrer comment exécuter la fonction de rappel JSaprès le chargement du script Notes sur la façon d'exécuter le JS. fonction de rappel après le chargement du script. Que sont-ils ? Voici des cas réels.

Nous rencontrons souvent ce problème dans les projets : lorsqu'un script js est chargé, la tâche correspondante sera exécutée, mais de nombreux amis ne savent peut-être pas comment juger le js que nous voulons charger. Si le fichier a été chargé. S'il n'est pas chargé, l'appel de la fonction dans le fichier js ne réussira pas. 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

Nous pouvons créer dynamiquement l'élément

puis charger le script en modifiant son attribut src, mais comment savoir que le fichier script a été chargé ? Parce que certaines fonctions doivent être chargées avant que le script puisse être appelé. Vous pouvez utiliser le <script> de l'élément <script> 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é. onreadystatechange

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. Sur la base de ces deux principes simples, nous avons apporté quelques modifications en deux fonctions, à savoir le chargement en série et le chargement en parallèle.

Scripts dynamiques série et 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 et commence à charger le fichier de script suivant après chaque chargement réussi, 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('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') {
    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

est insérée dynamiquement dans la page à l'intérieur de la balise <script> , et l'élément de balise sera automatiquement supprimé une fois le chargement terminé. <head>

Comment utiliser

Une variable de tableau est déclarée ici, qui contient deux adresses de fichiers JS distants (bien sûr, le script d'appel de balise

prend en charge plusieurs domaines) : <script>

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 : '<hr>',
  listDOM : 'all'
 });
 */
 console.log('脚本加载完成啦');
});

Je crois avoir lu it Vous maîtrisez la méthode dans le cas de cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois php !

Lecture recommandée :

boîte de date et d'heure easyui dans Comment gérer la compatibilité dans IE

Comment readline lit et écrit le contenu ligne par ligne

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!