Understanding dynamic loading of Javascript files_javascript skills-JS Tutorial-php.cn

Understanding dynamic loading of Javascript files_javascript skills

WBOY

Release： 2016-05-16 15:17:00

Original

1110 people have browsed it

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

Copy after login

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>

Copy after login

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>

Copy after login

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

Copy after login

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.