De nombreuses personnes peuvent avoir rencontré le problème du chargement d'autres fichiers JS en JavaScript, mais de nombreux amis ne savent peut-être pas comment juger si le fichier JS que nous voulons charger a été chargé. Si nous ne terminons pas la charge, nous ne réussirons pas. Cet article explique comment charger d'autres fichiers JS dans JS et exécuter des fonctions de rappel après le chargement.
Nous pouvons créer un élément <cript> dynamiquement, puis charger le script en modifiant son attribut SRC, mais comment savons-nous que le fichier de script a été chargé? Parce que certaines de nos fonctions doivent être exécutées une fois le script chargé et pris effet.
Après avoir recherché des ressources sur le réseau, j'ai constaté que dans le navigateur IE, vous pouvez utiliser le readreadystateChange de l'élément <cript> pour surveiller le changement de l'état de chargement et déterminer si le script est chargé ou terminé en jugeant si son prêt est chargé ou terminé. Au lieu de navigateurs IE, vous pouvez utiliser Onload pour déterminer directement si le script est chargé.
Un processus de mise en œuvre simple ressemble à ceci:
// ie sous: var script = document.createElement ("script"); script.setAttribute ("type", "text / javascript"); script.onreadystatechange = function () {if (this.readystate == "chargé" || this.readystate == "complet") {alert ("chargé avec succès!"); }} script.setAttribute ("src", scripts [i]); // opéra, ff, chrome, etc.: var script = document.createelement ("script"); script.setAttribute ("type", "text / javascrip avec succès! ");} script.setAttribute (" src ", scripts [i]);Le principe est très simple. Sur la base de ces deux principes simples, nous avons apporté quelques modifications, et je l'ai changé en deux fonctions, à savoir la charge en série et les scripts de chargement parallèle.
Lors du passage d'un tableau contenant plusieurs chemins de fichier JS, la fonction de chargement série commence à partir du premier chargement de fichier de script. Chaque fois que l'on est chargé avec succès, le fichier de script suivant sera chargé. Une fois tout le chargement terminé, la fonction de rappel sera exécutée. Le chargement parallèle consiste à charger tous les fichiers de script depuis le début, c'est-à-dire qu'ils commencent à partir du même point, et lorsque tout le chargement est terminé, la fonction de rappel est exécutée.
Après test, ces deux fonctions sont compatibles avec tous les navigateurs grand public actuels.
/ ** * CONCATENATE LA LOCAGE DU SCRIPLE spécifié * Chargement du concaténate [asynchrone] Chargement un par un, chaque chargement est terminé, le suivant est chargé * Une fois tout le chargement terminé {if (typeof (scripts)! = "objet") var scripts = [scripts]; var head = document.getElementsByTagName ("Head"). Item (0) || document.DocumentElement; var s = new Array (), last = scripts.length - 1, recursiveLoad = function (i) {// récursives s [i] = document.createElement ("script"); s [i] .setAttribute ("type", "text / javascript"); s [i] .onload = s [i] .onreadyStateChange = function () {// jattle les gestionnaires pour tous les navigateurs if (! / * @ cc_on! @ * / 0 || this.readystate == "chargé" || this.readystate == "complet") {this.onload = this.onreadstechange = null; this.parentnode.removechild (this); if (i! = dernier) recursiveLoad (i + 1); else if (typeof (callback) == "function") callback (); }} s [i] .setAttribute ("src", scripts [i]); Head.appendChild (s [i]); }; recursiveLoad (0);} / ** * Chargez le script spécifié en parallèle * Chargez en parallèle [synchrone] en même temps, que la charge précédente soit terminée ou non, chargez-vous directement * exécuter le rappel une fois que tout le chargement est terminé * @Param Array | String Tous les scripts spécifiés * @Param Fonction Fonction Fonction après succès * @return Array ParallLoAdScripts (scripts, callback) {if (typeof (scripts)! = "objet") var scripts = [scripts]; var head = document.getElementsByTagName ("Head"). Item (0) || document.DocumentElement, s = new Array (), chargé = 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 () {// jattle des gestionnaires pour tous les navigateurs if (! / * @ cc_on! @ * / 0 || this.readystate == "chargé" || this.readystate == "complet") {chargé ++; this.onreadystateChange = null; this.parentnode.removechild (this); if (chargé == scripts.length && typeof (callback) == "function") callback (); }}; s [i] .setAttribute ("src", scripts [i]); Head.appendChild (s [i]); }}Ici, la balise <cript> est insérée dynamiquement dans la balise <A-Head> dans la page, et l'élément de balise sera automatiquement supprimé après le chargement.
Si vous faites attention, 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 ne s'agit pas d'un navigateur IE. La compilation conditionnelle n'est pas au centre de cet article. Si vous êtes intéressé, vous pouvez rechercher des documents pertinents pour l'apprentissage.
Comment utiliser ces deux fonctions: ici, nous déclarons une variable de tableau qui contient deux adresses de fichier JS distantes (bien sûr, le script <cript> le script d'appel de balise prend en charge le domaine croisé):
var scripts = ["http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "http://wellstyled.com/files/jquery.debug/jquery.debug.js" et le plugin jQuery Debug // vous pouvez alors utiliser la méthode suivante pour appeler et exécuter le rappel après le succès. SeriesloadScripts (scripts, function () {/ * debug = new $ .debug ({posto: {x: 'droite', y: 'inférieur'}, largeur: '480px', height: '50% ', itemDivider:' <hr> ', listdom:' all '}); * / alert (' le chargement de script est complet ');});La fonction chargée en série est utilisée ici. Bien sûr, vous pouvez également utiliser des fonctions de chargement parallèles. Cela peut être utilisé en fonction de la situation. Il est recommandé que chaque script suivant dépend du script précédent pour utiliser le chargement série, sinon utilise une connexion parallèle, car en principe, la connexion parallèle est plus rapide que la connexion série.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.