How can I detect if an image object is being displayed?

Question

When I load an image object in the DOM for large images this will freeze the display for a moment on the iPad.

For testing purpose, let a GIF animation loader spin and add a large image to the DOM, when the image is loaded and added to the DOM you will notice that that GIF animation will freeze until the image is being displayed. This freeze will be enough to disable the CSS3 animation effect on it.

Is there something like

var image = new Image();
image.ready = function() { alert('the image is being displayed.') };

Answer 1

You can check if the image has been loaded like this

var img = new Image();
img.onload = function() {
  alert('Done!');
}
img.src = '/images/myImage.jpg';

Answer 2

For preloading images on mobile web applications, I've had success using html5-preloader. It seems like this is something that might help you as well.

HTML5-Preloader