js 函数的多图片预加载(preload) 带插件版完整解析

前言：

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

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

本篇文章写的不是特别完整，代码冗余量较高，写这篇博客
一是为了随笔记录一下笔者对这块知识点的理解
二是为了让一些初学者能大致了解图片的预加载原理
后续会陆续在此基础上跟新迭代现有的代码。
笔者希望读者能提供一些更加优化的代码,当然，最好是ECMAScript 2015以前的，感激不尽

页面需求

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

HTML结构

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

CSS样式

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

JS行为

JS大致思路

 1. 根据用户传入的配置信息设置

     (1).图片数组
     (2).是否加载完再渲染
     (3).回调函数
     (4).渲染的元素

 2. 配置默认值

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

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

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

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

if (!window.myPlugin) {
    window.myPlugin = {};
}
/**
 * 多图片的预加载
 * @param {Object} option 包含默认图片的路径、真实图片路径数组、渲染的dom元素、是否图片下载完再渲染、完成之后的回调函数、
 */
window.myPlugin.preload = function (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", option.defaultImg);  // 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") === option.defaultImg) {
                    // 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(${option.defaultImg}) 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 设置图片路径
        })
    }
}

结语

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

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