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进行了操纵，它位于现在使用透明GIF像素的<input>后面。虽然它有效但很难看。

有没有办法检测Chrome中<input>中使用的图片是否成功加载，或者是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;

Answer 2

我记得我过去遇到过这样的问题。您可以通过执行以下操作来检测它：

window.onload = function(){
    var input = document.getElementById('input1');
    input.src='';
    input.addEventListener('load', loadImage, false);
    input.src = 'http://theoffguard.net/wp-content/upLoads/2012/04/Nick-Cage.jpg';
}

function loadImage()
{
  console.log("Image is loaded");
}

样本： http://jsbin.com/ufovom/9/edit

希望这有帮助！

Answer 3

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

  //script ->

  $("#image").change(function () {
                if (this.files && this.files[0]) {
                var FR = new FileReader();
                FR.onload = function (e) {
                    //your onload
                };
                FR.readAsDataURL(input.files[0]);
            }
});

Answer 4

您可以使用addEventListener()方法和输入参考。

请注意，在将事件侦听器添加到输入之前，您需要让页面加载，为此，只需为窗口对象应用另一个事件侦听器，然后触发引用输入的函数。

检测图像输入加载

4 个答案: