jQuery-图片加载失败时，显示默认图片

最新推荐文章于 2024-08-01 14:29:41 发布

佛佛ง

最新推荐文章于 2024-08-01 14:29:41 发布

阅读量2.7k

点赞数

分类专栏： jQuery学习笔记

本文链接：https://blog.csdn.net/LzzMandy/article/details/94618915

版权

jQuery学习笔记专栏收录该内容

29 篇文章 1 订阅

订阅专栏

有以下几种情况：

1、正常显示图片；

<img src="img/bus2.png">

2、当图片未找到或者404时，触发 onerror 显示默认的图片；

<img src="img/bus22.png" onerror="this.src='img/default.png'">

3、若是默认图片也没找到，会引起崩溃，这时候可以通过设置this.οnerrοr='';显示裂图图标

<img src="img/bus22.png" onerror="this.onerror='';this.src='img/default2.png'">

4、多个图片时，可以批量设置默认图片

 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="scripts/jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function(){
			var $img = $("img.more");
			for(i = 0; i < $img.length; i++){
				$img.eq(i).attr("onerror","this.src='img/default.png'");
			}

			var $img = $("img.error");
			for(i = 0; i < $img.length; i++){
				$img.eq(i).attr("onerror","this.onerror='';this.src='img/default2.png'");
			}
		});
	</script>
	<style type="text/css">
	.item{
		width: 400px;
		height: 400px;
		margin:auto;
	}
</style>
</head>
<body>
	<div class="item">
		<div>正常显示的多个图片</div>
		<img src="img/bus2.png">
		<img src="img/taxi2.png">
		<img src="img/plane2.png">
		<img src="img/railway2.png">
		<div>当图片未找到或者404时，触发 onerror 显示默认的图片，批量处理</div>
		<img src="img/bus22.png" class="more">
		<img src="img/taxi22.png" class="more">
		<img src="img/plane22.png" class="more">
		<img src="img/railway22.png" class="more">
		<div>若是默认图片也没找到，会引起崩溃，设置this.onerror='';显示裂图图标</div>
		<img src="img/bus22.png" class="error">
		<img src="img/taxi22.png" class="error">
		<img src="img/plane22.png" class="error">
		<img src="img/railway22.png" class="error">
	</div>
</body>
</html>