How to make jquery execute when opening the page

When using jQuery for web development, sometimes it is necessary to automatically perform certain operations after the page is loaded, such as setting the initial display effect, displaying special prompt information, etc. So how to implement this function? This article will introduce how to make jQuery execute when the page is opened.

1. Use jQuery’s $(document).ready() function

Using jQuery’s $(document).ready() function is the most commonly used method. This function indicates when After the DOM is loaded, the code in the callback function is executed. The code example is as follows:

$(document).ready(function() {
  //执行的代码
});

As shown in the above code, the parameter passed in the $(document).ready() function is a function, which will be executed after the DOM is loaded. Within this function you can write the jQuery code that needs to be executed.

2. Use jQuery’s window.onload() function

jQuery’s window.onload() function will not be executed until all resources on the page (including images, style sheets, etc.) are loaded. Compared with the $(document).ready() function, the window.onload() function contains more extensive content, so the execution time will be relatively longer. The code example is as follows:

$(window).on('load', function() {
  //执行的代码
});

Different from the $(document).ready() function, the code of the window.onload() function will not be executed until all resources are loaded. Therefore, you can also write some code here that needs to wait for the resource to be loaded before it can be executed.

3. Use the immediate function call

In addition to the above two methods, you can also use the immediate function call method to automatically execute the code after the page is loaded. Calling a function immediately means encapsulating the function body in a parentheses, and finally adding another parentheses to execute the function. The code example is as follows:

(function() {
  //执行的代码
})();

As shown in the above code, $(function(){}) in this code is equivalent to $(document).ready(function(){}). When the code content is small, you can use the method of encapsulating it into an anonymous function for execution.

4. Use the defer attribute

When introducing external JavaScript resources into the page, you can use the defer attribute to tell the browser to continue rendering the page and wait for the JavaScript to be loaded before executing. For example, the following code:

<script src="xxxx.js" defer></script>

In the above code, the loading, parsing and execution process of the external resource xxxx.js will not affect the rendering of the page. When the JavaScript is loaded, it will wait for the parsing queue to be executed until the script's code execution is completed.

5. Use the async attribute

Different from the defer attribute, the async attribute indicates that the script should be downloaded and executed immediately, but while executing the script, it will not stop parsing the document and will not wait. Loading and execution of other scripts. When the network speed is slow and the script takes time to download and parse, it may cause the script to start executing before some elements of the page are loaded. The usage is as follows:

<script src="xxxx.js" async></script>

The above are the five methods on how to make jQuery execute when opening the page, among which the $(document).ready() function and the immediate call function are the most commonly used methods. In actual use, different methods can be selected according to needs.

The above is the detailed content of How to make jquery execute when opening the page. For more information, please follow other related articles on the PHP Chinese website!