《 vue 》图片批量预加载

/*
*   单独创建个js 并引用自动加载 资源预加载  20200329
*/
(function(){
    let images = [
         require('../assets/img/again.png'),
         require('../assets/img/answerBg.png'),
         require('../assets/img/answerFloor.png'),
         require('../assets/img/cheer.png'),
         require('../assets/img/circular.png'),
         require('../assets/img/circular2.png'),
         require('../assets/img/crown_bg.png'),
    ];

    let image = [];
    let index = 0;

    for (const key in images) {
    	 // 计数器
         index += 1;
         // 创建image对象
         image[index] = new Image();
         // 把图片地址赋值
         if (images.hasOwnProperty(key)) {
             const img = images[key];
             image[index].src = img;
         }
    }
})()

说明1 ： 像下面这样写行不通，大家可以试试。 如果能找到具体原因欢迎反馈。

/*
*   单独创建个js 并引用自动加载 资源预加载  20200329
*/
(function(){
    let images = [
         '../assets/img/again.png',
         '../assets/img/answerBg.png',
         '../assets/img/answerFloor.png',
         '../assets/img/cheer.png',
         '../assets/img/circular.png',
         '../assets/img/circular2.png',
         '../assets/img/crown_bg.png',
    ];

    let image = [];
    let index = 0;

    for (const key in images) {
    	 // 计数器
         index += 1;
         // 创建image对象
         image[index] = new Image();
         // 把图片地址赋值
         if (images.hasOwnProperty(key)) {
             const img = require(images[key]);
             image[index].src = img;
         }
    }
})()

图片加载情况 可以通过控制台查看

大家也可以自己做 加载进度 ， 自己扩展吧。
借鉴了网络上的文章 我自己做了改变。。 感谢分享！

借鉴的文章地址 https://www.jianshu.com/p/1618cb183d28