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
}
也许这个例子可以帮助您解决事件问题。