javascript - 使用 jQuery 修改样式时可以捕获 http 错误吗？

Question

如果我使用 jQuery 来设置页面的背景图像，如下所示：

$('body').css({
    "background-image": 'url(' + myImageUrl + ')'
});

如何检测和处理可能从图像 URL 返回的 HTTP 错误（500、503、404 等）？

我确实找到了一个.error()注册回调的 jQuery 方法，但它在 1.8 中被标记为已弃用，没有说明应该用什么来替换它。（我似乎也无法让它工作，无论是否被弃用。）

---

根据下面的评论和答案，我尝试了这种变体，它似乎有效，但答案却被否决了。这有什么不好的原因吗？

$('<img>').error(function(obj) {
    alert('error');
}).load(function() {
    $('body').css({
        "background-image": 'url(' + myImageUrl + ')'
    });
}).attr('src', myImageUrl);

Answer 1

试试这个

jQuery

Live Demo

var $image = $("<img />");
$image.on("error",function() { 
  $('body').css({
    "background-image": 'url(defaultimage.jpg)'
  });
}).on("load",function() {
  $('body').css({
    "background-image": 'url(' + myImageUrl + ')'
  });
}).attr("src",myImageUrl);

JavaScript：

var image = new Image();
image.onerror=function() { 
  document.body.style.backgroundImage="url(defaultimage.jpg)"
}
image.onload=function() {
  document.body.style.backgroundImage="url("+myImageUrl+")"
}
image.src=myImageUrl;