Do you know the difference between $(document).ready, $(window).load and self-invoke anonymous function? I have to admit that I was really confused by this question at first. But, now I have the answer and I would like to explain to you the difference between them.
You have to know that this event handler $(document).ready(function(){ }) has the twin event handler, which is exactly the same. But, this version is shorter and more convenient.
$(function(){
});$(document).ready is fired after the whole DOM tree is ready. It is useful to make manipulations with DOM elements.
$(window).load fires after every DOM elements are loaded (images, frames and other). It is useful when you need images height, width or something like that.
$(window).load is fired after every DOM elements such as images, frames and others are loaded. It will wait until every element is completely loaded and then fires.It is useful when you need images height, width or something like that.
(function(){ ... })() is a self-invoke anonymous function. It is used to start script as soon as it is inserted into the document.
You can test it. Prepare a page with images and some scripts. Write a short script like this one:
$(document).ready(function(){
console.log('document is ready');
});
$(function(){
console.log('document is ready too');
});
$(window).load (function(){
console.log('window is loaded');
});
(function(){
console.log('it should be first');
})()You should see these results:
it should be first
document is ready
document is ready too
window is loaded
You can change position of first console.log and second to make sure that they fire at the same time.
That’s all for now. I hope this information will be useful for you.
See also: Adaptive layout
