jQuery alternative to bind('load') for use with images

Question

Possible Duplicate:
jQuery callback on image load (even when the image is cached)

So the .load() method has been deprecated in jQuery. load() is a shortcut for `bind('load', function).

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

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`

How does one perform a function on image load consistently? My Current code looks like so:

$(newImage).bind('load', function() {
    createSlices(slide); 
});

However after reading the docs (although I haven't noticed any problems) I am worried it may not fire for some users.

In my experience the native `onload` function is more reliable for this use than jQuery's `load()` ? — adeneo, Oct 15 '12 at 22:47

Tats_innit · Answer 1 · 2012-10-15T22:55:08.817

2

Try this plugin man: called waitforimages plugin: https://github.com/alexanderdickson/waitForImages (scroll down the link you will see various advanced use) - demo http://jsfiddle.net/FZ7Xy/

Hope it fits the need :)

Code

$('selector').waitForImages(function() {
    // All descendant images have loaded, now slide up.
    $(this).slideUp();  
});

edited Oct 15 '12 at 22:55

answered Oct 15 '12 at 22:48

Tats_innit

33,991
10
71
77

score 1 · Answer 2 · edited Oct 15 '12 at 22:53

1

var img = new Image();  
img.onload = function() {

} 

img.src=  src-image

the above code works on all browsers and even without jquery.

edited Oct 15 '12 at 22:53

Andrew Whitaker

124,656
32
289
307

answered Oct 15 '12 at 22:48

Amareswar

2,048
1
20
36

@Andrew thanks for formatting. – Amareswar Oct 15 '12 at 22:55
This code is still subject to the same potential issues that the jQuery documentation outlines. The question is how to solve those issues, not how to preload an image. – Matt Stone Oct 15 '12 at 22:56
native `onload` works on all browsers including IE6. – Amareswar Oct 15 '12 at 23:15

Matt Stone · Answer 3 · 2012-10-15T22:54:57.740

You're right to worry, IE7/8 in particular will sometimes fail to fire the load event if the image is cached.

One technique is to immediately check if the image is complete after binding the load event:

$(newImage).bind('load error', function() {
    createSlices(slide); 
});

// check if the image is immediately complete (cached)
if (newImage.complete || typeof newImage.complete === 'undefined') {
    createSlices(slide);
}

I've tested with success in:

IE 7/8/9/10
FF4+
Chrome (latest)
Safari 5+

score 0 · Answer 4 · answered Oct 15 '12 at 23:03

0

There is a great library that handles exactly this: https://github.com/desandro/imagesloaded

I've used it in production and it works wonderfully. Extremely reliable, not a single complaint.

answered Oct 15 '12 at 23:03

Peeter

9,282
5
36
53

jQuery alternative to bind('load') for use with images

4 Answers4

Linked