JavaScript & jQuery Tutorials

JQ Home Right Arrow Events Right Arrow .load()

.load()    **DEPRECATED**

Load event handler.


The .load() method is used to bind an event handler to The JavaScript load event.

  • The load() event is passed to an element when it and any sub-elements attached to it have been completely loaded. This event can be sent to any element associated with frames, iframes, images, scripts, URLs and the window object. Whenever possible when using the .load() method with images, it is preferable to use the jQuery .ready() method unless you need all images to be fully loaded before executing some code. There are also some known issues when using the .load() method with images:
    1. The .load() method doesn't work consistently across browsers.
    2. The .load() method doesn't bubble up the DOM tree correctly.
    3. The .load() method may not fire if the images in question are already stored in the cache of the browser being used.
    4. The .load() method doesn't work correctly in WebKit browsers if the image 'src' is set to the same 'src' as previously.
    5. There is also a jQuery Ajax method named .load() and the method that is fired depends on the set of arguments passed.

This method was deprecated in jQuery 1.8.


Signature Description
.load( [eventData], handler(eventObject) )Bind an event handler to the load JavaScript event, optionally passing an object of data.


Parameter Description Type
eventDataAn object of data to pass to the event handler.Object
handler( eventObject )A function to execute each time the event is triggered.Function


A jQuery object.

.load( [eventData], handler(eventObject) ) Example go to Events Events   go to top of page Top

  • This signature is a shortcut for .bind('load', handler).

Bind an event handler to the load JavaScript event, optionally passing a map of data.

In the example below we show a new message under the 'div' element with the image of chicken korma in it. As soon as the image is completely loaded the load JavaScript event occurs. This then fires off the $('#curry1').load({ param1: '#loadspan1', param2: 'load', param3: '**JavaScript event triggered** ' }, addText2); code.

What we are doing here is passing across the event object to the function addText2(event). The map we specify, in our case { param1: '#loadspan1', param2: 'load', param3: '**JavaScript event triggered** ' } gets tagged onto the property.

We then access these parameters in the function via and use the passed parameters for our appended data. As mentioned in the description above the code working depends on the browser being used when the .load() method is applied to image elements.

  $('#curry1').load({ param1: '#loadspan1', param2: 'load ', 
               param3: '**JavaScript event triggered**  ' }, addText2);
  function addText2(event) {
    $( + ''<code>' + ''</code>');

a picture of curry

We will show a message here when the load JavaScript event fires.

Related Tutorials

jQuery Advanced Tutorials - Lesson 1 - Loading & Browser Events


go to jQuery home page jQ Home go to Events Events go to top of page Top