2024年03月27日 img默认图 HTML图片默认图 img加载失败时怎么显示默认图 懒猪技术
首先说我用的，看代码
<img src="images/logo.png" onerror="imgerrorfun();" />
<script type="text/javascript">
function imgerrorfun(){
var img=event.srcElement;
img.src="默认图片地址";
img.onerror=null; // 控制不要一直跳动
}
</script>另一种也是比较多人用的
//页面图片加载失败时 默认显示统一处理
document.addEventListener("error", function (e) {
var elem = e.target;
if (elem.tagName.toLowerCase() == "img") {
elem.src = "default.gif";
}
}, true);这种写法的好处，可以监听到动态js添加进来的元素，有些人可能会用jq的事件代理delegate或者on（我没有实现，开始以为我代理的不对，后来知道是error事件不支持冒泡），最好先将默认图片预加载：
var imgObj = new Image(); imgObj.src = 'default.gif';
如果默认图片也加载失败，会出现闪烁并且不断触发error方法，陷入死循环。
解决办法就是定义全局变量 num 每触发一次error num++，当num大于某一阀值的时候停止 定义error = null；关闭监听，并且显示alt的内容，做到向下兼容。
一种普通的方法：
$("img").on("error", function () {
$(this).attr("src", "../img/img.jpg");
});不支持动态添加的元素。
而且也会陷入死循环
另一种是可以避免陷入死循环的
$("img").one("error", function(e){
$(this).attr("src", "default.gif");
});还有一种直接在html标签中添加：
<img src="/image.gif" onerror='this.src="default.gif" />
本文链接：http://so.lmcjl.com/news/515/