记录--聊聊图片预加载

陈娘娘

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

聊聊图片预加载

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

如何进行图片的预加载

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

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

复制代码

预加载的策略

在实际的业务中，需求不同，加载的策略不尽相同。
场景一：贪婪加载

刚进入页面有 loading，需要将后面的图片全部加载完成。如进入 h5 游戏的时候，需要把后面用到的人物背景图片都加载出来。
这个时候我们不考虑带宽的问题，一次性加载所有的图片。
将每次加载图片封装成一次 promise：

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

复制代码

再使用 promise.all 进行全加载

1. Promise.all([...])

复制代码

场景二：部分加载

正常展示当前页面，但是下个页面的图片可以先偷偷加载进来，同时不要影响当前页面正常图片的加载。
这时候我们需要考虑带宽，不能一次性使用加载图片拉满，这样会导致页面加载的图片加载不出来。可以使用批量加载，比如每次加载 5 张，加载完 5 张之后再加载下 5 张。这样如果当前页面如果有图片也可以正常展示加载。
具体实现类似分页一样，获取要加载图片里面的 5 张，进行加载，直到加载结束。

1. // 总任务
2. function loadImages(list){
3.     const pageSize = 5
4.     const pageNum = 0
5.     return new Promise((reslove,reject)=>{
6.         function run(){
7.             Promise.all(genetateTasks(list,pageSize,paegNum)).then(()=>{
8.                 pageNum++
9.                 const hasLength = pageSize * pageNum
10.                 if(totalNum > hasLength){
11.                     run()
12.                 }else {
13.                     reslove(true)
14.                 } })
15.            }
16.            run()
17. }) }

复制代码

子任务处理：

1. // 子任务
2. function genetateTasks(list,pageSize,pageNum){
3.     const promiseArr = []
4.     const start = pageNum * pageSize
5.     const end = (pageNum + 1) * pageSize - 1
6.     for(let i = start;i<end;i++){
7.         const p = new Promise((reslove,reject)=>{
8.             const img = new Image()
9.             img.src = list[i]
10.             img.onload = img.onerror = reslove
11.          })
12.          promiseArr.push(p)
13.     }
14.     return promiseArr
15. }

复制代码

注意点

• 在移动端，如果使用贪婪加载，可能会导致你的 loading 图片都没有加载出来（因为都去加载预加载的图片去了），需要将加载图片的逻辑放在 window.load 事件之后
  
• 在部分加载的时候，如果需要保证当前页面的效果，可以在当前页面图片加载之后再开始加载（可以使用 imagesloaded）
  

本文转载于:

https://juejin.cn/post/7312723056300015628

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

来源:https://www.cnblogs.com/smileZAZ/p/17926721.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！