Question

我需要一些javascript / jquery的帮助。此客户端脚本的功能是在页面上的特定选择器内设置所有图像的事件处理程序，如果图像没有加载（例如，未找到），则将其删除。我的客户端脚本如下所示，在外部javascript文件的document.ready中触发。

$('.imagecontainer').error(function() { ($this).parent().hide(); });

这有时会起作用！有时，当页面加载时，它可以正常工作，对于某些图像，它可以正常工作的时间更长，但大部分时间它根本不起作用。如果图像没有加载它会做什么，周围的锚标记即。父图像是隐藏的。我已在函数中包含警报，以检查其被调用的时间，并在某个时间触发，但不是一直触发。

所以我想知道我哪里出错了。图像的路径/ src由服务器端代码设置为C＃，因为路径是在服务器端派生的，无法更改。

有关此的任何提示或想法？我在某处读到了这个事件应该在设置图像源之前绑定但不确定这是否可以实现，因为图像源是在服务器端设置的。

一旦我解决了（希望如此），我还有另外一个问题。某些图像由用户操作动态加载，并且在运行时不在页面上。我通过使用jquery语法.live（'click'，function）等来解决99％的事件。有没有人知道我是否可以使用.error进行类似操作或者如何设置它。

Answer 1

有几点需要注意：

您的代码段存在语法错误。您有($this).parent().hide();而不是$(this).parent().hide();。

查看.error()文档。具体来说，我注意到了两件事。首先是观察到如果您在本地运行，呼叫可能无法正常工作。其次，在评论中，有人观察到以下内容：

它使用onerror回调。这个回调仅为img标签定义。一些浏览器（IE，FF，...）支持这一点也回调其他对象。这是非常适合全球错误捕获 system（window.onerror）。这个行为不符合标准。例如，WebKit不会解雇此问题回调！

根据您提供的小片段，您可能会定位包含图片的元素，而不是图片本身。这很可能是你问题的根源。

Answer 2

我找到了解决问题的方法。它如下：

如果dom load事件在img错误事件之前触发，则我的上述方法不起作用。所以我不得不更改我的代码以等待window.onload事件触发，然后检查是否有任何图像被破坏。

  $(window).bind('load', function() {
        $('.imagecontainer').find('img').each(function() {
            if ((typeof this.naturalWidth != "undefined" && this.naturalWidth == 0) || this.readyState == 'uninitialized') {
                // Image not available
                $(this).parent().hide();
            }
        });
    });

这似乎很好地解决了这个问题。

但是我有一个问题。如果图像是动态加载的，例如。在模式弹出窗口或通过jquery ajax调用，它不起作用。我过去通过使用.live（）为我的jquery来解决这个问题。有没有办法将.live（）函数合并到上面？或者是处理动态加载图像的替代方法。

帮助需要绑定jquery .error（）

2 个答案: