Home >Web Front-end >JS Tutorial >Understanding dynamic loading of Javascript files_javascript skills

Understanding dynamic loading of Javascript files_javascript skills

WBOYOriginal: 2016-05-16 15:17:001110browse

Dynamic loading of Javascript files has always been a troublesome thing, such as the common method of uploading over the Internet:

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

Then let’s test the results:

<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>

After the code is loaded, the following error will appear:

jquery is obviously loaded in the first processing, why is it still reported that jQuery does not exist?

Because loading like this is equivalent to opening three threads, but the jquery file starts the thread first, and the time it takes for jquery to finish executing this thread exceeds the next two times. Therefore, jquery may not be found after it is executed later. this object.

How to deal with this method?

In fact, the loading of files is processed in a state. There is an onload event for file loading, which is an event that can monitor whether the file is loaded.

So we can consider this method to handle the results we want. We handle it in an intuitive way. The improved code is as follows:

 <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, after executing this code, the loaded file will not be loaded until the previous one is loaded, so that the used object will not be found.

Then we will perform the effect of a pop-up box. The Bootbox.js plug-in is used in the code. The loading code is as follows:

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");
          });
       })
   })
 });

Refresh the page and the pop-up box will be displayed directly:

Dynamically loaded code is often easy to spend a lot of time debugging here. The best way is to write the simplest example and understand the reason. The code here can be encapsulated, and CSS files can also be added to load. .Use as your own plug-in.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery implements horizontal motion effect with horizontal buffering (with demo source code download)_jqueryNext article：jQuery implements horizontal motion effect with horizontal buffering (with demo source code download)_jquery

See more

Understanding dynamic loading of Javascript files_javascript skills

Related articles