title: Detect image input loading
body: <p>I was using this code:</p>
  
  <pre><code>&lt;input type="image" ... onLoad="this.style.opacity = 1" /&gt;
  </code></pre>
  
  <p>It works fine in IE (at least, the versions that support <code>opacity</code> :p) but in Chrome the <code>onLoad</code> event did not fire when the image loaded.</p>
  
  <p>Note that the <code>src</code> attribute of the input can change, and when it does some JavaScript sets the <code>opacity</code> to 0 first, and suitable <code>transition</code> properties make it look like the image fades out and the new one fades in. Also, use of <code>&lt;input type="image"&gt;</code> is required because the server needs the coordinates.</p>
  
  <p>I have jerry-rigged it using an absolutely-positioned <code>&lt;img&gt;</code> taking the <code>onLoad</code> and <code>opacity</code>, placed behind the <code>&lt;input&gt;</code> that now uses a transparent GIF pixel. While it works, it's ugly.</p>
  
  <p>Is there any way to detect the successful loading of an image used in an <code>&lt;input&gt;</code> in Chrome, or is this like <code>background-image</code>, undetectable?</p>
  
  <p>EDIT: In case it helps, here's a <a href="http://jsfiddle.net/GKpYW/1/" rel="nofollow">Fiddle</a></p>