0 votes
in jQuery by

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

1 Answer

0 votes
by (4.4k points)

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:

    //write you code

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


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.”

Share:- Whatsapp Facebook Facebook

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