How to Make JavaScript Execute After Page Load

How to make JavaScript execute after page load?

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.

execute a javascript after page load is complete

If you use jquery, the below code might work:

$(document).ready(function() {
$.getScript("http://bdv.bidvertiser.com/BidVertiser.dbm?pid=503589&bid=1747907");
});

Wihtout Jquery

window.onload = function() {
var element = document.createElement("script");
element.src = "http://bdv.bidvertiser.com/BidVertiser.dbm?pid=503589&bid=1747907";
document.getElementsByTagName("head")[0].appendChild(element );
}

How do I call a JavaScript function on page load?

If you want the onload method to take parameters, you can do something similar to this:

window.onload = function() {
yourFunction(param1, param2);
};

This binds onload to an anonymous function, that when invoked, will run your desired function, with whatever parameters you give it. And, of course, you can run more than one function from inside the anonymous function.

Execute javascript after page load is complete

In terms of a best practice, there isn't one. In terms of a good, common, and acceptable practices, there are a handful. You've hit one:

setTimeout(function() { }, 1);

In this case, the function is executed within the browser's minimum timeout period after all other in-line processing ends.

Similarly, if you want to ensure your function runs shortly after some condition is true, use an interval:

var readyCheck = setInterval(function() {
if (readyCondition) {
/* do stuff */
clearInterval(readyCheck);
}
}, 1);

I've been using a similar, but more generalized solution in my own work. I define a helper function in the header:

var upon = function(test, fn) {
if (typeof(test) == 'function' && test()) {
fn();
} else if (typeof(test) == 'string' && window[test]) {
fn();
} else {
setTimeout(function() { upon(test, fn); }, 50);
}
}; // upon()

... and I trigger other functionality when dependencies are resolved:

upon(function() { return MyNS.Thingy; }, function() {
// stuff that depends on MyNS.Thingy
});

upon(function() { return document.readyState == 'complete';}, function() {
// stuff that depends on a fully rendered document
});

Or, if you want a more authoritative good practice, follow Google's example. Create an external async script and inject it before your first header script:

var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true;
s.src = '/path/to/script.js';
var header_scripts = document.getElementsByTagName('script')[0];
header_scripts.parentNode.insertBefore(s, header_scripts);

Google's solution theoretically works on all browsers (IE < 10?) to get an external script executing as soon as possible without interfering with document loading.

If you want an authoritative common practice, check the source for jQuery's onready solution.

Execute JS function after some time of page load

Use setTimeout instead, as it is called only once after the pause:

setTimeout(myFunc, 3000);

How to execute a function when page has fully loaded?

That's called load. It came waaaaay before DOM ready was around, and DOM ready was actually created for the exact reason that load waited on images.

window.addEventListener('load', function () {
alert("It's loaded!")
})

How can I execute a JavaScript function after Page Load is completed?

Use the onload event like this:

window.onload = function(){
// your code here.......
};


Related Topics



Leave a reply



Submit