瀑布流图片以及预加载

在web项目开发中，经常遇到需要加载大量的图片，为了�提高用户体验，我们可以使用预加载技术把图片预先加载到浏览器中，这样用户使用时，会感觉网速很快，接下来给大家介绍一种简单常用的预加载方法。

瀑布流的实现

1.html代码很少，如下：

2.首先介绍一下img的几个方法。

1. onload方法，它代表图片加载完毕之后执行的函数,下面会介绍；
2. onerror方法， 图片加载错误执行的函数

            img.onerror = function(){
                console.log("加载图片出错了");
            }       

3. 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,或者页面的布局紊乱,能很好的提高用户体验