js图片预加载

 以vue项目为例，window.onload完毕后，开始预加载图片 

使用 require.context 批量引入图片
然后使用每一张图片：new Image().src = curr_image

export default {
  name: 'App',
  created() {
    window.onload = () => {
      const firstPriorityImgs = require.context('@/assets/images/preload/first', false, /\.(jpg|jpeg|png)$/)
      const secondPriorityImgs = require.context('@/assets/images/preload/second', false, /\.(jpg|jpeg|png)$/)
      const otherImgs = require.context('@/assets/images/preload', false, /\.(jpg|jpeg|png)$/)
      const avatars = require.context('@/assets/images/avatars', false, /\.(jpg|jpeg|png)$/)
      this.preloadImg(firstPriorityImgs)
      this.preloadImg(secondPriorityImgs)
      this.preloadImg(avatars)
      this.preloadImg(otherImgs)
    }
  },
  methods: {
    preloadImg (preloadImgs) {
      preloadImgs?.keys()?.forEach(img => {
        new Image().src = preloadImgs(img)
      })
    }
  }
}

首屏包含的图片无需预加载，window.onload意味着文档及图片加载完毕，也就是说，首屏加载完毕时才会去执行上述的图片预加载代码

具体效果，可以使用浏览器调试工具查看

注意 ：将大量的图片都预加载，可能会阻塞后续的任务！

 

三、总结
适当的预加载图片可以提升用户体验，但它不会提高网站的性能

除了第一部分外，可以通过其它方式提高网站性能

懒加载
HTMLImageElement.loading : 图片可以通过设置 loading 属性值为 lazy 的方式，实现图片的懒加载（图片仅在马上要出现在可视视口中时开始加载）
<img src="@/assets/images/tech-3.png" loading="lazy"/>

原文链接：https://blog.csdn.net/ymzhaobth/article/details/124167260

参考网址：https://blog.csdn.net/ymzhaobth/article/details/124167260