预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>预加载</title>
<style>
.box{
width: 600px;
height: 800px;
border:1px solid gray;
position: relative;
overflow: hidden;
}
.progress{
width: 1000px;
height: 1000px;
background-color: lightblue;
position: absolute;
top:0;
/*display: none;*/
}
.red{
width: 400px;
height: 500px;
position: absolute;
top:0;
background-color: red;
display: none;
}
img{
width: 80px;
margin:5px;
}
</style>
</head>
<body>
<div class="box">
<!--加载页面-->
<div class="progress">loading...</div>
<!--主页面-->
<div class="red">
<img src="imgs/p_00.jpg" alt="">
<img src="imgs/p_01.jpg" alt="">
<img src="imgs/p_02.jpg" alt="">
<img src="imgs/p_03.jpg" alt="">
<img src="imgs/p_04.jpg" alt="">
<img src="imgs/p_05.jpg" alt="">
<img src="imgs/p_06.jpg" alt="">
<img src="imgs/p_07.jpg" alt="">
<img src="imgs/p_08.jpg" alt="">
<img src="imgs/p_09.jpg" alt="">
</div>
</div>
</body>
<script>
var progress = document.getElementsByClassName('progress')[0];
var red = document.getElementsByClassName('red')[0];
var arrSrc = ["imgs/p_00.jpg","imgs/p_01.jpg","imgs/p_02.jpg","imgs/p_03.jpg","imgs/p_04.jpg","imgs/p_05.jpg","imgs/p_06.jpg","imgs/p_07.jpg","imgs/p_09.jpg"];
var arrImg = [];
var count = 0;
for(var i=0; i<arrSrc.length; i++){
var img = new Image();
img.src = arrSrc[i];
img.onload = function(){
count++
if(count == arrSrc.length){
progress.style.display = "none";
red.style.display = "block";
}
}
}
</script>
</html>
网友评论