Question

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

我已编写此代码，但不可用的图像未隐藏且仍显示交叉符号。任何人都能指出可能出错的地方。我在document.ready下写这个，我也在window.onload下试过。

Answer 1

问题似乎是，当您绑定错误事件时，图像的错误已经被触发。您可以通过在绑定事件后重置img.src来再次触发它。以下内容适用于IE8，FF和Chrome。

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

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

jsFiddle在这里：http://jsfiddle.net/7cnQN/

Answer 2

在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()'); });
    }
});

Answer 3

在jQuery(document).ready()和jQuery(window).onload()上，img已经出现错误，因此您过早地绑定到错误。尝试使用：

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

之前jQuery（文档）.ready（）;

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

Answer 4

我个人对JQuery存在问题，因为它似乎阻止了人们研究JavaScript的本机功能。我个人会使用 onerror 事件，例如：

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

（未经测试）

Answer 5

.error()文档中的示例显示了这一点：

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

......这与你正在做的事情基本相同。你能验证jQuery是否已加载并可在页面上使用？此外，如果您使用的是FireFox，Chrome或Safari，请尝试检查您的JavaScript控制台是否有错误。

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

在本地提供页面时，可能无法正确触发此事件。由于错误依赖于正常的HTTP状态代码，因此如果URL使用文件：protocol。
，通常不会触发它

你在本地测试吗？

Answer 6

你可能想尝试不同的策略，而是在加载时显示图像：

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

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

jQuery('#container img')

...您可以将此行为限制为图像的子集。

Answer 7

你处理竞争条件。加载图像时可能已加载或未加载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()'); });
    }
});

想要在src位置找不到图像时隐藏图像？

7 个答案: