快捷導(dǎo)航

Jquery判斷頁(yè)面圖片是否加載失敗的代碼

更新時(shí)間：2023年06月14日 12:42:48 投稿：mdxy-dxy

這篇文章主要介紹了Jquery判斷頁(yè)面圖片是否加載失敗,加載失敗則顯示默認(rèn)圖片的實(shí)現(xiàn)方法,需要的朋友可以參考下

功能需求

就是判斷頁(yè)面中的圖片是不是存在，如果出錯(cuò)了(圖片不存在或cdn沒(méi)同步)就可以臨時(shí)用默認(rèn)圖片顯示，增加了用戶友好度

實(shí)現(xiàn)代碼

<!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() {  //加載不到 圖片 時(shí)顯示 默認(rèn)圖片
            $('img').error(function () {   //加載圖片 出現(xiàn)404狀態(tài)時(shí)觸發(fā)
                $(this).attr("src", "Image/default.jpg");  //將加載不到的圖片 的src屬性 修改成默認(rèn) 圖片 ，注意：默認(rèn)圖片必須保證存在，否則 會(huì)一直 調(diào)用 此函數(shù)
            });
        }
    </script>
</head>
<body>
    <img src="Image/ad2.png" />
    <div>
        <div><img src="ad2.png" /></div>
    </div>
</body>
</html>

注意：ImageLoadEx() 必須在瀏覽器渲染 img HTML標(biāo)簽完成之后執(zhí)行，如果 img 標(biāo)簽是用js動(dòng)態(tài)添加的請(qǐng)?jiān)谔砑油瓿珊?重新調(diào)用一下ImageLoadEx()函數(shù)

下面是其它網(wǎng)友的補(bǔ)充

jQuery-圖片加載失敗時(shí)，顯示默認(rèn)圖片

1、正常顯示圖片；

2、當(dāng)圖片未找到或者404時(shí)，觸發(fā) onerror 顯示默認(rèn)的圖片；

3、若是默認(rèn)圖片也沒(méi)找到，會(huì)引起崩潰，這時(shí)候可以通過(guò)設(shè)置this.οnerrοr='';顯示裂圖圖標(biāo)

4、多個(gè)圖片時(shí)，可以批量設(shè)置默認(rèn)圖片

 
<!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>正常顯示的多個(gè)圖片</div>
		<img src="img/bus2.png">
		<img src="img/taxi2.png">
		<img src="img/plane2.png">
		<img src="img/railway2.png">
		<div>當(dāng)圖片未找到或者404時(shí)，觸發(fā) onerror 顯示默認(rèn)的圖片，批量處理</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>若是默認(rèn)圖片也沒(méi)找到，會(huì)引起崩潰，設(shè)置this.onerror='';顯示裂圖圖標(biāo)</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>

到此這篇關(guān)于Jquery判斷頁(yè)面圖片是否加載失敗的代碼的文章就介紹到這了,更多相關(guān)Jquery圖片是否加載失敗內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！