Of Stack

Dynamic load js to improve the speed of the web page opened

  • 2020-03-30 03:30:35
  • OfStack

Generally speaking, if you load all the required JavaScript code at once, it will cause the initial page to open slowly, but many of the loaded code does not need to be used, this unnecessary waste of performance should be avoided. If you want to load JavaScript code dynamically, you can add the DOM model to the HTML document. Script> Node, and set the SRC attribute of this node (that is, the external Javascript file) to Javascript code that needs to be loaded dynamically.

Here's an example of doing this:

(1) new jsloadertest.html file 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> According to the need to load the JavaScript Examples of code </title> 
<script type="text/javascript"> 
  function JsLoader(){ 
  this.load=function(url){ 
      //Get all the <Script> tag
      var ss=document.getElementsByTagName("script"); 
      //Determines whether the specified file is included, and if so, fires the onsuccess event and returns
      for (i=0;i<ss.length;i++){ 
        if (ss[i].src && ss[i].src.indexOf(url)!=-1){ 
          this.onsuccess(); 
          return; 
        } 
      } 
      //Create a script node and set its properties to an external JavaScript file
      s=document.createElement("script"); 
      s.type="text/javascript"; 
      s.src=url; 
      //Get the head node and transfer <Script> Insert into
      var head=document.getElementsByTagName("head")[0]; 
      head.appendChild(s); 
      //Gets a reference to itself
      var self=this; 
      //For Internet explorer, use the readystatechange event to determine if the load was successful
      //For other browsers, use the onload event to determine if the load was successful
      //s.onload=s.onreadystatechange=function(){ 
      s.onload=s.onreadystatechange=function(){ 
        //In this function this pointer refers to the s node object, not the JsLoader instance,
        //So you have to call the onsuccess event with self, same below.
        if (this.readyState && this.readyState=="loading") return; 
        self.onsuccess(); 
      } 
      s.onerror=function(){ 
        head.removeChild(s); 
        self.onfailure(); 
      } 
    }; 
    //Defines a load success event
    this.onsuccess=function(){}; 
    //Define failure events
    this.onfailure=function(){}; 
  } 
  function btnClick(){ 
      //Create an object
    var jsLoader=new JsLoader(); 
    //Define the load success handler
    jsLoader.onsuccess=function(){ 
       sayHello(); 
    } 
    //Define the load failure handler
    jsLoader.onfailure=function(){ 
       alert(" File load failed! "); 
    } 
    //Start loading
    jsLoader.load("hello.js"); 
  } 
</script> 
</head> 
<body> 
<label> 
<input type="submit" name="Submit" onClick="javascript:btnClick()" value=" load JavaScript file "> 
</label> 
</body> 
</html>

(2) new hello.js file, including the following code: 


// JavaScript Document 
function sayHello(){ 
  alert("Hello World! Success in JavaScript file ");   
} 
// JavaScript Document
function sayHello(){
  alert("Hello World! Success in JavaScript file ");  
}
Related articles: