Question

我正在使用工作和损坏的图像进行一些测试：

HTML：

<a href="#"><img src="http://asdf.com/working.jpg" /></a>
<a href="#"><img src="http://asdf.com/broken.jpg" /></a> <!-- non valid URL -->

jQuery的：

$('a').click(function() {
    $(this).find('img').error(function() {
      alert('Image does not exist!');
    });
    return false;
});

这在某种程度上有效...基本上我希望它仅在用户点击损坏的图像时发出警报。我做错了什么？

Answer 1

我会将图像绑定到错误事件的图像，然后在出现错误时添加警报逻辑。这是我创建的一个有效JSFiddle示例。

$( "img" ).error(function() {
  $( this ).click(function() { 
    alert('Image does not exist!'); 
  });
});

Answer 2

jQuery 1.8中不推荐使用error()方法。所以你应该使用on('error',function(){});代替。但是，您仍然遇到在尝试图像加载之前必须附加错误处理程序的问题。因此，您可以在附加处理程序后设置img src。

编辑：我在img标签中没有src（无效的HTML），这让我感到困扰，所以我发现了这个受到启发的堆栈溢出：What's the valid way to include an image with no src?。 src="//:0"来自那里。

HTML：

<a href="#"><img data-src="http://placekitten.com/300/300" src="//:0" /></a>

<a href="#"><img data-src="http://asdf.com/broken.jpg" src="//:0" /></a> 
<!-- non valid URL -->

的Javascript

$(document).ready(function () {
    $('img').on ('error', function () {
        $(this).data('error',true);
    }).each(function() {
        $(this).attr('src',$(this).data('src'));
    });
    $('a').click(function () {
        if($(this).find('img').data('error') == true) alert('Image does not exist!');
        return false;
    });
});

http://jsfiddle.net/10xjo3of/2/

Answer 3

您可以对图片使用onerror属性。以下兼容性表列出了支持onerror属性的浏览器，您可以看到可以毫无问题地使用它： http://www.quirksmode.org/dom/events/error.html

将onerror="$(this).addClass('error');"添加到以下图片中：

<a href="#"><img src="http://asdf.com/working.jpg" onerror="$(this).addClass('error');" /></a>
<a href="#"><img src="http://asdf.com/broken.jpg" onerror="$(this).addClass('error');" /></a> <!-- non valid URL -->

每次点击，请检查error班级：

$('a').click(function() {
    if ($(this).find('img').hasClass('error')){
        alert('Image does not exist!');
    }
});

<强> JSFiddle Demo

.error里面.click函数

3 个答案: