先声明一个数组，再创建img，再放进数组里，不让它被回收，当设置src时，就会发出请求，下载图片的路径，把所有的图片的路径都下载好后，再执行,因为已经提前请求了路径了，在同一个页面，请求过一次后，下面再用相同路径图片的时候就不用再请求了，可以瞬间加载好所有已经预加载的图片了
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>图片版瀑布流</title>
<style type="text/css">
.box{
width: 100%;
border: 1px purple solid;
position: relative;
margin: 0 auto;
/min-width: 200px;/
}
.box img{
width: 200px;
position: absolute;
transition: 0.5s;
}
</style>
</head>
<body>
<div>
<progress min="0" max="100" value="0" id="progress" ></progress>
</div>
<div class="box">
</div>
</body>
<script type="text/javascript">
var progress = document.getElementById("progress");
var box = document.getElementsByClassName('box')[0];
var heightArr=[];
var count = 0;
ar arr = ["wk1.png", "bg.png", "cold.png", "wm.png"]
var imgArr = [];
for(var j = 0; j < 16; j++){
//new Image和document.createElement('img')等价
var readyImg = new Image();
//把声明的对象存到数组里，垃圾回收机制就不会回收图片；
imgArr.push(readyImg);
//图片是在设置完src后就开市加载图片
readyImg.src = "img/P_0" + j + ".jpg”;
//onload方法绑定的是readImage指的对象----16张图片
eadyImg.onload = function(){
count++;
progress.value = (count / 16) * 100;
if(count == 16){
start();
//在这个位置写onresize方法是为了在图片没预加载好之前拖动窗口时不会加载图 片
window.onresize=function(){
start();
}
}
}
}
var isFirst=true;
function start(){
var l=parseInt((window.innerWidth-16)/210);
//如果窗口宽度发生变化，但是猎术没有变，就不能重新布局
if(heightArr.length==l&&l!=0){
return;
}
//如果窗口列数不足1列，也要保证heightArr的长度为1
heightArr.length=l==0?1:l;
box.style.width=210*l+'px';
for (var i=0;i<heightArr.length;i++) {
heightArr[i]=0;
}
for(var i = 0; i < 16; i++){
var img = imgArr[i]
var minIndex = 0;
for(var j = 1; j < heightArr.length; j++){
if (heightArr[minIndex] > heightArr[j]) {
minIndex = j;
}
}
img.style.left = minIndex * 210 + "px";
img.style.top = heightArr[minIndex] + "px";
if (isFirst) {
box.appendChild(img);
}
heightArr[minIndex] += (img.offsetHeight + 10);
}
//在第一次调用完start后关掉开关，不再创建img
isFirst=false;
}
</script>
</html>
网友评论