在許多 Web 應用程式中，出於各種目的（例如佔位符、縮圖或視覺內容）顯示隨機圖像是很常見的。然而，為每個請求產生隨機圖像可能效率很低，特別是如果我們想多次重複使用同一個圖像。在本文中，我們將探討如何使用 JavaScript 高效產生隨機圖像並實現快取機制以避免冗餘 API 呼叫。
getRandomImage 函數是一個實用函數，它根據提供的寬度、高度和隨機 ID 產生隨機圖像 URL。讓我們仔細看看這個函數是如何運作的：
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;
};
讓我們一步一步分解程式碼：
我們建立一個名為 imageCache 的空對象，作為儲存生成的映像 URL 的快取。
getRandomImage 函數採用三個參數：寬度、高度和 randomId。這些參數使我們能夠控制隨機圖像的尺寸和唯一性。
在函數內部，我們透過連接寬度、高度和 randomId 值來產生唯一的快取鍵。該密鑰將用於儲存和從快取中檢索圖像 URL。
我們檢查快取中是否已存在與快取鍵對應的圖片 URL。如果是這樣，我們只需返回快取的圖像 URL，而不是產生新的圖像 URL。
如果在快取中找不到圖片 URL，我們將繼續使用 picsum.photos API 產生新 URL。此API根據指定的寬度、高度和隨機ID提供各種尺寸的隨機圖片。
新產生的圖像 URL 將使用快取鍵儲存在快取中以供將來使用。
最後，我們回傳產生的圖片 URL。
在 getRandomImage 函數中實作快取機制有幾個優點：
效率：透過快取圖片 URL，我們避免對相同的寬度、高度和隨機 ID 組合進行冗餘 API 呼叫。這提高了應用程式的整體效能並減少了不必要的網路請求。
重複使用：快取機制允許我們多次重複使用同一張隨機圖像，而不必每次都重新產生新的圖像 URL。當在應用程式的不同部分或元件中顯示相同的映像時，這特別有用，可以提高一致性並減少不必要的開銷。
一致性：當再次遇到相同的寬度、高度和隨機ID 組合時，該函數會從快取中檢索圖像URL，確保整個應用程式中顯示圖像的一致性。
在本文中，我們探索如何使用 getRandomImage 函數在 JavaScript 中高效地產生隨機圖像。透過實現快取機制，我們可以避免冗餘的 API 呼叫並提高 Web 應用程式的效能。快取機制具有提高效率、影像重複使用和一致性等優點。請隨意調整 getRandomImage 函數並將其合併到您的專案中，以增強隨機影像的生成。
完整程式碼：
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;
};
請記住調整函數和快取機制以滿足您的特定要求，並根據需要調整快取策略。
以上是JavaScript 中的隨機圖像生成和緩存的詳細內容。更多資訊請關注PHP中文網其他相關文章！
