jump to navigation

JQuery 101 : window.onload vs document.ready September 19, 2011

Posted by Tournas Dimitrios in JQuery.

window.onload is a built-in event of  JavaScript (core functionality) , this event is  not “fired”  until all dependent resources such as images and stylesheets have loaded . A few large image files will quickly reveal that window.onload() can be painfully slow . jQuery’s “document.ready event executes already when the HTML-Document is loaded and the DOM is ready, even if all the graphics haven’t loaded yet .  You can use it to launch any kind of JavaScript you like . It doesn’t have to be reserved for jQuery style coding . And there’s nothing wrong with telling  jQuery to launch several different functions at once .

Code examples :

$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
alert("document is ready");
//You can also use a shorter syntax instead of document.ready 

$(function() {

//executes when HTML-Document is loaded and DOM is ready
alert("document is ready");
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
alert("window is loaded");

Sometimes you may want to manipulate pictures . For example you want to vertically and horizontally align a picture and you need to get the width and height of the picture in order to do that . With $(document).ready() you won’t be able to do that if the visitor doesn’t have the image already loaded , in which case you need to initialize the jQuery alignment function when the image finishes loading . That’s where we can  use …

//initialize after images are loaded

Read more :


1. vivek07088 - September 17, 2013

Good explanation i found another one with examples –

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s