5

我正在使用这段代码：

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

它在 IE 中运行良好（至少支持opacity:p 的版本），但在 Chrome 中，onLoad加载图像时事件没有触发。

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

我已经使用绝对定位<img>的onLoadand对其进行了杰里操纵opacity，放在<input>现在使用透明 GIF 像素的后面。虽然它有效，但它很丑陋。

有什么方法可以检测<input>Chrome 中使用的图像的成功加载，还是background-image无法检测到？

编辑：如果有帮助，这里有一个小提琴

4

4 回答 4

1

这是一种 hack，但您可以实例化一个 JavascriptImage对象，然后在其上设置事件侦听器，然后在加载完成时设置输入的 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;
于 2013-02-22T00:09:07.390 回答
0

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

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

希望这可以帮助！

于 2013-02-22T00:00:39.693 回答
0 
<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]);
            }
});
于 2015-10-25T11:22:02.760 回答
-2

您可以将addEventListener()方法与输入的引用一起使用。

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

于 2013-02-21T23:31:20.600 回答