如何使用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，看起来没有任何问题，实际上也没有任何问题。
但是在使用过程中，我们会发现，图片的格式不一定是统一的（当然你可以将他们转换成统一的），而且这种方式看起来太丑了，一点也不够优雅。
那么有没有一种方式，优雅的预加载呢？有。
优雅的预加载
要实现优雅的预加载，我们要优哪些方面？
- 第一，我们无需知道加载的图片有多少；
- 第二，我们无需知道加载的图片叫什么；
- 第三，我们无需知道图片的格式是什么。
他🐎的，这听起来就优雅，相当于什么都不用干，就把预加载做出来了！
但是，众所周知，浏览器环境没有直接操作文件系统的能力，我们无法像node一样，直接使用fs，怎么才能做到如上所说的呢？从第一步来看，我们至少要遍历一个父级文件夹吧？
本期的主角登场
require.context
它是一个webpack的api，可以通过这个方法获取一个特定的上下文，用来实现文件的批量自动化导入，如果你使用vite，那么可以使用 import.meta.globEager()，本文只用require.context举例。
好像这个api已经存在了好久了，但是我是最近才知道的😅，在这里分享给还没用过的同学。
使用语法如下：
let requireModule = require.context(
"../../../public/static/img", // 需要遍历的路径
false, // 是否递归，设置为true会递归到最后一级文件夹
/\.png|\.webp|\.jpg|\.jpeg|\.bmp|\.gif$/ //匹配的正则表达式
);上述代码匹配了常用的图片格式。
如果我们循环它的key()，会得到类似./xxx.png的项，所以，只要去掉./就得到了文件夹下所有的图片。
所以，我们可以做一个数组来储存所有的图片路径：
let imagesPathArr = [];
for (var i = 0; i < requireModule.keys().length; i++) {
imagesPathArr.push("/static/img/" + requireModule.keys()[i].substr(2, requireModule.keys()[i].length));
}这样，imagesPathArr就拥有了我们指定文件夹下所有的图片路径了，我们根本无需关心图片有多少、叫什么、什么格式。
下面直接对imagesPathArr进行循环（跟上面一样），导入所有图片：
let count = 0
for (let item of imagesPathArr) {
let img = new Image()
img.src = item
img.onload = () => {
count++
if (count === imagesPathArr.length) {
// 加载完成
}
}
}最后，我们把所有的逻辑封装成一个函数，并给他套上promise
async loadImgs() {
await new Promise((resolve, reject) => {
this.$store.dispatch('loadingStart', {
text: "正在加载资源"
})
let requireModule = require.context(
"../../../public/static/img",
false,
/\.png|\.webp|\.jpg|\.jpeg|\.bmp|\.gif$/
);
let imagesPathArr = [];
for (var i = 0; i < requireModule.keys().length; i++) {
imagesPathArr.push("/static/img/" + requireModule.keys()[i].substr(2, requireModule.keys()[i].length));
}
let count = 0
for (let item of imagesPathArr) {
let img = new Image()
img.src = item
img.onload = () => {
count++
if (count === imagesPathArr.length) {
this.$store.dispatch('loadingDone')
resolve()
}
}
}
})
},我们只需在合适的时机，调用该函数，即可全自动的预加载图片了，而且日后往文件夹内新增或者删除图片，都不用管这一段逻辑，它依然可以稳健运行！如果你有加载音频的需求，也是同理，在正则部分加一个.mp3什么的，使用audio.onload即可！
到此这篇关于使用require.context实现优雅的预加载 的文章就介绍到这了,更多相关require.context预加载 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇layui 解决form表单点击无反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
下面小编就为大家分享一篇JS获取url参数,JS发送json格式的POST请求方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
本文通过几个简单的示例向大家展示了javascript封装cookie的注意事项及操作方法，非常的简单实用，最后附上一则具体实例，有需要的小火把可以参考下。2015-08-08
在 JavaScript 中,我们可以通过一些技巧来判断页面是否滚动到底部,本文将介绍一些常用的方法,帮助你在项目中实现这一功能,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-11-11
本文主要介绍了进制转换函数，用于压缩数字，比如Date.now()这样的长数字，用62进制表示，就更短，大家参考使用吧2014-01-01
今天小编就为大家分享一篇使用layer弹窗提交表单时判断表单是否输入为空的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了JavaScript中this的用法,结合实例形式分析了this的功能、常见用法与相关注意事项,需要的朋友可以参考下2016-12-12
这篇文章主要为大家详细介绍了js实现简单秒表走动的时钟特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-08-08
这篇文章主要为大家介绍了MySQL SUM Function函数使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
这篇文章主要介绍了javascript实现行拖动的方法,涉及javascript鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下2015-05-05
最新评论