Two methods to run a js after the HTML page is loaded

This article mainly introduces two methods to run a certain js after the HTML page is loaded. Friends who need it can refer to the

js method:

Copy code The code is as follows:

<script type="text/javascript"> 
window.onload=function(){ 
var userName="xiaoming"; 
alert(userName); 
} 
</script>

The following is the jQuery method, which needs to reference the jQuery file.

Copy code The code is as follows:

<script type="text/javascript"> 

$(document).ready(function(){ 

var userName="xiaoming"; 

alert(userName); 
}); 

</script>

or its abbreviation

Copy code The code is as follows:

$(function(){ 
var userName="xiaoming"; 
alert(userName); 
});

It can be executed when the dom is loaded (earlier than window.onload). .ready() can appear multiple times on the same page

PS: The main difference between the two

window.onload:

When a document is completely downloaded to the browser , the window.onload event will be triggered. This means that all elements on the page are operable for js, which means that all elements on the page will not be executed until they are loaded. This situation is very advantageous for writing functional code because there is no need to consider the order of loading. ,

$(document).ready{ }:

will be called when the DOM is completely ready and ready for use. 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, the code will be executed after the HMTL is downloaded and parsed into a DOM tree.

Give an example:

Suppose there is a page that displays a gallery. This page may contain many large images. We can hide, display or otherwise manipulate these images through jQuery. If we set up the interface through the onload page, the user must wait until each image is downloaded before being able to use this page. Even worse, if behavior is slightly added to elements that have default behavior (such as links), user interaction may lead to unexpected results. However, when we try $(document).ready(){ } to set it up, the interface will be ready with correct behavior earlier.

Using $(document).ready(){ } is generally better than trying the onload event handler, but it must be clear that because the support file may not be completed yet, so something like Properties such as image height and width are not necessarily valid at this time.

Note: There will be problems with placing js at the bottom of the page and using defer="defer". Better to use the function above!

The above is the detailed content of Two methods to run a js after the HTML page is loaded. For more information, please follow other related articles on the PHP Chinese website!