How to run JavaScript code before page load?

Active3 hr before
Viewed126 times

8 Answers


I want to run a bit of javascript before the whole page has loaded. Is this possible? Or does the code start to execute on </html>?, Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers ,Here's an example of the default behavior, a raw script tag:, About

Use JavaScript modules. A type="module" script is deferred until the HTML has been fully parsed and the initial DOM created. This isn't the primary reason to use modules, but it's one of the reasons:

<script type="module" src="./my-code.js"></script>
<!-- Or -->
<script type="module">
   // Your code here
load more v

here only funload() is working., How to run JavaScript code before page load , have working in web application. Here I need to run JavaScript before page load.,84362/how-to-run-javascript-code-before-page-load

I have tried:

<body oninit="funinit();" onprerender="funRender();" onload="funload();">


 <script type="text/javascript" language="javascript">
    function funinit() {
    function funload() {
    function funRender() {

load more v

Otherwise you need some extra JS to tell the script only to run when the page has loaded.,There is nothing that a script running inside of a function attached to onload can do that one loaded at the bottom of the page can’t do.,Loading the script at the bottom of the body rather than in the head makes the page appear to load faster as the rest of the page doesn’t have to wait for the script to download first.,It’s fine to put the JS links at the bottom of the HTML, just before the </body> tag.

Instead of of putting your javascript just above the </body> you can use the onload method of the window object to run js code after the window has loaded. This is especially useful if you have images you’re swapping or animating. Running js after onload ensures all images have been loaded. Not all images might have been downloaded when running the js code just above </body>

     <script type="text/javascript">
           window.onload = function() {
                //run js code here
load more v

For cases where you want your code to run only after your page has fully loaded, use the load event. In my years of doing things in JavaScript, I never had too much use for the load event at the document level outside of checking the final dimensions of a loaded image or creating a crude progress bar to indicate progress. Your mileage may vary, but...I doubt it :P,Unless you are creating a library that others will use, don't complicate your code by listening to the DOMContentLoaded or load events. Instead, see the previous point.,A sure-fire way to ensure you never get into a situation where your code runs before your DOM is ready is to listen for the DOMContentLoaded event and let all of the code that relies on the DOM to run only after that event is overheard:,The final stage is where your page is fully loaded with any images, stylesheets, scripts, and other external resources making their way into what you see:

Below is a snippet of these events in action:

document.addEventListener("DOMContentLoaded", theDomHasLoaded, false);
window.addEventListener("load", pageFullyLoaded, false);

function theDomHasLoaded(e) {
   // do something

function pageFullyLoaded(e) {
   // do something again
load more v

When the browser processes an HTML-document and comes across a <script> tag, it needs to execute before continuing building the DOM. That’s a precaution, as scripts may want to modify DOM, and even document.write into it, so DOMContentLoaded has to wait.,So DOMContentLoaded definitely happens after such scripts:,As DOMContentLoaded waits for scripts, it now waits for styles before them as well.,Firefox, Chrome and Opera autofill forms on DOMContentLoaded.

document.addEventListener("DOMContentLoaded", ready);
// not "document.onDOMContentLoaded = ..."
load more v

How to show Page Loading div until the page has finished loading?,Method 1: Using onload method: The body of a webpage contains the actual content that is to be displayed. The onload event occurs whenever the element has finished loading. This can be used with the body element to execute a script after the webpage has completely loaded. The function that is required to be executed is given here.,Hide or show elements in HTML using display property,How to Display Spinner on the Screen till the data from the API loads using Angular 8 ?


<body onload="functionToBeExecuted">
load more v

window.onload = function() {
   // Your code
load more v

  The following code uses addEventListener() method to listen for the load event to detect a fully loaded page. This is equivalent to the above code.,  Alternatively, the $(handler) can be called, which is equivalent to the above syntax:,  Note that the DOMContentLoaded event would be more appropriate if you just need your code to run when the DOM is fully loaded, without waiting for stylesheets and images to finish loading.,In pure JavaScript, the standard method to detect a fully loaded page is using the onload event handler property. The load event indicates that all assets on the webpage have been loaded. This can be called with the window.onload in JavaScript.

1. Using JavaScript

In pure JavaScript, the standard method to detect a fully loaded page is using the onload event handler property. The load event indicates that all assets on the webpage have been loaded. This can be called with the window.onload in JavaScript.

load more v

Other "javascript-undefined" queries related to "How to run JavaScript code before page load?"