NuxtJS2图片加载优化，预缓存和调用

依然是上次那个项目，因为是一个客户端（但是又要求在线访问），所以图片加载首先就遇到了两个问题。一是图片质量大而且多，页面加载会卡顿，二是页面切换的时候，网络不好会加载半天的时间，我想了很久，最后决定要在进入在线网页首页的时候，搞一个加载条，加载完图片的时候，再打开网页。

那么，就会用到图片预加载，实现起来不难，具体代码如下：

1.创建一个标准的vue页面，在data部分加入要缓存的图片数组。

imageSources: [
  "/img/1.png",
  "/img/2.png",
  "/img/3.png",
  "/img/4.png",
  "/img/5.png",
  "/img/6.png",
  "/img/7.png"
]

2.在methods中创建缓存方法：

  preloadImages() {
    const that = this;
    const promises = []

    for (let i = 0; i < this.imageSources.length; i++) {
      const img = new Image()
      const promise = new Promise((resolve, reject) => {
        img.onload = resolve
        img.onerror = reject
      })

      img.src = this.imageSources[i]
      promises.push(promise)
    }

    Promise.all(promises)
      .then(() => {
        //图片缓存完成后，执行其它操作
        
      })
      .catch(error => {
        console.error(error)
      })
  },

3.在起始的页面上，调用缓存方法，这里可以提前搞一个进度条或者加载图啥的，让用户知道加载过程，加载完了关闭就好。

that.preloadImages();

4.上述操作完成后，图片将被缓存到内存中，直接引用这些路径调用即可，不需要额外的代码。实际效果非常好，只要完成了起始页加载，后面的图片都会直接显示，而不需要加载。