如何使用require.context实现优雅的预加载

目录

• 前言
• 丑陋的预加载
• 单张预加载
• 多张预加载
• 优雅的预加载
• require.context

前言

在前端开发中，对页面花里胡哨度[注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，看起来没有任何问题，实际上也没有任何问题。

但是在使用过程中，我们会发现，图片的格式不一定是统一的（当然你可以将他们转换成统一的），而且这种方式看起来太丑了，一点也不够优雅。

那么有没有一种方式，优雅的预加载呢？有。

优雅的预加载

要实现优雅的预加载，我们要优哪些方面？

• 第一，我们无需知道加载的图片有多少；
• 第二，我们无需知道加载的图片叫什么；
• 第三，我们无需知道图片的格式是什么。

他