js 清图片缓存

在JavaScript中清除图片缓存可以通过给图片的URL添加一个唯一的标识符（例如时间戳或随机数）来实现。

一、基础概念

1. 浏览器缓存机制
   • 浏览器为了提高性能，会对已经加载过的资源（如图片）进行缓存。当再次请求相同的URL时，浏览器会直接从本地缓存中读取资源，而不是重新向服务器发送请求。

• 缓存标识
  • 浏览器通过资源的URL来识别是否是同一个资源。如果URL发生变化，即使内容相同，浏览器也会将其视为新的资源并重新加载。

二、相关代码示例

1. 使用时间戳添加缓存标识
2. 使用时间戳添加缓存标识
   • 这里的loadImage函数接受一个图片的URL，在构建img元素的src属性时，在原URL后面添加了一个查询参数t，其值为当前的时间戳。由于每次调用这个函数时时间戳都会不同，所以浏览器会认为这是一个新的URL，从而重新加载图片而不是使用缓存。

• 使用随机数添加缓存标识
• 使用随机数添加缓存标识
  • 这里使用Math.random()生成一个随机数，并将其作为查询参数添加到图片URL后面。同样，由于随机数每次都不同，浏览器会重新请求图片。

三、应用场景

1. 图片更新频繁的页面
   • 例如新闻网站的新闻图片可能会频繁更新，在这种情况下，如果不希望用户看到旧的缓存图片，就可以使用这种方式来确保加载最新的图片。

• 动态生成的图片内容
  • 如果图片是根据用户的操作动态生成的（如用户上传照片后进行在线编辑，编辑后的图片需要及时显示），使用这种方法可以避免缓存带来的显示旧图片的问题。