.load() does not work on ipad

Question

I have simple script to check image, but it is not working properly on my ipad with ios 5.1. In image i receive stream of jpg's, so load must work on each frame (as in big safari), but in ipad it fires only once. May be some suggestions?

$('#image').load(function(){
    console.log(new Date().getTime(););
});

Answer 1

It is mentioned on the jQuery official website:

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

Answer 2

As said by @Parv-sharma, .load is not reliable. Same experience here.

If this is about stuff like responsive image adjustment (just guessing), this is IMHO your best chance of workaround:

1. have a central resizeScript() of course. Make sure you catch the img.height() === 0 case, in that case stick with your graceful degradation aka default aka non-js scaling. (read: do nothing for now)

2. fire your resizeScript() up to three times

   on image.load(), on jQuery.ready() and lastly a delayed one, a few milliseconds later.

   setTimeout( App.adjustFullsize ,300);
   

   That either does no harm (if one of the prior calls did the job already, or if things keep failing) but has a good change that image is now also “officially” loaded...

(oh, there's a 4th time, you probably want to register to the resize() (i.e. device turns) event as well...).