• Register
Welcome to Developerhelpway Q&A, where you can ask questions and receive answers from other members of the community.

What is the difference between JavaScript window.onload event and jQuery ready function?

0 votes
12 views

What is the difference between JavaScript window.onload event and jQuery ready function?

asked Nov 12, 2015 in jQuery by vinay singh

1 Answer

0 votes

Main difference between JavaScript onload event and jQuery ready function:-

Javascript onload event:-
window.onload() is a JavaScript function that loads event fires when all the content on your page has loaded, including the DOM (document object model) banner ads and images.

Javascript onload event is that waits for DOM to be created and waits until all external resources are fully loaded including heavy images, audios and videos e.t.c.  If loading images and media content takes lot of time that user can experience significant delay on execution of code defined in window.onload event.

jQuery ready event:-
document.ready() is a jQuery event. jQuery ready() function only wait for DOM tree and does not wait for images or external resource loading. So, it is doing faster execution. jQuery $(document).ready() is that can use it multiple times in your page, and browser will execute them in the order they appear in HTML page, as opposed to onload technique, which can only be used for a single function. Given this benefits, it's always better to use jQuery ready() function than JavaScript window.onload event.


JQuery’s document.ready() method allows you to run code as soon as the document is ready to be manipulated.

For example, if a browser supports the DOMContentLoaded event (as many non-IE browsers do), then it will fire on that event. However, IE8 doesn't have a domcontentloaded event, that came out in IE9.

Syntax used for jQuery ready:

$(document).ready(function){
    //write you code
});

The ready() method can only be used on the current document, so no selector is required:

$(function)

There are following points for document.ready():-

  • It will not wait any images to get loaded.
  • To execute JavaScript when the DOM is completely loaded. Put event handlers here.
  • It can be used multiple times.
  • Not used if you want to manipulate images Use $(window).load() instead.
  • Replace $ with jQuery when you receive “$ is not defined.”
answered Nov 15, 2015 by john12 (2,680 points)
...