在web项目开发中，经常遇到需要加载大量的图片，为了�提高用户体验，我们可以使用预加载技术把图片预先加载到浏览器中，这样用户使用时，会感觉网速很快，接下来给大家介绍一种简单常用的预加载方法。
瀑布流的实现
1.html代码很少，如下：
<div>
<progress min="0" max="100" value="0" id="progress"></progress>
</div>
<div class="box"></div>
2.首先介绍一下img的几个方法。
- onload方法，它代表图片加载完毕之后执行的函数,下面会介绍；
- onerror方法， 图片加载错误执行的函数
img.onerror = function(){
console.log("加载图片出错了");
}
- onabout方法，图片被终止加载/放弃加载图片 执行的函数
img.onabout = function(){
console.log("握不住的沙，不如就扬了他");
}
3. 创建瀑布流的函数
如果不加img.onload方法，所有图片会全部叠加在上面，不能从上到下的铺开，是因为img加载需要时间，而代码执行完毕的时间很短很短，这时获取到的img.offsetHeight就为零，这样图片就会挤在一起。
使用onload方法是加载一张图片完毕后或取img.offsetHeight，这样就能获取到图片的高度了。
下面使用函数的递归实现的
function createImg(){
var img = document.createElement("img");
// img.src = imgArr[i].src;
img.src = "img/P_0" + i + ".jpg";
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";
img.innerHTML = i;
box.appendChild(img);
// onload 代表图片加载完毕之后执行的函数
img.onload = function(){
progress.value = (i / 16)*100 ;
console.log(img.offsetHeight);
heightArr[minIndex] += (img.offsetHeight+10);
if(i >= 16){
return ;
}
createImg();
}
}
结果图如下：
瀑布流.png
图片预加载
1.在图片展示到页面之前预先全部加载出来
其中 ：var readyImg = new Image(); 语句也是创建img标签的一种写法；和document.createElement("img") 等价。
使用for循环创建所有的img标签，通过设置src属性来加载所有的图片，在所有图片加载完毕后，调用createImg(); 函数
for(var j = 0 ; j < 16 ; j++){
var readyImg = new Image();
imgArr.push(readyImg);
// 图片是在设置src之后就开始请求
readyImg.src = "img/P_0" + j + ".jpg";
readyImg.onload = function(){
count++;
progress.value = (count / 16)*100;
if(count == 16){
console.log("所有图片加载成功");
createImg()
}
}
}
这样在用户网速不好时，使用预加载，就能使用户浏览网站时不出现一些bug,或者页面的布局紊乱,能很好的提高用户体验
