JS基础之图片的预加载

图片的预加载:在用户浏览网页前预先对图片的资源呢进行加载,加载完成后再为用户呈现,提高页面浏览的流畅性,增加用户体验
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p id="loadState">加载速度:0%</p>
	<p id="loadText">正在努力加载</p>
</body>
<script>
	//图片的预加载:在用户浏览网页前预先对图片的资源呢进行加载,加载完成后再为用户呈现,提高页面浏览的流畅性,增加用户体验
	var soureceArr = ["./img/0.gif","./img/1.gif","./img/2.gif","./img/3.gif","./img/4.jpeg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531995565313&di=bc6e28f78585d497477c629ef42140fd&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Ff9dcd100baa1cd11c99d47dbb312c8fcc3ce2d25.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531995565312&di=e82dfc323b743af6204bdfb14ab42002&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F5fdf8db1cb1349545607eb0b5d4e9258d1094a47.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531995565312&di=033e0a99222535ab7aa49742a45057bd&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F78310a55b319ebc4cdcc3b748826cffc1f1716a2.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531995565312&di=cf22a38da13f37e01fbb20e33ccb848c&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4e4a20a4462309f7a3e467e8780e0cf3d6cad645.jpg"];
	var imgs =[];//用来存储加载完成的图片
	//用来记录已经加载完成的图片数量	
	 var count = 0;
	for(var i=0;i<soureceArr.length;i++){
		console.log(111);
		var img = new Image();
		imgs.push(img);
		img.src=soureceArr[i];
		img.onload = function(){
			//一旦触发事件,说明图片已经加载完成
			count++;
				console.log(count);
			var n =(count/soureceArr.length*100).toFixed(2)+"%";
			loadState.innerHTML="加载进度:"+n;	
			//当加载完成的数量与要加载的数量一致的时候就表示全部加载完成
			if(count==soureceArr.length){
				console.log(222);
				loadText.innerHTML="加载完成,请吐血";
				for(var i=0;i<imgs.length;i++){
					//加载完成后,显示图片
					document.body.appendChild(imgs[i]);
				}

			}
		}
	}



</script>
</html>
JS基础之图片的预加载

猜你喜欢
