Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the difference between `$(window).load(function(){})` and `$(function(){})`

I was using $(window).load(function(){}); for my projects until somewhere I saw that somebody said we could just use $(function(){}); and they would perform identically.
But now that I have more experience I have noticed that they are not identical. I noticed that the first piece kicks in a little bit after the second piece of code.
I just want to know what's the difference?

like image 723
2hamed Avatar asked Jun 07 '12 14:06

2hamed


People also ask

What is the difference between $( window .load and $( document ready ()?

ready() and $(window). load() event is that the code included inside onload function will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the $(document). ready() event fires before all images,iframes etc. are loaded, but after the whole DOM itself is ready.

What is difference between $( document .ready function () vs $( function ()?

So technically they are both the same. Not major difference between these two declaration. They used based on weather you use JavaScript then you should use $(document). ready declaration in other case you use jQuery library which is a part of JavaScript then you should use $(function) declaration.

What is the difference between the window onload event and the Ondocumentready event?

The $(document). ready() is a jQuery event which occurs when the HTML document has been fully loaded, while the window. onload event occurs later, when everything including images on the page loaded.

What does the window onload function do?

The onload property processes load events after the element has finished loading. This is used with the window element to execute a script after the webpage has completely loaded.


2 Answers

$(document).ready(function(){})

will wait till the document is loaded(DOM tree is loaded) and not till the entire window is loaded. for example It will not wait for the images,css or javascript to be fully loaded . Once the DOM is loaded with all the HTML components and event handlers the document is ready to be processed and then the $(document).ready() will complete

$(window).load(function(){});

This waits for the entire window to be loaded. When the entire page is loaded then only the $(window).load() is completed. Hence obviously $(document).ready(function(){}) finishes before $(window).load() because populating the components(like images,css) takes more time then just loading the DOM tree.

So $(function(){}); cannot be used as a replacement for $(window).load(function(){});

like image 194
prashant Avatar answered Oct 13 '22 00:10

prashant


From the jQuery docs itself.

The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:

window.onload = function(){ alert("welcome"); }

Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn't run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is that the HTML 'document' isn't finished loading yet, when you first try to run your code.

To circumvent both problems, jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event:

$(document).ready(function(){
   // Your code here
 });

Now,

$(window).load(function(){}); is equal to window.onload = function(){ alert("welcome"); }

And, $(function(){}); is a shortcut to $(document).ready(function(){ });

I think , this clears everything :)

like image 41
Jashwant Avatar answered Oct 13 '22 00:10

Jashwant