弹窗大背景优化方案 png大图片预加载处理方法

因为一直做游戏风格的需求,而日常维护的游戏也比较朴素,都是用纯css处理的渐变底色即可满足弹窗背景的配置,最近处理了一个比较花哨的需求,弹窗设计方面比较下功夫,弹窗的背景图片只能导出png素材,无法使用纯css来实现,哪怕经过tinypng优化之后还有50多kb之巨。

定位问题

50kb的图片说实话也不算特别大,如果作为常规的img加载其实没什么问题,但作为背景图来加载,问题就会被放大 —— 用户访问页面后,第一次打开弹窗的体验非常差,会先显示弹窗内容,再慢慢加载弹窗背景(隐藏层的背景图需要经过交互后变为可见才会加载)。

解决方案

在页面加载完毕后,执行一次背景图素材的预加载,最终解决效果完美。

以下为实现时的demo代码片段

只要不创建dom,对页面的外观是没有影响的,图片只要请求成功了,后续再调用这个图片地址就无需重新请求了,本地已有缓存可快速显示。

Leave a Reply

Your email address will not be published. Required fields are marked *