How to Execute JavaScript Code After the Entire Page, Including Images, Has Loaded?

Executing a Function When the Page Is Fully Loaded

When working with web pages, there may be times when you need specific JavaScript code to execute only when the entire page, including images, has completely loaded. While checking for DOM (Document Object Model) readiness is a common method, it's important to distinguish it from page load completion.

Determining Page Load Status

Before DOM ready was implemented, the load event was used to signify page completion. It still serves this purpose today. DOM ready, on the other hand, specifically indicates when the DOM is ready for JavaScript manipulation.

Using the load Event

To execute a function when the page is fully loaded, including images, you can utilize the load event listener:

<code class="js">window.addEventListener('load', function () {
  alert("It's loaded!")
})</code>

This code will attach an event listener to the load event. When the page and its images have fully loaded, the function within the event listener will be triggered.

The above is the detailed content of How to Execute JavaScript Code After the Entire Page, Including Images, Has Loaded?. For more information, please follow other related articles on the PHP Chinese website!