两种方法图片加载失败时显示默认图片【亲测无闪图】
作者:admin 时间:2022-3-31 10:34:0 浏览:网站中的图像加载失败的原因有很多，可能是src图像包含断开的链接，或者，互联网连接可能很差，不足以从外部来源获取图像，或者，图像的服务器（可能是外部的）可能已关闭。
当图像未加载时，alt文本将显示在容器中，并带有一个小图标，表示图像损坏，如下所示：
此视图会影响用户体验，尤其是当文本开始超出图像容器时，甚至一些图像src没有设置alt的，连替代文本都没有显示，只有一个破裂的小图标。
当由于某种原因未正确获取图像时，我们可以显示默认图像（而不是替代文本），这便是本文将要介绍的内容。
使用onerror
根据MDN
当资源加载失败或无法使用时，将在 Element 对象上触发错误事件。例如，如果脚本执行错误或图像无法找到或无效。
当图像由于链接断开或任何原因而无法加载时，onerror将触发该事件。这是我们设置默认图像的地方。
设置默认图像
这里的想法是，我们声明一个回调函数，这样当触发错误事件时，event将调用以对象为参数的函数。在该回调函数中，我们可以将图像src的链接更改为我们确定没有损坏的默认链接，并且可能存在于同一台服务器上。
易犯错误
网上看到不少方法，但经过本人亲自测试后，发现大部分都存在无限循环（闪图）的问题，如下图这样：
当原图链接和默认图片链接都失效时，这个无限循环（闪图）的问题就产生了。
我们应该避免这个问题的产生，为此，我亲测了很多代码，发现还是有解决的办法。
现在，让我们看看代码。
HTML 和 JS
下面代码是使用Javascript来实现：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<img id="image1" src="图片链接" onerror="getDefaultImage()" alt="卡卡测速网 www.webkaka.com"/>
<script>
function getDefaultImage(){
var img=event.srcElement;
img.src="默认图片链接";
img.onerror=null;
}
</script>
</body>
</html>
亲测结果，这种写法当原图链接和默认图片链接都失效后，不会出现无限循环（闪图）的问题，而是显示替代文本（图片 src alt 的文字）。
关键要做的一件事是添加img.onerror = null。该行的相关性是，如果由于任何原因新分配的图像链接断开或未获取图像，onerror则将再次触发事件。如果图像没有再次加载，又再触发另一个触发器。这就产生一个无限的循环。
分配null给事件可以防止这种情况。如果新的图片链接失效，错误事件不会调用回调函数，然后alt会显示文字。
HTML 和 jQuery
下面代码是使用jQuery来实现：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
<body>
<img id="image1" src="图片链接" alt="卡卡测速网 www.webkaka.com"/>
<script>
$("#image1").one("error", function(){
$(this).attr("src", "默认图片链接");
});
</script>
</body>
</html>
亲测结果，完美！这种写法同样是，当原图链接和默认图片链接都失效后，不会出现无限循环（闪图）的问题，而是显示替代文本（图片 src alt 的文字）。
使用jQuery来实现，代码比较简单，不过你要先引用jQuery库文件。
注意，这里使用的是 jQuery one() 方法，one() 方法为被选元素添加一个或多个事件处理程序，并规定当事件发生时运行的函数。当使用 one() 方法时，每个元素只能运行一次事件处理程序函数。
并非所有onerror = null都有效
网上看到一个例子，他使用的JS代码是这个：
const img = document.getElementById("image")
img.addEventListener("error", function(event) {
event.target.src = "默认图片链接"
event.onerror = null
})虽然也使用了 onerror = null ，但是当原图链接和默认图片链接都失效时，仍然会进入无限循环模式。究其原因，是监听事件addEventListener()一直在进行，没有停止，event.onerror = null 在这里无效。
总结
这就是当图像无法加载时如何设置默认图像的方法，主要是使用了onerror的触发事件来实现，但要注意避免无限循环的问题。
标签: 图片加载
- 站长推荐
