"Essay" JS loading

Sometimes, when the JS operation of a DOM, found that the DOM is not found, this is because the HTML is not loaded to start the operation of the DOM, so you need to load the HTML document after loading JS, so we can do this:

JS Method: Window.onload

The Window.onload event is triggered when a document is completely downloaded to the browser. This means that all elements on the page can be manipulated for JS, meaning that all elements on the page are loaded before they are executed. This situation is advantageous for writing functional code because there is no need to consider the order of loading.

Window.onload=function

Jqury Method:

is called when the DOM is fully ready and can be used. While this also means that all elements are accessible to the script, it does not mean that all associated files have been downloaded. In other words, when the HMTL download is complete and parsed into the DOM tree, the code executes.

$ (document). Ready (function() {     alert ("Hello!" 

Or you can simply write:

$ (function() {     

　　 Sometimes, when a website needs a large number of JS files, the JS file directly in the beginning of the load is definitely not appropriate, it is easy to slow down the normal browsing of the site, so we need in the operation of what JS and then dynamically load JS file.

So we do this:

Now there are 2 files, an HTML file a.html, is required to import the B.js file, and finally a Web page JS file a.js.

A.html:

1 <! DOCTYPE html> 2 
A.js:
1 Console.log ("hello!");
When you visit this page, you will see the output:
　　
In B.js, a variable m is defined:
1 m = "Zhang!!!"
Now, to load the b.js dynamically into the a.html through a.js and output m in A.js, we use the method document.write () to load the b.js into a:
A.js:
1 Console.log ("hello!" ); 2 document.write (' <script type= "Text/javascript" src= "B.js" ></script> "); 3 Console.log (M); 
At this time, visit a.html:
　　
An error occurred, M cannot find! is b.js not loaded in? Then, through the debugging function to see:
　　
Found that B.js has been successfully loaded, then why didn't you find m?
So went to check, the original document.write () method is through the asynchronous loading, if the call M, when the b.js has not been loaded, it must not find M.
So I went to find a way to load synchronously, so I found a way to jquery "$" (document). Append () ":
The a.js then changed to:
1 Console.log ("hello!" ); 2 $ (document). Append ("<script type= ' text/javascript ' src= ' b.js ' </script>"); 3 Console.log (M); 
Re-visit a.html:
　　
M can find it, problem solved!!
In this way, I can invoke the method in the program, dynamically load the required JS when needed, do not have to start loading the HTML document when all JS are loaded in.
jquery also has a way to asynchronously load a JS file:
　　　　Jquery.getscript ()
Get and run a JavaScript file with an AJAX request
Jquery.getscript (Url,success (response,status))
 
  
 
"Essay" JS loading