「自学哈网」前端页面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" />
本站声明:
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!
自学哈网 » 「自学哈网」前端页面img标签图片不存在或加载失败显示一张自定义图片
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!
自学哈网 » 「自学哈网」前端页面img标签图片不存在或加载失败显示一张自定义图片
也想出现在这里?
联系我们吧