recherche

Maison >interface Web >js tutoriel >Comprendre le chargement dynamique des fichiers Javascript_compétences Javascript

Comprendre le chargement dynamique des fichiers Javascript_compétences Javascript

WBOY
WBOYoriginal
2016-05-16 15:17:001110parcourir

Le chargement dynamique de fichiers Javascript a toujours été une chose gênante, comme la méthode courante de téléchargement sur Internet : 

function loadjs(fileurl){
 var sct = document.createElement("script");
 sct.src = fileurl;
 document.head.appendChild(sct);
}

Alors testons les résultats :

<html>
  <head>
   <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />
  </head>
  <body>
    <script>
    function loadjs(fileurl){      
     var sct = document.createElement("script");
     sct.src = fileurl;
     document.head.appendChild(sct);
    }
    loadjs("http://code.jquery.com/jquery-1.12.0.js");
    loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js")
    
    loadjs("http://bootboxjs.com/bootbox.js")
    </script>
  </body>
</html>

Une fois le code chargé, l'erreur suivante apparaîtra :

jquery est évidemment chargé lors du premier traitement, pourquoi est-il toujours signalé que jQuery n'existe pas

Parce que charger de cette manière équivaut à ouvrir trois threads, c'est simplement que le fichier jquery démarre le thread en premier, et le temps qu'il faut à jquery pour terminer l'exécution de ce thread dépasse les deux fois suivantes. être trouvé après l'exécution ultérieure de cet objet.

Comment gérer cette méthode

En fait, le chargement des fichiers est traité dans un état. Il existe un événement onload pour le chargement du fichier, qui est un événement qui peut surveiller si le fichier est chargé

.

Nous pouvons donc envisager cette méthode pour gérer les résultats que nous souhaitons. Nous la gérons de manière intuitive. Le code amélioré est le suivant : 

 <html>
  <head>
   <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />
  </head>
  <body>
    <script>
    
    function loadjs(fileurl, fn){      
     var sct = document.createElement("script");
     sct.src = fileurl;
     if(fn){
      sct.onload = fn;
     }
     document.head.appendChild(sct);
    }


    loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){
     loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){
        loadjs("http://bootboxjs.com/bootbox.js")
     })
    });
      
    
    </script>
  </body>
</html>

OK, après avoir exécuté ce code, le fichier chargé ne sera chargé qu'une fois le précédent chargé, afin que l'objet utilisé ne soit pas trouvé.

Ensuite, nous réaliserons l'effet d'une boîte pop-up. Le plug-in Bootbox.js est utilisé dans le code. Le code de chargement est le suivant : 

loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){
  loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){
       loadjs("http://bootboxjs.com/bootbox.js",function(){
          bootbox.alert("Hello world!", function() {
           Example.show("Hello world callback");
          });
       })
   })
 });

Actualisez la page et la boîte pop-up s'affichera directement :

Il est souvent facile de passer beaucoup de temps à déboguer le code chargé dynamiquement. La meilleure façon pour tout le monde est d'écrire l'exemple le plus simple et de comprendre la raison. Le code ici peut être encapsulé et des fichiers CSS peuvent également être ajoutés pour être chargés. .Utilisez-le comme votre propre plug-in.

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 implémente un effet de mouvement horizontal avec mise en mémoire tampon horizontale (avec téléchargement du code source de démonstration)_jqueryArticle suivant：jQuery implémente un effet de mouvement horizontal avec mise en mémoire tampon horizontale (avec téléchargement du code source de démonstration)_jquery

Articles Liés

Voir plus