前言：

        本人纯小白一个，有很多地方理解的没有各位大牛那么透彻，如有错误，请各位大牛指出斧正！小弟感激不尽。

        本篇文章为您分析一下原生JS实现图片预加载效果

页面需求

 1. 在用户刚刚进入页面时，可能由于网络的差异，先加载一张默认的图片。等把页面的图片都下载好之后再添加到默认图片区域内。

HTML结构

<div class="preload"></div>

CSS样式

    img {
        width: 300px;
        height: 250px;
    }

JS行为

JS大致思路

 1. 根据用户传入的配置信息设置
    
     (1).图片数组
     (2).是否加载完再渲染
     (3).回调函数
     (4).渲染的元素

 2. 配置默认值

 3. 判断是否是下载完立即渲染的情况

 4. 如果加载完以后需要执行的函数

 5. 如果不是下载完再执行的情况

 6. 下载完图片以后调用回调函数

/**
 * 多图片的预加载
 * @param {Object} option 包含图片路径数组、渲染的dom元素、是否图片下载完再渲染、完成之后的回调函数、
 */
function preload(option) {
    // 第一步: 配置默认值
    if (option.immediate === undefined) {
        option.immediate = true;
    }
    // 第二步: 判断传入的数组
    option.arr = (typeof option.arr !== "object") ? [option.arr] : option.arr;
    // 第六步: 计数
    var count = 0;
    if (option.immediate) {                            // 第三步: 如果是下载完立即渲染
        option.arr.forEach(function (ele) {            // 3.1 遍历图片数组
            var image = new Image();                   // 3.2 创建原始图片对象      
            option.dom.appendChild(image);             // 3.3 将对象插入节点
            image.setAttribute("src", "default.png");  // 3.4 设置默认图片
            var newImage = new Image();                // 3.5 创建一个临时的图片对象
            newImage.setAttribute("src", ele)          // 3.6 设置路径用于请求图片
            newImage.onload = function () {            // 第四步: 图片加载完成事件
                // 6.1 每次加载完一张图片count+1；
                count++;
                // 4.1 判断当前的图片对象是否还是默认图片
                if (image.getAttribute("src") === "default.png") {
                    // 4.2 将下载后的图片路径修改到原始图片对象
                    image.setAttribute("src", ele);
                }
                // 6.2 判断当前的次数是否等于了数组的长度（加载完图片之后运行的函数）
                if (count === option.arr.length) {
                    // 6.3 运行加载完之后的回调函数 ,传入参数
                    option.callback.call(this);
                }
            }
        })
    } else {  // 第五步: 如果不是下载完再渲染
        option.arr.forEach(function (ele) {                          // 5.1 遍历图片数组
            var image = new Image();                                 // 5.2 创建原始图片对象
            option.dom.appendChild(image);                           // 5.3 将对象插入节点
            image.style.background = "url('default.png') no-repeat"; // 5.4 设置默认图片
            image.onload = function () {
                // 6.4 每次加载完一张图片count+1；
                count++;
                // 6.5 判断当前的次数是否等于了数组的长度（加载完图片之后运行的函数）
                if (count === option.arr.length) {
                    // 6.3 运行加载完之后的回调函数 ,传入参数
                    option.callback.call(count);
                }
            }
            image.setAttribute("src", ele);                          // 5.5 设置图片路径
        })
    }
}

页面中这样调用

    <script>
        preload({
            arr: [
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586510744058&di=18916d26c8c4369ea4a9de07063f0eed&imgtype=0&src=http%3A%2F%2Fpicture.ik123.com%2Fuploads%2Fallimg%2F141031%2F17-141031160326.jpg",
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586510744057&di=843bc280268272570eaf3b46f7363d93&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F331%2Fw870h1061%2F20180915%2FK-2y-hikxxna1448280.jpg",
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586510744055&di=45f52a9f22678a48915282c161a8c312&imgtype=0&src=http%3A%2F%2Fwww.goumin.com%2Fattachments%2Fphoto%2F0%2F0%2F15%2F4086%2F1046035.jpg",
            ],
            dom: document.querySelector(".preload"),
            immediate: true,
            callback: function () {
                console.log("完成了");
                console.log(this);
            }
            
        });
    </script>

结语

• 本片文章如有错误或者不好的，请给位大牛指点指点给小生。

• 创作不易，请告知....