April 18, 2012
How can I detect if an image object is being displayed?
Question by Mark
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 by Starx
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';
