聊聊图片预加载

关于图片的加载，不同的需求有不同的实现，比如图片过多时候的懒加载，为了保证效果的预加载。

如何进行图片的预加载

前端实现图片的预加载，其实是利用了浏览器的缓存，我们通过 a 标签来提前加载图片，如下：

  const img = new Image()    img.src = '链接'    img.onload = function(){        console.log('加载完成')   }

预加载的策略

在实际的业务中，需求不同，加载的策略不尽相同。

场景一：贪婪加载

刚进入页面有 loading，需要将后面的图片全部加载完成。如进入 h5 游戏的时候，需要把后面用到的人物背景图片都加载出来。

这个时候我们不考虑带宽的问题，一次性加载所有的图片。

将每次加载图片封装成一次 promise：

new Promise((reslove,reject)=>{      const img = new Image()      img.src = '链接'      img.onload = onerror = resolve   })

再使用 promise.all 进行全加载

Promise.all([...])

场景二：部分加载

正常展示当前页面，但是下个页面的图片可以先偷偷加载进来，同时不要影响当前页面正常图片的加载。

这时候我们需要考虑带宽，不能一次性使用加载图片拉满，这样会导致页面加载的图片加载不出来。可以使用批量加载，比如每次加载 5 张，加载完 5 张之后再加载下 5 张。这样如果当前页面如果有图片也可以正常展示加载。

具体实现类似分页一样，获取要加载图片里面的 5 张，进行加载，直到加载结束。

// 总任务  function loadImages(list){      const pageSize = 5      const pageNum = 0      return new Promise((reslove,reject)=>{          function run(){              Promise.all(genetateTasks(list,pageSize,paegNum)).then(()=>{                  pageNum++                  const hasLength = pageSize * pageNum                  if(totalNum > hasLength){                      run()                  }else {                      reslove(true)                  } })             }             run()   }) }

子任务处理：

// 子任务  function genetateTasks(list,pageSize,pageNum){     const promiseArr = []      const start = pageNum * pageSize      const end = (pageNum + 1) * pageSize - 1      for(let i = start;i<end;i++){          const p = new Promise((reslove,reject)=>{              const img = new Image()              img.src = list[i]              img.onload = img.onerror = reslove           })           promiseArr.push(p)      }      return promiseArr  }