在许多 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中文网其他相关文章！
