[JS筆記]前端 JS 圖片預加載 3 行完成！最簡單的前端緩存方式

這篇前端圖片預加載方式，是我重複遇到相同問題，決定找出最簡單的解法。我發現函式中只需要 3 行就能解決這個問題！是我目前看到最簡單實用的前端圖片緩存方式！

前端 JS 圖片預加載程式碼範例

以下 JavaScript 程式碼範例，包含註解提供給大家，讓大家複製貼上後，替換圖片路徑成你的圖片路徑，即可直接看到效果！

函式內只需要 3 行，我也幫大家標好步驟囉：

// 需要給一個記憶體空間 imgPreloadArr 暫存
const imgPreloadArr = [];
// 前端緩存函式
function frontendPreload() {
  // 若有 4 張圖，用 for 迴圈遍歷
  for (let i = 0; i < 4; i++) { 
    // 步驟 1. 建立實體化圖片
    const img = new Image();
    // 步驟 2. 給予 src 屬性，這裡要替換成你的圖片路徑
    img.src = `{你的圖片路徑}`;
    // 步驟 3. 緩存放在記憶體
    imgPreloadArr.push(img);
  }
}
// 執行該函式
frontendPreload();

程式碼使用原理

這個方式的使用原理，是通過建立 Image 物件實體，並設定 src 屬性，將圖片路徑指派給該物件。

透過這樣的方式，可以觸發瀏覽器下載圖片的進程。再把這些圖片儲存在 imgPreloadArr 這個陣列中。

這樣就算你的圖片實在是大到需要時間載入，只要使用前端圖片緩存，就都可以在初始化的時候，或是你執行該緩存函式的時候，在前端提前載入，取用圖片時就不用再重新發出請求來載入囉！

避免要使用到圖片的時候還要讓使用者等半天，提前在背景先完成這件拖累使用者體驗的事情吧！

總結

以上就是我目前使用過最簡單好用的 JS 前端圖片預加載緩存方式！

---

延伸閱讀：

• [JS筆記]把數字加上千分位符號 1 行解決
• [JS筆記]直接觸發 addEventListener 的方法 dispatchEvent()
• [JS筆記]JavaScript 陣列移除重複的方法，使用 Set 達成效果

---