Trigger event on body load complete js/jquery
Everyone's mentioned the ready
function (and its shortcuts), but even earlier than that, you can just put code in a script
tag just before the closing body
tag (this is what the YUI and Google Closure folks recommend), like this:
<script type='text/javascript'>
pageLoad();
</script>
</body>
At this point, everything above that script tag is available in the DOM.
So your options in order of occurrence:
Earliest: Function call in
script
tag just before closing thebody
tag. The DOM is ready at this point (according to the Google Closure folks, and they should know; I've also tested it on a bunch of browsers).Earlyish: the
jQuery.ready
callback (and its shortcut forms).Late, after all page elements including images are fully loaded:
window
onload
event.
Here's a live example: http://jsbin.com/icazi4, relevant extract:
</body>
<script type='text/javascript'>
runPage();
jQuery(function() {
display("From <tt>jQuery.ready</tt> callback.");
});
$(window).load(function() {
display("From <tt>window.onload</tt> callback.");
});
function runPage() {
display("From function call at end of <tt>body</tt> tag.");
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
</script>
(Yes, I could have used jQuery for the display
function, but I was starting with a non-jQuery template.)
When the page loads totally (dom, images, ...)
$(window).load(function(){
// full load
});
When DOM elements load (not necessary all images will be loaded)
$(function(){
// DOM Ready
});
Then you can trigger any event
$("element").trigger("event");