Question

我有以下代码让我烦恼：Fiddle

这些是理想的行为：

如果图片不存在，我想加载另一张图片，更改src属性
如果该图像加载失败，则应隐藏图像。
如果图像成功加载（存在），我希望它显示

HTML

<div id="test">
    <img id="myimage" src="nonono.jpg" />
</div>

JS

$("#test img").error(function () {
    console.log("error loading img " + $(this).attr("src"));
    $("#myimage").attr("src", "yuyuyu.jpg")
}).load(function () {
    console.log("success loading img " + $(this).attr("src"));
})

//--- Simulate a new image load
$("#myimage").attr("src", "yeyeye.jpg");

控制台输出就像这样：

获取http://fiddle.jshell.net/_display/yeyeye.jpg 404（未找到）

加载错误img yeyeye.jpg（index）：23

成功加载img yuyuyu.jpg（index）：26

获取http://fiddle.jshell.net/_display/yuyuyu.jpg 404（未找到）

不是很奇怪吗？两个图像都不存在，我期待错误信息的两倍，但我得到一个成功！

任何想法？我错过了什么吗？

谢谢

更新

我尝试在setTimeout属性更改中添加src，以便更好地了解哪些图片触发了load事件..并且..加载事件未被触发！

请点击此处：Fiddle with timeout

JS

$("#test img").error(function(){
    console.log("error loading img " + $(this).attr("src"));
    setTimeout(function(){
             $("#myimage").attr("src", "yuyuyu.jpg")
    }, 1000)
}).load(function(){
    console.log("success loading img " + $(this).attr("src"));  
})

为什么？

Answer 1

这并不奇怪，该功能在完成而非成功上运行，因此即使错误也是已完成的请求。请参阅jQuery load documentation。

如果您加载这样的图像，则可以访问请求的状态。

$("#test img").load("yuyuyu.jpg", function(response, status, xhr) {
    alert(status); 
});

您可以通过以下方式获取具体的错误代码：xhr.status
您还可以通过以下方式获取错误的文本表示：xhr.statusText

见fiddle。另请参阅另一个example。

即使图像不存在，也会触发图像加载回调

1 个答案: