vue预加载图片

        应用场景是项目中有一些访问频率较高的页面，且不希望压缩图片保证显示效果，例如一些宣传类的视觉。这时候我们选择牺牲一些首屏的加载时间，保证后续的访问速度。

imgPreloader.js

const imgPreloader = url => {
  return new Promise((resolve, reject) => {
    let image = new Image();
    image.onload = () => {
      console.log('加载完成' + image.src)
      resolve();
    }
    image.onerror = () => {
      reject();
    }
    image.src = url;
  })
}
export const imgsPreloader = () => {
  let promiseArr = [];
  // 获取preloadeimgs下的所有文件,这里我的preloadeimgs存储所有的需要预加载的图片
  const files = require.context("@/assets/preloadeimgs", false, /./)
  files.keys().forEach((file) => {
    console.log(file)
    promiseArr.push(imgPreloader(require('@/assets/preloadeimgs/' + file.split('/')[1])));
  });
  return Promise.all(promiseArr);
};

main.js

import { imgsPreloader } from './imgPreloader.js';
imgsPreloader().then(() => {
  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app')
})

index.html

<div id="app">
  <!-- 这里你可以写一个好看的loading，vue挂载以后会替换dom -->
  <p>加载中...</p>
</div>