Js学习三（预加载）

1.什么是预加载
资源预加载是一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。

2.为什么要用预加载
在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。

（文字来源：https://juejin.im/post/6844903614138286094）

3.实现预加载的办法
准备好几张照片，编号从0-16 。

（1）方法一：并行加载图片。

<script>
        var arr = [];
        for (var i = 0; i < 17; i++) {
            var img = new Image();
            img.addEventListener('load', loadHandler);
            img.src = "./images/" + i + ".jpeg";
        }

        function loadHandler(e) {
            arr.push(this);
            if (arr.length=== 16) {
                for (var i = 0; i < arr.length; i++) {
                    console.log(arr[i].src);
                }
            }
        }
    </script>

这个方法最大的问题就是：加载的时候会一次性拥塞到通道，造成堵塞。特点是：小的照片先加载出来，大的照片在后面加载。

（2）让图片按顺序加载出来

<script>
        var arr = [];
        var num = 0;

        // 加载第一张图片
        var img = new Image();
        img.addEventListener('load', loadHandler);
        img.src = "./images/" + num + ".jpeg";

        function loadHandler(e) {

            // 把当前加载进来的图片，push到数组中
            arr.push(this);

            // 上一次的监听事件删除
            this.removeEventListener("load", loadHandler); //删除不断产生的新的事件。

            // 让加载的图片到尾部 
            num++;

            // 如果加载的图片到尾了
            if (num > 16) {

                // 打印所有的图片地址
                for (var i = 0; i < arr.length; i++) {
                    console.log(arr[i].src);
                }
                return;
            }
            // 创建新图片,加载这个新图片,并且重新进入当前事件函数中
            var imgs = new Image();
            imgs.addEventListener("load", loadHandler);
            imgs.src = "./images/" + num + ".jpeg";
        } 
    </script>

（3）利用面向对象思想中的独立性

<script>
        var arr = [];
        var num = 0;
        for (var i = 0; i < 17; i++) {
            arr.push("./images/" + i + ".jpeg");
        }
        getImage(arr, callBackFun);

        function getImage(arr, callback) {
            var img = new Image();
            img.arr = arr;
            img.callback = callback;
            img.imgList = [];
            img.num = 0;
            img.addEventListener("load", loadHandler);
            img.src = arr[img.num];
        }

        function loadHandler() {
            this.imgList.push(this.cloneNode(false));
            this.num++;
            if (this.num > this.arr.length - 1) {
                callBackFun(this.imgList);
                this.removeEventListener("load", loadHandler);
                return;
            }
            this.src = this.arr[this.num];

        }

        function callBackFun(arr) {
            for (var i = 0; i < arr.length; i++) {
                console.log(arr[i].src);
            }
        }
    </script>