JavaScript 中的隨機圖像生成和緩存

在許多 Web 應(yīng)用程式中，出於各種目的（例如佔位符、縮圖或視覺內(nèi)容）顯示隨機圖像是很常見的。然而，為每個請求產(chǎn)生隨機圖像可能效率很低，特別是如果我們想多次重複使用同一個圖像。在本文中，我們將探討如何使用 JavaScript 高效產(chǎn)生隨機圖像並實現(xiàn)快取機制以避免冗餘 API 呼叫。

getRandomImage 函數(shù)

getRandomImage 函數(shù)是一個實用函數(shù)，它根據(jù)提供的寬度、高度和隨機 ID 產(chǎn)生隨機圖像 URL。讓我們仔細(xì)看看這個函數(shù)是如何運作的：

const imageCache = {};

const getRandomImage = (width, height, randomId) => {
  const cacheKey = `${width}_${height}_${randomId}`;

  if (imageCache[cacheKey]) {
    return imageCache[cacheKey];
  }

  const imageUrl = `https://picsum.photos/${width}/${height}?random=${randomId}`;
  imageCache[cacheKey] = imageUrl;

  return imageUrl;
};

讓我們一步一步分解程式碼：

1. 我們建立一個名為 imageCache 的空對象，作為儲存生成的映像 URL 的快取。

2. getRandomImage 函數(shù)採用三個參數(shù)：寬度、高度和 randomId。這些參數(shù)使我們能夠控制隨機圖像的尺寸和唯一性。

3. 在函數(shù)內(nèi)部，我們透過連接寬度、高度和 randomId 值來產(chǎn)生唯一的快取鍵。該密鑰將用於儲存和從快取中檢索圖像 URL。

4. 我們檢查快取中是否已存在與快取鍵對應(yīng)的圖片 URL。如果是這樣，我們只需返回快取的圖像 URL，而不是產(chǎn)生新的圖像 URL。

5. 如果在快取中找不到圖片 URL，我們將繼續(xù)使用 picsum.photos API 產(chǎn)生新 URL。此API根據(jù)指定的寬度、高度和隨機ID提供各種尺寸的隨機圖片。

6. 新產(chǎn)生的圖像 URL 將使用快取鍵儲存在快取中以供將來使用。

7. 最後，我們回傳產(chǎn)生的圖片 URL。

快取的好處

在 getRandomImage 函數(shù)中實作快取機制有幾個優(yōu)點：

• 效率：透過快取圖片 URL，我們避免對相同的寬度、高度和隨機 ID 組合進(jìn)行冗餘 API 呼叫。這提高了應(yīng)用程式的整體效能並減少了不必要的網(wǎng)路請求。

• 重複使用：快取機制允許我們多次重複使用同一張隨機圖像，而不必每次都重新產(chǎn)生新的圖像 URL。當(dāng)在應(yīng)用程式的不同部分或元件中顯示相同的映像時，這特別有用，可以提高一致性並減少不必要的開銷。

• 一致性：當(dāng)再次遇到相同的寬度、高度和隨機ID 組合時，該函數(shù)會從快取中檢索圖像URL，確保整個應(yīng)用程式中顯示圖像的一致性。

結(jié)論

在本文中，我們探索如何使用 getRandomImage 函數(shù)在 JavaScript 中高效地產(chǎn)生隨機圖像。透過實現(xiàn)快取機制，我們可以避免冗餘的 API 呼叫並提高 Web 應(yīng)用程式的效能?？烊C制具有提高效率、影像重複使用和一致性等優(yōu)點。請隨意調(diào)整 getRandomImage 函數(shù)並將其合併到您的專案中，以增強隨機影像的生成。

完整程式碼：

const imageCache = {};

const getRandomImage = (width, height, randomId) => {
  const cacheKey = `${width}_${height}_${randomId}`;

  if (imageCache[cacheKey]) {
    return imageCache[cacheKey];
  }

  const imageUrl = `https://picsum.photos/${width}/${height}?random=${randomId}`;
  imageCache[cacheKey] = imageUrl;

  return imageUrl;
};

請記住調(diào)整函數(shù)和快取機制以滿足您的特定要求，並根據(jù)需要調(diào)整快取策略。

訂閱我的時事通訊，您將獲得提示、技巧和挑戰(zhàn)，以保持您的技能敏銳。訂閱電子報

以上是JavaScript 中的隨機圖像生成和緩存的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！