1、图片预加载器插件的参数

参数	参数表示的意义
data	图片地址
each	监听图片加载过程
success	所有图片加载完成

2、图片预加载器js代码部分

function preLoad(options) {
    //获取传入的资源图片路径数组
    var data = options.data;
    //定义变量来进行加载完成次数
    var count = 0;
    //定义变量来保存根据data生成的img对象
    var imgs = [];
    //遍历data生成img标签，并绑定事件
    data.forEach(function (src) {
        //创建img标签
        var img = new Image();
        //给标签赋值地址
        img.src = src;
        //创建好的图片放入imgs数组
        imgs.push(img);
        img.onload = function () {
            count++;
            //监听图片加载过程
            options.each(count,data.length);
        
            if (count == data.length) {
                //所有图片加载完成
                options.success(imgs);
        
            }
        }
    })
}

3、代码示例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片预加载器</title>
    <style>
        #wrap {
            width: 800px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            border: 1px solid red;
        }

        #wrap img{
            width: 200px;
            margin: 30px;
        }
        #mask {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            color: #fff;
            background-color: #888585;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            line-height: 100px;
            display: none;
        }
    </style>
</head>

<body>
    <div id="mask">0%</div>
    <div id="wrap"></div>
</body>
<script src="./Load.js"></script>

<script>


    // 这里传入自己的图片地址
    var data = [
        "https://scpic.chinaz.net/files/pic/pic9/202101/apic30145.jpg",
        "https://scpic.chinaz.net/files/pic/pic9/202101/apic30145.jpg",
        "https://scpic.chinaz.net/files/pic/pic9/202101/apic30145.jpg",
        "https://scpic.chinaz.net/files/pic/pic9/202101/apic30145.jpg",
        "https://scpic.chinaz.net/files/pic/pic9/202101/apic30145.jpg",
        "https://scpic.chinaz.net/files/pic/pic9/202101/apic30145.jpg",
        "https://scpic.chinaz.net/files/pic/pic9/202101/apic30145.jpg",
    ]

    //1、显示一下进度框
    mask.style.display = 'block';
    //2、调用函数进行图片的预加载
    preLoad({
        data : data,
        //是在图片加载过程中不断调用的，now表示当前加载完成图片数量
        each : function(now,total){
            //修改以下mask中的显示的数值 
            mask.innerHTML = Math.floor(now / total * 100) + "%";
        },
        success : function(imgs){
            //等加载完成之后
            //1、关掉mask
            mask.style.display = "none";
            //2、向wrap中添加所有的已经生成好的图片
            imgs.forEach(function(img){
                wrap.appendChild(img);
            })
        
        }
    })

</script>

</html>