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
Html Text Input Allow Only Numeric Input
What's the Effect of Adding 'Return False' to a Click Event Listener
Where to Place JavaScript in an HTML File
How to Get the Raw Value an ≪Input Type="Number"≫ Field
How to Impose Maxlength on Textarea in HTML Using JavaScript
How Exactly Does ≪Script Defer="Defer"≫ Work
Client Checking File Size Using Html5
Using Queryselector With Ids That Are Numbers
How to Prevent a Click on a '#' Link from Jumping to Top of Page
Unescape HTML Entities in JavaScript
Get Element from Within an Iframe
Get Dom Content of Cross-Domain Iframe
Why I Have to Put All the Script to Index.Html in Jquery Mobile
Adding Options to Select With JavaScript