前言

在前端開發(fā)中，對頁面花里胡哨度[注1]要求越高的頁面，用到的圖片、音頻什么的就越多，比如什么結(jié)婚請柬、展會請柬、發(fā)布會宣傳頁、數(shù)據(jù)大屏。雖然現(xiàn)在瀏覽器不允許網(wǎng)頁在沒有用戶交互的情況下播放音頻，但是，我們依舊要在頁面展現(xiàn)的同時(shí)，準(zhǔn)備好所有的靜態(tài)資源。

注1：花里胡哨度（garish degree），又名難做指數(shù)，江湖人稱領(lǐng)導(dǎo)開心點(diǎn)

丑陋的預(yù)加載

預(yù)加載即提前加載，瀏覽器在請求一張圖片時(shí)，會緩存到本地，在下次請求同樣的地址時(shí)，會直接在本地緩存讀?。?04），在本地讀取的時(shí)間基本可以忽略不計(jì)。如果我們能夠在圖片未加載完成時(shí)給用戶一個(gè)加載進(jìn)度，提示用戶：“急什么，馬上完事！”，則能夠有效的提升用戶體驗(yàn)。

單張預(yù)加載

相信同學(xué)都了解圖片的預(yù)加載：

let img = new Image()
img.src = "@/../../xx.png"
img.onload = () => {
	//...
}

這是為大家所熟知的預(yù)加載方式，但是這種方法只適用于單張圖片的預(yù)加載。

那多張?jiān)趺醋瞿兀?/p>

多張預(yù)加載

很簡單，我們給圖片們定義一個(gè)數(shù)組就好了

let imagesPathArr = ["@/../../xx.png","@/../../yy.png","..."];

然后我們再用循環(huán)去加載這些圖片

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算出加載的百分比 。

沒錯(cuò)，但是這種方法加載十張圖片還可以，那加載一百張呢？

同學(xué)說：“我可以把圖片從0-99命名，加載時(shí)只需要循環(huán)一百次就可以了！”

可以，那么假如我們用python寫了一個(gè)重命名腳本，把這一百張圖片從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，看起來沒有任何問題，實(shí)際上也沒有任何問題。

但是在使用過程中，我們會發(fā)現(xiàn)，圖片的格式不一定是統(tǒng)一的（當(dāng)然你可以將他們轉(zhuǎn)換成統(tǒng)一的），而且這種方式看起來太丑了，一點(diǎn)也不夠優(yōu)雅。

那么有沒有一種方式，優(yōu)雅的預(yù)加載呢？有。

優(yōu)雅的預(yù)加載

要實(shí)現(xiàn)優(yōu)雅的預(yù)加載，我們要優(yōu)哪些方面？

• 第一，我們無需知道加載的圖片有多少；
• 第二，我們無需知道加載的圖片叫什么；
• 第三，我們無需知道圖片的格式是什么。

他??的，這聽起來就優(yōu)雅，相當(dāng)于什么都不用干，就把預(yù)加載做出來了！

但是，眾所周知，瀏覽器環(huán)境沒有直接操作文件系統(tǒng)的能力，我們無法像node一樣，直接使用fs，怎么才能做到如上所說的呢？從第一步來看，我們至少要遍歷一個(gè)父級文件夾吧？

本期的主角登場

require.context

它是一個(gè)webpack的api，可以通過這個(gè)方法獲取一個(gè)特定的上下文，用來實(shí)現(xiàn)文件的批量自動化導(dǎo)入，如果你使用vite，那么可以使用 import.meta.globEager()，本文只用require.context舉例。

好像這個(gè)api已經(jīng)存在了好久了，但是我是最近才知道的??，在這里分享給還沒用過的同學(xué)。

使用語法如下：

        let requireModule = require.context(
          "../../../public/static/img", // 需要遍歷的路徑
          false, // 是否遞歸，設(shè)置為true會遞歸到最后一級文件夾
          /\.png|\.webp|\.jpg|\.jpeg|\.bmp|\.gif$/ //匹配的正則表達(dá)式
        );

上述代碼匹配了常用的圖片格式。

如果我們循環(huán)它的key()，會得到類似./xxx.png的項(xiàng)，所以，只要去掉./就得到了文件夾下所有的圖片。

所以，我們可以做一個(gè)數(shù)組來儲存所有的圖片路徑：

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就擁有了我們指定文件夾下所有的圖片路徑了，我們根本無需關(guān)心圖片有多少、叫什么、什么格式。

下面直接對imagesPathArr進(jìn)行循環(huán)（跟上面一樣），導(dǎo)入所有圖片：

        let count = 0
        for (let item of imagesPathArr) {
          let img = new Image()
          img.src = item
          img.onload = () => {
            count++
            if (count === imagesPathArr.length) {
                // 加載完成
            }
          }
        }

最后，我們把所有的邏輯封裝成一個(gè)函數(shù)，并給他套上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()
            }
          }
        }
      })
    },

我們只需在合適的時(shí)機(jī)，調(diào)用該函數(shù)，即可全自動的預(yù)加載圖片了，而且日后往文件夾內(nèi)新增或者刪除圖片，都不用管這一段邏輯，它依然可以穩(wěn)健運(yùn)行！如果你有加載音頻的需求，也是同理，在正則部分加一個(gè).mp3什么的，使用audio.onload即可！

到此這篇關(guān)于使用require.context實(shí)現(xiàn)優(yōu)雅的預(yù)加載 的文章就介紹到這了,更多相關(guān)require.context預(yù)加載 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論