$("body").ready() works but $("body").load() does not work?

Question

Why? I'm having the same issue with the image Tag.

ready() callback gets invoked. load() callback never gets invoked.

Browser: Firefox3.6.8 on Mac

Edit:

I somehow get the feeling that I am using load() incorrectly in JQuery. Documentation I am referring to:- http://api.jquery.com/load-event/

I am doing

$("body").load(function() { // do something });

Isn't this right? I see some code doing:- $("#id").load("./newpage.html"); But these 2 are different APIs right?

Edit 2

Some more code to explain my whole issue here:-

var tagString = "<img id='"+imageId+"'></img>";
this.divElem.append(tagString);
var imgElems = $("#"+imageId);

var vowels = this;
imgElems.each(function (index) {
    $(this).attr('id',imgId).attr('src',imageUrl)
               .attr('width',1).attr('height',1);       
        $(this).load(function() { 
           // do something.
           // This Damned! function is never getting called!
        });

});

Works

 $().ready(function() {
    $().load(function() {
       /// something. this worked!
    });
 });

Does not work

    // without the ready() wrapper does not work
    $().load(function() {
       /// something. this worked!
    });

Why? I am happy it works. But I don't understand why!

-Ajay

Answer 1

As in the example on the page that you linked to, use:

$(window).load(function(){
  // do something
});

It might be possible to bind the event to the body element like you tried, but then you have to place the code for doing that inside the body element. If you put the script in the head (where script preferrably goes), the body element does't exist yet when the code runs.