How to make JavaScript execute after page load?

run script after page load complete jquery
call javascript function after page load complete
javascript execute after all scripts loaded
window.onload = function()
javascript on page load
jquery on page load
javascript wait for page to load
domcontentloaded

I'm executing an external script, using a <script> inside <head>.

Now since the script executes before the page has loaded, I can't access the <body>, among other things. I'd like to execute some JavaScript after the document has been "loaded" (HTML fully downloaded and in-RAM). Are there any events that I can hook onto when my script executes, that will get triggered on page load?

These solutions will work:

<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.

execute function after complete page load, And this will make it very difficult to "exactly" simulate the behavior using plain Javascript (but not impossible of course). as Jeffrey Sweeney and J  How to execute php code after html page load. Thanks for contributing an answer to Stack Overflow! How to make JavaScript execute after page load? 21.

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;
    }
}

Page: DOMContentLoaded, load, beforeunload , If we have a script after the style, then that script must wait until the script > // the script doesn't not execute until the stylesheet is loaded alert  I hope this can help you too, I had a similar issue and I fixed it by calling the following just after loading the content in the page (like after an AJAX request for a page to be shown inside a div): (function($) { $(document).ready(function() { // your pretty function call, or generic code }); }(jQuery));

Keep in mind that loading the page has more than one stage. Btw, this is pure JavaScript
"DOMContentLoaded"

This event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, 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 img 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 stylesheets

"load"

A very different event, load, should only be used to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.

Exectues after everything is loaded and parsed:

window.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

onload Event, Execute a JavaScript immediately after a page has been loaded: <body onload="​myFunction()">. Try it Yourself ». More "Try it Yourself" examples below. To ensure that the Javascript executes after everything on the page (DOMContent-wise) has been created, you have several options. You can add the script to the very bottom of the tag. This is actually good practice, as a script at the bottom of the page makes the page seem to load faster, and perceived performance is important.

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.

How to run a function when the page is loaded in JavaScript , A function can be executed when the page loaded successfully. This can be used with the body element to execute a script after the webpage has completely loaded. How to make browser to go back to previous page using JavaScript ? All JavaScript must execute every time a page loads. If the script is on the page, it will execute. The logic that is executed within the JavaScript included on the page may execute in a different manner depending on the page state, input provided, and any other signals it receives, be it from the server or the client.

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.

Where should JS <script> tags be linked in HTML documents , is than enclosed by aFunction() { } . This code works well. But window. This is very nice post, I am beginner in JavaScript so I know only you can solve my problem. My some of java script taking time to load. <script type="text/javascript"> Content1 </script> <script type="text/javascript"> Content2 </script> Please convert it to load after all page content load java script. Thanks in advance.

How to execute a function when page has fully loaded?, , which can prevent errors, and speed up website response time. }); This function basically says, don't run any of the code inside until the document is ready, or fully loaded. Call/Execute javascript function after the whole web page is loaded. Here you will learn two ways to call javascript function after the whole web page is loaded. When you work with jQuery/javascript, sometime you need to load whole web page and after that call/execute javascript functions. 1. First Simple Way

Run JavaScript AFTER page loads - Question, Which of the following event you use to run something after the page has finished loading? I want to Load my Minified JS after the page load. Currently it takes 1.8 sec to 2.5 sec to load this JS File which is increasing my complete webpage load to 4.2 sec to 5.1 sec. So how can i load this JS without delaying the page load.

How to Make JavaScript Execute After Page Load, I added an HTML block to my page, to run some JavaScript there. My code snippet works from the JavaScript console, after the page is fully loaded. loaded.? You can also try jquery method if you have jquery running… This tutorial shows how to call a javascript function on page load using various plain JavaScript functions and using JQuery on document ready.

Comments
  • What is the difference between <body onload="script();"> and document.onload=function ... ?
  • @mentoliptus: document.onload= is non obtrusive en.wikipedia.org/wiki/Unobtrusive_JavaScript
  • script in the html ...no no no $(function() { code here }); <- javascript.js can be placed in head and will load after DOM
  • @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.
  • +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/…