vue图片预加载补充说明：上边提到的加载弹窗可以写在public/index.html中。。。。。。。。。。。。。。。。

创建两个文件名称分别为imgPreloader.js以及imgPreloaderList.js，前者用于导出图片加载的异步方法imgPreloader，后者用于存放图片列表然后在main.js里面，Vue对象创建之前，必须先把图片全部加载完才能创建Vue对象并且挂载到#app上

1.imgPreloaderList.js

export default [
  require('相对图片地址1'),
  require('相对图片地址2'),
  ...
];

2.imgPreloader.js

 const imgPreloader = url => {
   return new Promise((resolve, reject) => {
     let image = new Image();
     image.src = url;
     image.onload = () => {
       resolve();
     };
     image.onerror = () => {
       reject();
     };
   });
 };
 export const imgsPreloader = imgs => {
   let promiseArr = [];
   imgs.forEach(element => {
     promiseArr.push(imgPreloader(element));
   });
   return Promise.all(promiseArr);
 };

3.main.js

// 导入图片预加载方法以及图片列表
import { imgsPreloader } from './config/imgPreloader.js';
import imgPreloaderList from './config/imgPreloaderList.js';

(async () => {
  await imgsPreloader(imgPreloaderList);
  //关闭加载弹框
  document.querySelector('.loading').style.display = 'none';
  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app');
})();



	//如果需要拿到读取进度，可以采用下边的写法。
	import imgPreloaderList from './assets/lib/imgPreloaderList';
	(async () => {
    let imm = 0;
    const totalnum = imgPreloaderList.length;
    const imgPreloader = url=>{
        return new Promise((resolve, reject) => {
            let image = new Image();
            image.src = url;
            image.onload = () => {
              imm++;
              const a = imm/totalnum*100
              resolve(a);
            };
            image.onerror = () => {
              reject();
            };
        });
    };
    function imgsPreloader(imgs){
      let promiseArr = [];
      imgs.forEach(element => {
        imgPreloader(element).then(res=>{
          // console.log(res);
          document.querySelector('.txtdv').style.backgroundSize = res+'% 100%';
          if(res==100){
            console.log('加载完了');
            //关闭加载弹框
            document.querySelector('.fx_l').classList.add('animatedv');
            document.querySelector('.fx_r').classList.add('animatedv');
            document.querySelector('.fontdv').classList.add('animatehide');
            setTimeout(()=>{
              document.querySelector('.full_box').style.display = 'none';
            },2100)
            //渲染页面
            new Vue({
              router,
              store,
              render: h => h(App)
            }).$mount('#app')
          };
        })
      });
      // return Promise.all(promiseArr);
    };
    imgsPreloader(imgPreloaderList)
  })();