Question

我正在通过网站jquery进行事件处理：jquery events documentation

我在页面中复制jquery错误事件时遇到了问题。

HTML

<!DOCTYPE html>
<html>
<head>
<title>User Registration</title>
</head>
<body>

<div id="header">
<img id="register" src="../image/register1.jpg" />

</div>


<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="../js/registerForm.js"></script>
</body>
</html>

我在图像文件夹中有一个文件register.jpg。我故意给register1.jpg检查错误是否发生。当我使用chrome开发人员工具时，我可以找到错误。

但我的jquery代码没有检测到错误。如果未加载第一个图像，我想加载和替代图像，如文档示例中所示。但是，即使警报消息也没有显示在错误上。请帮忙。

jQuery代码：

$("img").error(function(){

    alert("Error Loading Image");
    $(this).hide();
});

Answer 1

您没有收到错误，因为您在发生错误后附加了事件处理程序。来自您提供的docs：

必须在浏览器触发错误之前附加事件处理程序 event，这就是为什么示例在附加后设置src属性的原因处理程序。

因此，如果您像plunker之前一样附加处理程序，它将被执行。

<head>
<script src="jquery.js"></script>
<script>
$( document ).ready(function() {
   $("img").error(function(){  
       alert("img error");
       $(this).hide();
   });
});
</script>
</head>

但是，更简单的解决方案是使用onerror：

<img onerror="handleError(this);">

Answer 2

我最近使用js函数来检查浏览器是否可以显示数据URI：

function addDataUriDefault()
{
    var data = new Image();
    data.onload = data.onerror = function(){
        if(this.width != 1 || this.height != 1){
            $("img[src^='data']").attr("src", "/Images/Pages/Default.png");
        }
    }
    data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; // Test
}

也许这个例子可以帮助您解决事件问题。

JQuery错误事件在错误时加载备用映像

2 个答案: