附上一个demo自定义预加载当前图后几张，有兴趣的可以把玩一下，请指教-慕课网

附上一个demo自定义预加载当前图后几张，有兴趣的可以把玩一下，请指教

来源：3-4 实例3漫画浏览之使用有序预加载

前端小蜗牛_

2017-08-15 15:30

<!DOCTYPE html>
<html>
<head>
	<title>图片无序预加载-优化</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta name="keywords" content="your keywords">
	<meta name="description" content="your description">
	<style>
		*{margin: 0;padding: 0}
		#box{width: 1024px;height: 500px;margin: 50px auto;}
		img{width: 1024px;height: 450px;border: 1px solid red;}
		#click{text-align: center;}
	</style>
</head>
<body>
	<div id="box">
		<img src="" alt="">
		<div id="click">
			<a href="" id="prev">上一页</a>
			<a href="" id="next">下一页</a>
		</div>
	</div>
	<script src="../../js/jquery-3.2.0.js"></script>
	<script>
		var imgs = [
		'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4116894745,1605052943&fm=26&gp=0.jpg',
		'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=644449983,791694252&fm=26&gp=0.jpg',
		'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3225666097,3247550499&fm=26&gp=0.jpg',
		'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3014020588,2537118876&fm=26&gp=0.jpg',
		'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2171490910,189745274&fm=26&gp=0.jpg',
		'https://coding.net/u/ready-/p/study/git/raw/master/img/Magnifier.png',
		'https://coding.net/u/ready-/p/study/git/raw/master/img/Magnifier.png'
		];
		var index = 0,
			curImg = 0,
			num = 1,//预加载当前图片后num张图片..
			len = imgs.length;
		$(function () {
			$('img').attr('src',imgs[0]);
			$('a').on('click',function(){
				curindex = (this.id === 'prev') ? Math.max(0,--index) : Math.min(imgs.length-1,++index);
				$('img').attr('src',imgs[curindex]);
				load();
				return false;
			})
		})
		function load(){
			var imgObj = new Image();
			$(imgObj).on('load error',function(){
				/*if(curImg >= len){

				}else{
					load();
				}*/
				if(curImg <= index+num){
					load();
					curImg++;
				}
			})
			imgObj.src = imgs[curImg];
		}
		load();
	</script>
</body>
</html>

写回答关注