正文

如何设置JavaScript让图片不缓存，避免重复加载图片？

/0 浏览量
0414

在网页开发中，有时我们希望图片在用户访问后不再被浏览器缓存，以便每次访问时都能加载最新的图片。以下是一些常用的方法来实现这一功能：

1. 使用查询字符串

最简单的方法是在图片的URL中添加一个查询字符串，每次访问时都改变这个查询字符串的值。这样，浏览器就会认为这是一个新的URL，从而重新加载图片。

<img src="image.jpg?version=1" alt="描述">

每次需要重新加载图片时，只需更改version的值即可。

2. 利用随机数或时间戳

在URL中加入一个随机数或时间戳，这样每次访问时URL都会不同。

<img src="image.jpg?randNum=123456" alt="描述">

或者

<img src="image.jpg?timestamp=1650796800" alt="描述">

3. 使用JavaScript动态生成图片URL

通过JavaScript动态生成图片的URL，可以确保每次生成的URL都是唯一的。

function loadImage() {
  var img = new Image();
  var timestamp = new Date().getTime();
  img.src = "image.jpg?timestamp=" + timestamp;
  document.body.appendChild(img);
}

loadImage();

4. 使用HTML5的fetch API

使用fetch API可以从服务器请求最新的图片资源。

function loadImage() {
  fetch("image.jpg")
    .then(response => response.blob())
    .then(blob => {
      var objectURL = URL.createObjectURL(blob);
      var img = new Image();
      img.src = objectURL;
      document.body.appendChild(img);
    });
}

loadImage();

总结

以上方法都可以实现让图片不缓存的效果。在实际应用中，可以根据具体需求选择合适的方法。需要注意的是，如果图片频繁更新，可能会对服务器造成较大压力，因此在设计时需要权衡利弊。

-- 展开阅读全文 --