jquery

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > jquery > Jquery图片是否加载失败

Jquery判断页面图片是否加载失败的代码

投稿：mdxy-dxy

这篇文章主要介绍了Jquery判断页面图片是否加载失败,加载失败则显示默认图片的实现方法,需要的朋友可以参考下

功能需求

就是判断页面中的图片是不是存在，如果出错了(图片不存在或cdn没同步)就可以临时用默认图片显示，增加了用户友好度

实现代码

<!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>
    <title></title>
    <script src="Js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            ImageLoadEx();
        });
        function ImageLoadEx() {  //加载不到 图片 时显示 默认图片
            $('img').error(function () {   //加载图片 出现404状态时触发
                $(this).attr("src", "Image/default.jpg");  //将加载不到的图片 的src属性 修改成默认 图片 ，注意：默认图片必须保证存在，否则 会一直 调用 此函数
            });
        }
    </script>
</head>
<body>
    <img src="Image/ad2.png" />
    <div>
        <div><img src="ad2.png" /></div>
    </div>
</body>
</html>

注意：ImageLoadEx() 必须在浏览器渲染 img HTML标签 完成 之后执行，如果 img 标签是用js动态添加的 请在添加完成后 重新调用一下ImageLoadEx()函数

下面是其它网友的补充

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

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>

到此这篇关于Jquery判断页面图片是否加载失败的代码的文章就介绍到这了,更多相关Jquery图片是否加载失败内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

阅读全文