JS基础之图片的预加载

朴灿烈づ我的快乐病毒、 2021-09-15 19:48 316阅读 0赞

图片的预加载:在用户浏览网页前预先对图片的资源呢进行加载,加载完成后再为用户呈现,提高页面浏览的流畅性,增加用户体验

<!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>