18910140161

Web端一次性加载大量小图

顺晟科技

2021-07-09 11:25:02

317

场景是周年庆要做一个抽奖活动,大概有800张用户头像(每张50KB以内),头像SRC接口会一次性给出,通过PC浏览器渲染。

我现在想到的方案是,将所有图片插入DOM,按照每50条分隔替换SRC,再去用Jquery遍历图片加载显示。

各位觉得怎么样?

图片缓存到内存里。。这方案在我听起来有点恐怖。

浏览器不卡我知道,但你服务器带宽吃不吃得消是真的,上CDN吧,缓存啥的都有。带宽也不占用业务服务器。

用户头像50k,好像有点太大了。确定大小压缩什么的已经到至极了嘛?

然后就是没有必要真的全加载800个吧,做个缓冲区,多加载100个。流量这么贵,心疼啊。

有一定的可行性,数据总量差不多40M,预加载后还是可以的。

其实还有一种取巧的方法,就是轮转的时候用通用图像代替(反正也看不清),然后抽奖过程中也基本上缓存完了,再显示真正的照片。

向前看当然就是http2,多路复用可以无需优化迅速加载一堆同源图片

要兼容性就是雪碧图,先把若干图片合并下.或者弄个接口,按用户id合并图片

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航