jQuery bind("load")

Question

var imgLoader = $("<img />");
$(imgLoader).attr("src", "http://localhost/malevil/Content/Images/img_adrenalin.jpg");

$(imgLoader).unbind('load');
$(imgLoader).bind('load', function () {
    alert("event fired");
});

But this work only in chrome, where is the problem ? In IE, Firefox and Opera load event never fired.

Can you tell me if you have tried to bind the events before actually setting the source of the image? — supakeen, Apr 27 '11 at 16:00

score 12 · Accepted Answer · edited May 23 '17 at 12:33

You need to bind the load event before you set the src property.

As a side note, there are known issues with the load event on images that you need to be aware of:

javascript, image onload() doesnt fire in webkit if loading same image

And, quoting from the jQuery manual on load():

It doesn't work consistently nor reliably cross-browser

It doesn't fire correctly in WebKit if the image src is set to the same src as before

It doesn't correctly bubble up the DOM tree

Can cease to fire for images that already live in the browser's cache

score 3 · Answer 2 · answered Apr 27 '11 at 15:59

3

I would set the handler before you set the src attribute --as it might be that the image loads before your event handler gets set.

answered Apr 27 '11 at 15:59

Liv

6,006
1
22
29

haha this turned out to be the case for me for a similar issue. – Milind R Jan 21 '15 at 19:26

jQuery bind("load")

2 Answers2