加載失敗的圖片如何刪除？

我有五張圖片，用無序加載之后有三張加載失敗，但總共還是有五張，點下一張的時候沒反應，直到點到加載成功的那一張圖片才會顯示，這樣體驗太不好，怎樣把加載失敗的圖片從數組刪除？（判斷數組內其中一個圖片是否加載失敗）

qq_帥鍋_03794460

2017-05-24

源自：圖片預加載 2-3

關注問題我要回答

2935

操作

收起

1 回答

慕勒7123956 回答被采納 +3 積分
2017-05-27

我的思路是這樣的，利用jquery的error事件，如果發生了以后，就將這個元素從imgs數組中清除，只不過這樣會導致原來很多用len變量的只能使用imgs.length重新獲取數組的長度，代碼如下

var?imgs=[

		'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg',

		'http://img.article.pchome.net/00/44/23/20/pic_lib/wm/2.jpg',

		'http://lcd.yesky.com/imagelist/2009/044/404q4y8g4m0p.jpg',

		'http://lcd.yesky.com/imagelist/2009/044/cgro54wt2t2x.jpg',
		'http://lcd.yesky.com/imagelist/2009/044/cgro54wt2t2xsssd.jpg'
		

	];
var?index=0;
var?count=0;
var?len=imgs.length;
$.each(imgs,function(i,item){
	var?imgItem=new?Image();
	$(imgItem).on('error',function(){
		console.log('error');
		imgs.splice(i,1);
		console.log(imgs.length);
	})

	$(imgItem).on('load?',function(){
		
		$('.process').html(Math.round((count)/imgs.length*100)+'%');
		if(count>=imgs.length-1)
		{
			$('.loading').hide();
			document.title='1/'+imgs.length;
		}
		count++;
	});
	imgItem.src=item;
})
$('.btn').on('click',function(){
	if($(this).data('control')==='prev')
	{
		index=Math.max(0,--index);

	}
	else{
		index=Math.min(imgs.length-1,++index);

	}
	document.title=(index+1)+'/'+imgs.length;
	$('#img').attr('src',imgs[index]);
})