The web pages or sites you visit often let the user wait to display an important message or a warning before accessing a particular component. For instance, when asking a user to buy the membership or login before accessing the site’s content or for the appropriate traffic management in the case of educational websites. In such cases, you can let the user wait for a page until it gets loaded.
This blog will discuss the methodologies that can be used to set the page load time in JavaScript.
How to Wait for a Page to Load in JavaScript?
You can wait for a page to load in JavaScript by using the following approaches:
-
- window onload event with “setTimeout()” method
- window onload event with “setInterval()” method
- “addEventListener()” method
The mentioned concepts will be demonstrated one by one!
Method 1: Wait for Page to Load in JavaScript Using window.onload Event With setTimeout() Method
The “window.onload” event occurs when the window has been loaded, and the “setTimeout()” method invokes a function after the specified set time. More specifically, these approaches can be combined to load the window after the specified wait time.
Syntax
In the given syntax, function refers to the accessed function “waitLoad()”, and milliseconds indicates the “set time” in milliseconds.
The below-given example demonstrates the stated concept.
Example
Firstly, utilize the “window.onload” event along with the “setTimeout()” method to load the window after the set time in milliseconds. The specified wait time will be applied to the waitLoad() function:
Now, define the function named “waitLoad()” in the <script> tag. This particular function will be accessed upon the window load and notify the user with the following messages via alert and on the Document Object Model(DOM), respectively:
alert("Loaded!")
document.write("This page is loaded now!")
};
It can be observed that the page is loaded after the specified 3 seconds waiting time:
If you want to load the page after a specified waiting time repeatedly, utilize the following method.
Method 2: Wait for Page to Load in JavaScript Using window.onload Event With setInterval() Method
The “window.onload” event, as discussed above, is triggered when the window has been loaded. The “setInterval()” method accesses a specified function repeatedly at the specified time intervals computed in milliseconds.
Syntax
Here, the “function” refers to the function that needs to be executed and “milliseconds” is its set time interval.
Example
In the following example, we will set the time interval as the argument in the defined function. Print a specific message via an alert on the DOM after every 3 seconds when the page gets loaded repeatedly:
alert("Loaded!")
document.write("This page is loaded now!")
}, 3000);
Output
In the extracted output, it is evident that the page is loaded repeatedly after the specified waiting time.
Method 3: Wait for Page to Load in JavaScript Using addEventListener() Method
The “addEventListener()” method applies an event handler to the document. This method can be implemented to attach a particular event and load the page upon clicking anywhere in the DOM.
Syntax
In the given syntax, “event” refers to the event that will be triggered, and “function” points to the function which performs some functionality on the triggered event.
Example
First, we will attach an event “click” to the document using the addEventListener() method. Upon triggering the specified event, the function named “waitLoad()” will be executed:
Define the function “waitLoad()” in which display the following message on the DOM upon the triggered event:
document.write("The Page is Loaded now!");
}
In this particular output, the page is loaded upon clicking the cursor anywhere on the DOM:
We have compiled different methods to wait for the page to load.
Conclusion
To wait to load a page in JavaScript, utilize the window.onload event with the “setTimeout()” method, with “setInterval()” method or the “addEventListener()” method. The window.onload event with the setTimeout() method is used to load the page after the specified time while with setInterval() method, the page loads repeatedly after the particular time interval. The addEventListener() method can be utilized in order to attach an event and load the page as soon as the event is triggered on the DOM. This article illustrated the methods to wait for a page to load in JavaScript.
