使用js实现图片预加载

接手了一个H5的项目，由于它里面存在大量的图片，为了提升客户体验，决定去学习一下使用js的预加载，下面展示我学的到的方法

    首先声明一个数组，数组每一位是该图片的路径  
    var imgSrcArr = [
        'images/load/1.jpg',
        'images/load/2.jpg',
        'images/load/3.jpg',
        'images/load/4.jpg',
        'images/load/5.jpg',
        'images/load/6.jpg',
        'images/load/7.jpg',
        'images/load/8.jpg',
        'images/load/9.jpg',
        'images/load/10.jpg',
        'images/load/11.jpg',
        'images/load/12.jpg',
        'images/load/13.jpg',
        'images/load/14.jpg',
        'images/load/15.jpg',
        'images/load/16.jpg',
        'images/load/17.jpg',
        'images/load/18.jpg',
        'images/load/19.jpg',
        'images/load/20.jpg',
        'images/load/21.jpg',
        'images/load/22.jpg',
        'images/load/23.jpg',
        'images/load/24.jpg'
    ];
    
    var newImg = new Image();
    var imgNow = 0;             => 设置当前加载的图片为第0张
    
    function preloadImg() {
        newImg.src = imgSrcArr[imgNow]; => 把数组某一位赋给图片
        newImg.onerror = function () {  => 图片加载失败会如何
            console.log("加载失败")
        };
            
    
    
        newImg.onload = function () { => 当这个图片加载完成以后
            imgNow++;               => 照片当前量++
            if ( imgNow < imgSrcArr.length ) {  =>  如果还没有加载到最后一张
                preloadImg(imgSrcArr);          =>  递归调用自己
            } else {                            =>  已经加载到最后一张
                <!-- 此处写当全部加载完成之后发生的逻辑 -->
                return;
            }
            
            xxx.innerHTML = Math.round(imgNow / imgSrcArr.length * 100) + '%'; => 此处可以写loading页加载的进度
        };
        
    }
    
    preloadImg();
复制代码

主要思路就是，new一个image，当我们把一个src赋给它的时候，它会自己去加载这个图片资源。加载完成，就会存到浏览器的缓存中。循环调用自己，实现图片预加载。当客户进入页面之后，由于图片已经全部已经已经在缓存中，会直接去读取缓存，大大提升了加载速度，增加了用户体验！！ 首次写文章，请发表您的观点，让我进步，谢谢！！

转载于:https://juejin.im/post/5ba2dc30e51d450e664b3b64