JQuery Error在出现错误时加载备用映像的事件



Am正在从网站jquery中进行事件处理:jquery事件文档

我在页面中复制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>

我在image文件夹中有一个register.jpg文件。我故意给register1.jpg来检查是否出现错误。当我使用chrome开发工具时,我可以找到错误。

但是我的jquery代码没有检测到错误。如果第一个图像没有加载,我想加载备用图像,如文档示例中所示。但是,即使是警告消息也不会显示在错误上。请帮忙。

jQuery代码:

$("img").error(function(){
    alert("Error Loading Image");
    $(this).hide();
});

您没有得到错误,因为您在错误发生后附加了事件处理程序。根据您提供的文档:

在浏览器触发错误之前,必须附加事件处理程序事件,这就是为什么该示例在附加后设置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);">

我最近使用了一个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
}

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

最新更新