vue预加载图片

最新推荐文章于 2024-12-29 16:50:28 发布

杨哥杨哥万万岁

最新推荐文章于 2024-12-29 16:50:28 发布

阅读量667

点赞数 2

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/wozhenhaokan/article/details/138147432

版权

在项目中，为了提高高访问频率页面的加载速度，尤其是对于需要高质量显示效果的宣传页面，可以采用Vue.js实现图片预加载策略。这样虽然会增加首屏加载时间，但能确保后续访问的快速展示。

摘要由CSDN通过智能技术生成

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

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>