目录
前言
在前端开发中,对页面花里胡哨度[注1]
要求越高的页面,用到的图片、音频什么的就越多,比如什么结婚请柬、展会请柬、发布会宣传页、数据大屏。虽然现在浏览器不允许网页在没有用户交互的情况下播放音频,但是,我们依旧要在页面展现的同时,准备好所有的静态资源。
注1:花里胡哨度(garish degree),又名难做指数,江湖人称领导开心点
丑陋的预加载
预加载即提前加载,浏览器在请求一张图片时,会缓存到本地,在下次请求同样的地址时,会直接在本地缓存读取(304),在本地读取的时间基本可以忽略不计。如果我们能够在图片未加载完成时给用户一个加载进度,提示用户:“急什么,马上完事!”,则能够有效的提升用户体验。
单张预加载
相信同学都了解图片的预加载:
let img = new Image() img.src = "@/../../xx.png" img.onload = () => { //... }
这是为大家所熟知的预加载方式,但是这种方法只适用于单张图片的预加载。
那多张怎么做呢?
多张预加载
很简单,我们给图片们定义一个数组就好了
let imagesPathArr = ["@/../../xx.png","@/../../yy.png","..."];
然后我们再用循环去加载这些图片
let count = 0 for (let item of imagesPathArr) { let img = new Image() img.src = item img.onload = () => { count++ if (count === imagesPathArr.length) { // ... 加载完成 } } }
我们甚至可以通过count/imagesPathArr.length
算出加载的百分比 。
没错,但是这种方法加载十张图片还可以,那加载一百张呢?
同学说:“我可以把图片从0-99命名,加载时只需要循环一百次就可以了!”
可以,那么假如我们用python写了一个重命名脚本,把这一百张图片从0-99命名完成。
那么我们的代码就长这样:
for(let i = 0;i<=99;i++){ let img = new Image() img.src = `@/../../${i}.png` img.onload = () => { count++ if (count === imagesPathArr.length) { // ... 加载完成 } } }
ok,看起来没有任何问题,实际上也没有任何问题。
但是在使用过程中,我们会发现,图片的格式不一定是统一的(当然你可以将他们转换成统一的),而且这种方式看起来太丑了,一点也不够优雅。
那么有没有一种方式,优雅的预加载呢?有。
优雅的预加载
要实现优雅的预加载,我们要优哪些方面?
- 第一,我们无需知道加载的图片有多少;
- 第二,我们无需知道加载的图片叫什么;
- 第三,我们无需知道图片的格式是什么。
他