javascript - 检测图像输入加载

Question

我正在使用这段代码:

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

它在 IE 中工作正常(至少，支持 opacity 的版本:p)但在 Chrome 中 onLoad加载图像时未触发事件。

请注意 src输入的属性可以改变，当它改变时，一些 JavaScript 会设置 opacity先到0，合适transition属性使它看起来像图像淡出，新图像淡入。另外，使用 <input type="image">是必需的，因为服务器需要坐标。

我已经使用绝对定位的 <img> 偷工减料了服用onLoad和 opacity , 放在 <input> 后面现在使用透明的 GIF 像素。虽然它有效，但它很丑。

有什么方法可以检测 <input> 中使用的图像是否成功加载？在 Chrome 中，还是类似于 background-image , 检测不到？

编辑:如果有帮助，这里是 Fiddle

Answer 1

这是一种 hack，但您可以实例化一个 Javascript Image 对象，然后在其上设置事件监听器，然后在加载完成后设置输入的 src:

http://jsfiddle.net/t8n4y/

免责声明:仅在 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;