- How to Make JavaScript Execute After Page Load
- The onload Method
- The window.onload Method
- 4 Ways To Run Javascript After Page Load (Simple Examples)
- TLDR – QUICK SLIDES
- TABLE OF CONTENTS
- EXECUTE ON PAGE LOAD
- 1) EVENT LISTENER
- 2) BODY ON LOAD
- 3) DEFER SCRIPT LOAD
- 4) SCRIPT AT BOTTOM (NOT QUITE AFTER PAGE LOAD)
- DOWNLOAD & NOTES
- SUPPORT
- EXAMPLE CODE DOWNLOAD
- EXTRA BITS & LINKS
- WHICH IS THE BEST METHOD?
- LINKS & REFERENCES
- INFOGRAPHIC CHEAT SHEET
- THE END
- How do I call a JavaScript function on page load?
- Using the onload event in the tag
- Syntax
- Example
- Methods to call a JavaScript function on page load.
- Call the JavaScript function on page load by using onload event in the HTML body tag.
- Using the window.onload Event in JavaScript
- Syntax
- Example
- Methods to call a JavaScript function on page load.
- Call the JavaScript function on page load by using window.onload event in the JavaScript.
- Using the DOMContentLoaded Event
- Syntax
- Example
- Methods to call a JavaScript function on page load.
- Call the JavaScript function on page load by using document.addEventListener( ) method.
- Conclusion
How to Make JavaScript Execute After Page Load
It’s important to be sure that JavaScript doesn’t run before the page load. In this tutorial, you will get the right answer to your question of making the JavaScript run after the page load. Here are the two methods which can help you get the work done correctly.
The onload Method
The onload event occurs after the element has finished loading. This can be used with the body element to run a script after the webpage has thoroughly loaded:
html> html> head> title>Title of the document title> head> body onload="loadFunction()"> h1>Welcome to W3Docs h1> script> function loadFunction( ) < alert("Page is loaded"); > script> body> html>
The window.onload Method
The onload property with the window element is used to run a script after the webpage has thoroughly loaded. The onload property fires the function as soon as the webpage has been loaded:
html> html> head> title>Title of the document title> script src="https://code.jquery.com/jquery-3.5.0.min.js"> script> head> body> h1>Welcome to W3Docs h1> script> function loadFunction( ) < alert("Window is loaded"); > window.onload = loadFunction(); script> body> html>
4 Ways To Run Javascript After Page Load (Simple Examples)
Welcome to a quick tutorial on how to run Javascript after page load. Having some trouble with missing elements, variables, or functions? Want to delay a piece of Javascript until everything else is fully loaded?
The common ways to run Javascript after page load are:
- Add an event listener – document.addEventListener(«load», FUNCTION);
- Add onload to the body tag –
- Defer the script –
- Lastly, place the script at the very bottom of the page – Although this is not quite “after page load”.
That covers the basics, but let us walk through some detailed examples in this guide. Read on!
TLDR – QUICK SLIDES
TABLE OF CONTENTS
EXECUTE ON PAGE LOAD
All right, let us now get into the ways and examples of how to run Javascript on page load.
1) EVENT LISTENER
Events should be pretty self-explanatory, even if you have never heard of them before. They are fired whenever something of interest happens – Mouse click, scroll, keypress, video play, and more. In this example, we listen to the load event on the window itself; Run a piece of Javascript when the window is fully loaded.
P.S. You can also target the DOMContentLoaded event. The difference is that load is fired when everything is fully loaded. But DomContentLoaded is triggered as soon as all the HTML elements are ready. I.E. Images, CSS, videos may not be fully loaded.
2) BODY ON LOAD
// (A) JAVASCRIPT FUNCTION function demo ()
Well, this kind of does the same thing as attaching addEventListener(«load», FUNCTION) . When the HTML document is loaded, onload=»demo()» will be triggered.
3) DEFER SCRIPT LOAD
document.getElementById("myTxt").style.color = "blue";
Yes, just add defer to the tag, and it will hold until the entire page is done. For those who are confused about the difference between defer and onload :
- defer will basically load the Javascript only when the HTML page is done.
- onload does not mess with the loading order of the script, it simply runs the specified function when the page is ready.
P.S. Please take note that defer will not work with inline Javascript. I.E. Must load an external Javascript file.
4) SCRIPT AT BOTTOM (NOT QUITE AFTER PAGE LOAD)
Lastly, just put the scripts at the bottom of the page. This is not quite “after page load”, but it is… After everything else is nearly loaded.
DOWNLOAD & NOTES
Here is the download link to the example code, so you don’t have to copy-paste everything.
SUPPORT
600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a «paid scripts and courses» business, so every little bit of support helps.
EXAMPLE CODE DOWNLOAD
Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
EXTRA BITS & LINKS
That’s all for this guide, and here is a small section on some extras and links that may be useful to you.
WHICH IS THE BEST METHOD?
Personally, I will usually use window.addEventListener(«DOMContentLoaded», FUNCTION) or defer loading non-critical scripts. But whichever makes the most sense for your own project is the best method.
LINKS & REFERENCES
INFOGRAPHIC CHEAT SHEET
THE END
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
How do I call a JavaScript function on page load?
This tutorial will teach us to call a JavaScript function on page load. In many cases, while programming with HTML and JavaScript, programmers need to call a function, while loading the web page or after the web page load finishes. For example, programmers need to show the welcome message to the user on page load, and the programmer needs to call a JavaScript function after the page load event.
There are various ways to call a function on page load or after page load in JavaScript, and we will look at them one by one in this tutorial.
- Using the onload event in the tag
- Using the window.onload Event
- Using the DOMContentloaded Event
Using the onload event in the tag
The first approach for calling a function on the page load is the use an onload event inside the HTML tag. As you know, the HTML body contains the entire content of the web page, and when all HTML body loads on the web browser, it will call the function from the JavaScript.
Syntax
Follow the below syntax to use onload event in the tag.
Example
In the below example, we have created the JavaScript function named welcomeFunction(). We are calling that function from the tag using the onload event, and it shows the welcome message in the alert box to the users.
Methods to call a JavaScript function on page load.
Call the JavaScript function on page load by using onload event in the HTML body tag.
let message = document.getElementById("message"); function welcomeFunction()