.load()    ** REMOVED **S2C Home « Events « .load()

• <<    .scroll()
• .ready()     >>

Load event handler.

Description

The .load() method is used to bind an event handler to the JavaScript load event, optionally passing an object of data.

• 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 and removed in 3.0 and is shown for completeness.

Syntax

Parameters

Return

A jQuery object.

.load(handler(eventObject) ) Example Top

Bind an event handler to the load JavaScript event.

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

The example below no longer works from jQuery 3.0 onwards and is just shown as an example for people using earlier versions.

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(addText); code.

What we are doing here is passing across the event object to the function addText(event). The data we specify gets appened onto the event.data property.

$(function(){
  $('#curry1').load(addText);
  
  function addText(event) {
    $('#loadspan1').append('load 1 **JavaScript event triggered**<br>');
  }
});

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

.load( [eventData ,] handler(eventObject) ) Example Top

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

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

The example below no longer works from jQuery 3.0 onwards and is just shown as an example for people using earlier versions.

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 $('#curry2').load({ param1: '#loadspan2', 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: '#loadspan2', param2: 'load', param3: '**JavaScript event triggered** ' } gets tagged onto the event.data property.

We then access these parameters in the function via event.data.paramN 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.

$(function(){
  $('#curry2').load({ param1: '#loadspan2', param2: 'load ', 
               param3: 'load 2 **JavaScript event triggered**  ' }, addText2);
  
  function addText2(event) {
    $(event.data.param1).append(event.data.param2 + ''<code>' + event.data.param3+ ''</code><br>');
  }
});

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

• <<    .scroll()
• .ready()     >>