Detect image input loading

Question

I was using this code:

<input type="image" ... onLoad="this.style.opacity = 1" />

It works fine in IE (at least, the versions that support opacity :p) but in Chrome the onLoad event did not fire when the image loaded.

Note that the src attribute of the input can change, and when it does some JavaScript sets the opacity to 0 first, and suitable transition properties make it look like the image fades out and the new one fades in. Also, use of <input type="image"> is required because the server needs the coordinates.

I have jerry-rigged it using an absolutely-positioned <img> taking the onLoad and opacity, placed behind the <input> that now uses a transparent GIF pixel. While it works, it's ugly.

Is there any way to detect the successful loading of an image used in an <input> in Chrome, or is this like background-image, undetectable?

EDIT: In case it helps, here's a Fiddle

Answer 1

This is sort of a hack, but you can instantiate a Javascript Image object, and then set the event listener on that and then set the src of the input when it's done loading:

http://jsfiddle.net/t8n4y/

Disclaimer: only tested on Chrome

HTML:

<input type="image" id="imgInput" />

Javascript:

 var photo = document.getElementById('imgInput');
            var img = new Image();
            img.addEventListener('load', function () { alert("done loading"); }, false);
            img.src = 'http://jeremydouglass.com/gamertextually/images/gt_snowflake_tags-2-ach-large.png?ran=' + Math.random();
            photo.src = img.src;