利用图片的 onerror 事件载入默认图片
在Web开发中，图片的加载是一个非常重要的步骤。当图片不存在时，如何载入默认图片是一个常见的问题。本文将介绍如何利用图片的 onerror 事件载入默认图片。
一、什么是 onerror 事件？
onerror 事件是HTML中的一个事件，它发生在浏览器无法加载图片时。这个事件可以被用来载入默认图片，以避免图片加载失败时的空白页面。
二、利用 onerror 事件载入默认图片的方法
利用 onerror 事件载入默认图片可以通过以下步骤实现：
1. 创建一个 img 元素，并将其添加到容器中。
2. 设置 img 元素的 src 属性为不存在的图片。
3. 在 img 元素上添加 onerror 事件，并在事件处理函数中设置默认图片的 URL。
下面是示例代码：
```
<div id="container"></div>
<script LANGUAGE="JavaScript">
window.onload=function(){
var container = document.getElementById("container");
var thumbImg = container.appendChild(document.createElement('img'));
thumbImg.src = "20091214920298336.jpg" ; //不存在的图片
thumbImg.onerror = function(){
thumbImg.src='//www.jb51.net/images/logo.gif';
};
}
</script>
```
在上面的代码中，我们首先创建了一个 img 元素，并将其添加到容器中。然后，我们设置了 img 元素的 src 属性为不存在的图片。在 onerror 事件处理函数中，我们设置了默认图片的 URL。
三、Onerror 事件的浏览器兼容性
onerror 事件的浏览器兼容性是一个需要注意的问题。在 Firefox 中，上面的代码可以正常工作。但是在 IE7 中，却不起作用。
为了解决这个问题，我们可以使用以下代码：
```
<img src="data:image/png;base64," alt="on error 显示默认图片" resize="true" onerror="this.src='//www.jb51.net/images/logo.gif'">
```
这个代码使用了 data URI scheme 来设置默认图片的 URL，并且可以在 IE7 和 Firefox 中正常工作。
四、结论
本文介绍了如何利用图片的 onerror 事件载入默认图片。这种方法可以解决图片加载失败时的空白页面问题，并且可以在多种浏览器中正常工作。
