我正在使用这段代码:
<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
最佳答案
这是一种 hack,但您可以实例化一个 Javascript Image
对象,然后在其上设置事件监听器,然后在加载完成后设置输入的 src:
免责声明:仅在 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;
关于javascript - 检测图像输入加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15014163/