当在src位置找不到图像时，想要隐藏图像吗?-wanttohideimagewhenimageisnotfoundatthesrclocation?

8  

The problem seems to be that by the time you bind your error event, the image's onerror has already fired. You can fire it again by resetting the img.src after binding the event. The following worked on IE8, FF, and Chrome.

问题似乎是，当您绑定错误事件时，映像的onerror已经启动。你可以重新设置img再次发射。绑定事件后的src。下面介绍了IE8、FF和Chrome。

$('img').error(function(){
    alert('hi');
    $(this).hide(); 
});

$('img').each(function() { this.src = this.src; });

jsFiddle is here: http://jsfiddle.net/7cnQN/

jsFiddle是:http://jsfiddle.net/7cnQN/

2  

Tested in FF, IE, Chrome, Safari, Opera.

测试在FF, IE, Chrome, Safari, Opera。

$('img').each(function() {
    var img = this;
    if (img.complete) {
        if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
            console.log(img, 'load failed');
        } else {
            console.log(img, 'load ok');
        }
    } else if (img.readyState == 'uninitialized') {
        console.log('load failed - IE');
    } else {
        $(img).error(function() { console.log(img, 'load failed - error()'); });
        $(img).ready(function() { console.log(img, 'load ok - onload()'); });
    }
});

0  

On both jQuery(document).ready() and jQuery(window).onload() the img will have already had the error, so you are binding to error too late. Try using:

在jQuery(document).ready()和jQuery(window).onload()中，img都已经有了错误，所以绑定到错误已经太晚了。尝试使用:

jQuery('img').live('error',function(){
            alert('hi');
        jQuery(this).hide(); 
        });

before jQuery(document).ready();

在jQuery(文档)时();

I haven't tried this code yet (and wouldn't have time too for a while) Let me know if it works.

我还没有试过这段代码(暂时也没有时间)让我知道它是否有效。

0  

I personally have issues with JQuery, as it seems to stop people looking into Javascript's native capabilities. I would personally use the onerror event, e.g.:

我个人认为JQuery有问题，因为它似乎阻止了人们研究Javascript的本机功能。我个人会使用onerror事件，例如:

myimage.Onerror= function() { this.style.visibility = 'hidden'; }

模板。Onerror= function() {this.style。可见性= '隐藏';}

(not tested)

(未测试)

0  

The example on the .error() docs show this:

error()文档中的示例显示如下:

$("img").error(function(){
  $(this).hide();
});

... which is essentially the same as what you're doing. Can you verify that jQuery is loaded and available on the page? Also, if you're using FireFox, Chrome or Safari, try checking your Javascript console for errors.

…本质上和你所做的是一样的。能否验证页面上是否已加载并可用jQuery ?此外，如果您正在使用FireFox、Chrome或Safari，请尝试检查Javascript控制台是否有错误。

EDIT: Note this also, from the docs:

编辑:注意这一点，来自文档:

This event may not be correctly fired when the page is served locally. Since error relies on normal HTTP status codes, it will generally not be triggered if the URL uses the file: protocol.

当页面在本地服务时，此事件可能不会被正确触发。由于错误依赖于正常的HTTP状态码，因此如果URL使用file: protocol，通常不会触发错误。

Are you testing this locally?

你是在本地测试吗?

0  

You might want to try a different tactic and instead show the images when they load:

您可能想尝试一种不同的策略，而不是在加载时显示图像:

jQuery('img').each(function(i,img){
    jQuery('img').bind('load',function(){ this.show(); });
    if (img.complete)
        jQuery(img).show();
});

First bind to the event, then check to see if the image has already loaded (.complete) and show it. This will require you to hide all of the images before-hand with a script or within the inline style of the individual images. Using a known container as a scope...

首先绑定到事件，然后检查映像是否已经加载(.complete)并显示它。这将要求您预先用脚本或在单个映像的内联样式中隐藏所有映像。使用一个已知的容器作为范围……

jQuery('#container img')

...you can limit this behavior to a subset of the images.

…您可以将这种行为限制为图像的一个子集。

0  

You dealing with a race condition. jQuery may or may not have been loaded when the image is loaded. The following code handles both cases.

你处理的是一个竞态条件。当加载图像时，jQuery可能已经加载，也可能没有加载。下面的代码处理这两种情况。

$('img').each(function() {
    var img = this;
    if (img.complete) {
        if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
            console.log(img, 'load failed');
        } else {
            console.log(img, 'load ok');
        }
    } else {
        $(img).error(function() { console.log(img, 'load failed - error()'); });
        $(img).ready(function() { console.log(img, 'load ok - onload()'); });
    }
});