js页面加载完执行事件

When a webpage is loaded in a browser, there are various events that can be triggered. One such event is the "DOMContentLoaded" event, which is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. This event is commonly used to execute JavaScript code that needs to run as soon as the document is ready.

There are several ways to listen for the "DOMContentLoaded" event in JavaScript. One common method is to use the "DOMContentLoaded" event listener on the document object. This can be done by adding an event listener to the document object like this:

```javascript document.addEventListener("DOMContentLoaded", function() { // Code to be executed when the DOM is fully loaded }); ```

Another way to achieve the same result is by using the window.onload event, which is fired when the complete page has finished loading, including all external resources like images and stylesheets. However, the window.onload event can be slower than the DOMContentLoaded event because it waits for all resources to finish loading before firing.

```javascript window.onload = function() { // Code to be executed when the page and all resources have finished loading }; ```

It's important to note that the DOMContentLoaded event is supported by all modern browsers, including Chrome, Firefox, Safari, and Edge. However, Internet Explorer does not support this event. In IE, you can use the readystatechange event on the document object to achieve a similar effect.

```javascript document.onreadystatechange = function() { if (document.readyState === "interactive") { // Code to be executed when the DOM is interactive } }; ```

When writing code that needs to be executed after the DOM has finished loading, it's important to consider best practices for performance and efficiency. For example, it's a good idea to use asynchronous loading techniques for external resources like JavaScript files and stylesheets to prevent blocking the rendering process of the webpage.

In addition, it's also important to ensure that the JavaScript code being executed on the "DOMContentLoaded" event is optimized and efficient. This includes using proper coding practices, such as minimizing DOM manipulation and avoiding synchronous AJAX calls that can block the rendering of the page.

Overall, the "DOMContentLoaded" event is a useful tool for executing JavaScript code when a webpage has finished loading its initial HTML content. By using this event effectively, developers can ensure that their code runs at the optimal time, improving the overall performance and user experience of the webpage.