加载失败的图片如何删除?

来源:2-3 实例1图片相册之使用预加载

qq_帅锅_03794460

2017-05-24 22:14

我有五张图片,用无序加载之后有三张加载失败,但总共还是有五张,点下一张的时候没反应,直到点到加载成功的那一张图片才会显示,这样体验太不好,怎样把加载失败的图片从数组删除?(判断数组内其中一个图片是否加载失败)

写回答 关注

1回答

  • 慕勒7123956
    2017-05-27 20:19:17
    已采纳

    我的思路是这样的,利用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]);
    })


    ffg_疯疯...

    splice之后可以len--,这样就可以不用imgs.length重新获取数组长度了

    2017-10-11 15:20:38

    共 1 条回复 >

图片预加载

预知发生的行为,提前加载需要的图片,获得更好的用户体验

40980 学习 · 81 问题

查看课程

相似问题