How to make JavaScript execute after page load?

C

CommonSenseCode

These solutions will work:

As mentioned in comments use defer:

<script src="deferMe.js" defer></script>

or

<body onload="script();">

or

document.onload = function ...

or even

window.onload = function ...

Note that the last option is a better way to go since it is unobstrusive and is considered more standard.

What is the difference between and document.onload=function ... ?

@mentoliptus: document.onload= is non obtrusive en.wikipedia.org/wiki/Unobtrusive_JavaScript

@gerdi OP didn't mention anything about jQuery. I also gave an unobtrusive option in my answer.

document.onload didn't work for me. I found this post w/ the same issue stackoverflow.com/questions/5135638/…. Doesn't seem like document.onload is an option.

ALL of these options are much later than necessary, given the goal of running javascript once DOM is ready to be manipulated. Two better choices for that goal: 1) Use defer attribute on javascript link in head. 2) move any javascript that accesses DOM to bottom of page, immediately before </body>.

D

DevWL

Triggering scripts in the right moment

Using "defer"

<script src="script.js" defer></script>

Using defer will trigger after domInteractive (document.readyState = "interactive") and just before "DOMContentLoaded" Event is triggered. If you need to execute the script after all resources (images, scripts) are loaded use "load" event or target one of the document.readyState states. Read further down for more information about those events / states, as well as async and defer attributes corresponding to script fetching and execution timing.

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded. Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.

Resource: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attributes

* See the images at the bottom for feather explanation.

Event Listeners - Keep in mind that loading of the page has more, than one event:

"DOMContentLoaded"

This event is fired when the initial HTML document has been completely loaded and parsed, without waiting for style sheets, images, and subframes to finish loading. At this stage you could programmatically optimize loading of images and CSS based on user device or bandwidth speed. Executes after DOM is loaded (before images and CSS):

document.addEventListener("DOMContentLoaded", function(){
    //....
});

Note: Synchronous JavaScript pauses parsing of the DOM. If you want the DOM to get parsed as fast as possible after the user requested the page, you could turn your JavaScript asynchronous and optimize loading of style sheets

"load"

Executes after everything is loaded and parsed:

document.addEventListener("load", function(){
    // ....
});

MDN Resources: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load

MDN list of all events:
https://developer.mozilla.org/en-US/docs/Web/Events

Event Listeners with radyStates - Alternative solution (readystatechange):

// Place in header (do not use async or defer)
document.addEventListener('readystatechange', event => {
  switch (document.readyState) {
    case "loading":
      console.log("document.readyState: ", document.readyState,
       `- The document is still loading.`
       );
      break;
    case "interactive":
      console.log("document.readyState: ", document.readyState, 
        `- The document has finished loading DOM. `,
        `- "DOMContentLoaded" event`
        );
      break;
    case "complete":
      console.log("document.readyState: ", document.readyState, 
        `- The page DOM with Sub-resources are now fully loaded. `,
        `- "load" event`
        );
      break;
  }
});

MDN Resources: https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

Where to place your script (with & without async/defer)?

https://i.stack.imgur.com/jsHK7.jpg

https://i.stack.imgur.com/b3ixy.jpg

https://i.stack.imgur.com/GkezA.jpg

https://i.stack.imgur.com/zx3fh.jpg

If your script uses async or defer read this: https://flaviocopes.com/javascript-async-defer/

@Peter pretty sure this stands alone probably best if it in the bottom of your javascript files so it executes last

This is the most completed answer. onload is after, but people don't realize this at first.

Re asynchronous javascript: to clarify, there are two choices for scripts that don't immediately run. Of those, defer is usually preferable to async - because defer won't interrupt html parsing/rendering - and when it runs, DOM is guaranteed to be ready. Efficiently load JavaScript with defer and async.

+1 I tried window.onload = ... thinking that my script would wait until everything was fully downloaded before running but it seems window.onload actually behaves like document.addEventListener("DOMContentLoaded", ..., whereas the window.addEventListener("load", ... really does wait for everything to be fully downloaded. I would have thought that window.onload should be equivalent to window.addEventListener("load", ... rather than document.addEventListener("DOMContentLoaded", ... ?? I got the same result in Chrome and FF.

@DevWL, I think you meant "defer"... because "async" can still execute before the all the html loads.

c

chaos

Reasonably portable, non-framework way of having your script set a function to run at load time:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

+1 for posting almost exactly what I had to come up with 6 months ago. Code like this can be necessary if other frameworks and code that you have no control over are adding onload events and you want to as well without wiping out the other onload events. I included my implementation as a function and it required var newonload = function(evt) { curronload(evt); newOnload(evt); } because for some reason the framework I am using requires an event to be passed to the onload event.

I just discovered in testing that the code as written results in handlers being fired in an undefined order when attached with attachEvent(). If order-of-handler-execution is important you may want to leave out the window.attachEvent branch.

So this will add this Function as an ADDITIONAL function to run OnLoad, correct? (rather than replacing an existing onload event)

@ClayNichols: Correct.

Good solution, but now outdated: developer.mozilla.org/en-US/docs/Web/API/EventTarget/…

N

Nordes

You can put a "onload" attribute inside the body

...<body onload="myFunction()">...

Or if you are using jQuery, you can do

$(document).ready(function(){ /*code here*/ }) 

or 

$(window).load(function(){ /*code here*/ })

I hope it answer your question.

Note that the $(window).load will execute after the document is rendered on your page.

D

Daniel Price

If the scripts are loaded within the <head> of the document, then it's possible use the defer attribute in script tag.

Example:

<script src="demo_defer.js" defer></script>

From https://developer.mozilla.org:

defer This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded. This attribute must not be used if the src attribute is absent (i.e. for inline scripts), in this case it would have no effect. To achieve a similar effect for dynamically inserted scripts use async=false instead. Scripts with the defer attribute will execute in the order in which they appear in the document.

I love this solution, because not need any javascript code, but only need is one html attribute <3

This is wrong fundamentally. Defer does not prevent execution post page onload. Both defer and async scripts are loaded before page load, instead, improves the "domInteraction" time.

@Akansh the OP just wanted a way to ensure the DOM had loaded before their script executes. Defer does this, it's literally written in the documentation snippet I shared in my answer.

It looks like you can make inline script load after page load using async false? "To achieve a similar effect for dynamically inserted scripts use async=false instead. - This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded."

L

Lucky

Here's a script based on deferred js loading after the page is loaded,

<script type="text/javascript">
  function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "deferredfunctions.js";
      document.body.appendChild(element);
  }

  if (window.addEventListener)
      window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
      window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

Where do I place this?

Paste code in your HTML just before the tag (near the bottom of your HTML file).

What does it do?

This code says wait for the entire document to load, then load the external file deferredfunctions.js.

Here's an example of the above code - Defer Rendering of JS

I wrote this based on defered loading of javascript pagespeed google concept and also sourced from this article Defer loading javascript

I think this solution, combined with the answer of chaos user (stackoverflow.com/a/807997/10712525), will be the best thing that u can do.

D

Daniel A. White

Look at hooking document.onload or in jQuery $(document).load(...).

Is this event reliable? (Cross browser.. IE6+ FF2+ etc)

Yes this is cross-browser, standard DOM.

It's actually window.onload that's more standard, not document.onload. AFAIK

Is onload called before or after all resources (such as fonts and images) are loaded and properly visually updated?

T

T.Todua

JavaScript

document.addEventListener('readystatechange', event => { 

    // When HTML/DOM elements are ready:
    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
        alert("hi 1");
    }

    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
    if (event.target.readyState === "complete") {
        alert("hi 2");
    }
});

same for jQuery:

$(document).ready(function() {   //same as: $(function() { 
     alert("hi 1");
});

$(window).load(function() {
     alert("hi 2");
});

NOTE: - Don't use the below markup ( because it overwrites other same-kind declarations ) :

document.onreadystatechange = ...

T

TylerH

<script type="text/javascript">
  function downloadJSAtOnload() {
   var element = document.createElement("script");
   element.src = "defer.js";
   document.body.appendChild(element);
  }
  if (window.addEventListener)
   window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
   window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

http://www.feedthebot.com/pagespeed/defer-loading-javascript.html

V

Viktor Borítás

Working Fiddle on <body onload="myFunction()">

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript">
   function myFunction(){
    alert("Page is loaded");
   }
  </script>
 </head>

 <body onload="myFunction()">
  <h1>Hello World!</h1>
 </body>    
</html>

e

ekostadinov

I find sometimes on more complex pages that not all the elements have loaded by the time window.onload is fired. If that's the case, add setTimeout before your function to delay is a moment. It's not elegant but it's a simple hack that renders well.

window.onload = function(){ doSomethingCool(); };

becomes...

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };

r

rogerdpack

If you are using jQuery,

$(function() {...});

is equivalent to

$(document).ready(function () { })

or another short hand:

$().ready(function () { })

See What event does JQuery $function() fire on? and https://api.jquery.com/ready/

A

Arthur Tsidkilov

document.onreadystatechange = function(){
     if(document.readyState === 'complete'){
         /*code here*/
     }
}

look here: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx

one-line: document.onload = function() { ... }

f

fragilewindows

Just define <body onload="aFunction()"> that will be called after the page has been loaded. Your code in the script is than enclosed by aFunction() { }.

M

MD SHAYON

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

document.addEventListener('DOMContentLoaded', (event) => { console.log('DOM fully loaded and parsed'); });

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

window.addEventListener('load', (event) => { console.log('page is fully loaded'); });

H

Hakan KOSE

<body onload="myFunction()">

This code works well.

But window.onload method has various dependencies. So it may not work all the time.

K

Kamil Kiełczewski

Comparison

In below snippet I collect choosen methods and show their sequence. Remarks

the document.onload (X) is not supported by any modern browser (event is never fired)

if you use (F) and at the same time window.onload (E) then only first one will be executed (because it override second one)

event handler given in (F) is wrapped by additional onload function

document.onreadystatechange (D) not override document .addEventListener('readystatechange'...) (C) probably cecasue onXYZevent-like methods are independent than addEventListener queues (which allows add multiple listeners). Probably nothing happens between execution this two handlers.

all scripts write their timestamp in console - but scripts which also have access to div write their timestamps also in body (click "Full Page" link after script execution to see it).

solutions readystatechange (C,D) are executed multiple times by browser but for different document states: loading - the document is loading (no fired in snippet) interactive - the document is parsed, fired before DOMContentLoaded complete - the document and resources are loaded, fired before body/window onload

loading - the document is loading (no fired in snippet)

interactive - the document is parsed, fired before DOMContentLoaded

complete - the document and resources are loaded, fired before body/window onload

佚

佚名

There is a very good documentation on How to detect if document has loaded using Javascript or Jquery.

Using the native Javascript this can be achieved

if (document.readyState === "complete") {
 init();
 }

This can also be done inside the interval

var interval = setInterval(function() {
    if(document.readyState === 'complete') {
        clearInterval(interval);
        init();
    }    
}, 100);

Eg By Mozilla

switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log("Page is loaded completely");
    break;
}

Using Jquery To check only if DOM is ready

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

To check if all resources are loaded use window.load

 $( window ).load(function() {
        console.log( "window loaded" );
    });

H

Harish Kumar

Use this code with jQuery library, this would work perfectly fine.

$(window).bind("load", function() { 

  // your javascript event

});

Add some description here

T

TylerH

$(window).on("load", function(){ ... });

.ready() works best for me.

$(document).ready(function(){ ... });

.load() will work, but it won't wait till the page is loaded.

jQuery(window).load(function () { ... });

Doesn't work for me, breaks the next-to inline script. I am also using jQuery 3.2.1 along with some other jQuery forks.

To hide my websites loading overlay, I use the following:

<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>

C

Camel Djoulako

You can write a function on a specific script file and call it in to your body element using onload attribute.

Exemple:

<script>
  afterPageLoad() {
   //your code here
}
</script>

Now call your script into your html page using script tag:

<script src="afterload.js"></script>

into your body element; add onload attribute like this:

<body onload="afterPageLoad();">

Please reconsider you rollback which undid a helpful edit. Getting the readability of your posts improved by other users should be considered a good thing.

I

Iain

As Daniel says, you could use document.onload.

The various javascript frameworks hwoever (jQuery, Mootools, etc.) use a custom event 'domready', which I guess must be more effective. If you're developing with javascript, I'd highly recommend exploiting a framework, they massively increase your productivity.

V

Valentin Jacquemin

Using the YUI library (I love it):

YAHOO.util.Event.onDOMReady(function(){
    //your code
});

Portable and beautiful! However, if you don't use YUI for other stuff (see its doc) I would say that it's not worth to use it.

N.B. : to use this code you need to import 2 scripts

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>

K

Kalidass

My advise use asnyc attribute for script tag thats help you to load the external scripts after page load

<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>

According to w3schools, If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing). Perhaps you meant defer instead, like @Daniel Price mentioned?

J

Jared Lovin

This answer depends on jquery

s

saber tabatabaee yazdi

i can catch page load by this code

<script>
console.log("logger saber");

window.onload = (event) => {
  console.log('page is fully loaded');
document.getElementById("tafahomNameId_78ec7c44-beab-40de-9326-095f474519f4_$LookupField").value = 1;;
};

</script>

How to make JavaScript execute after page load?

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US