使用 Javascript 强制刷新图像

因为现代浏览器和服务器旨在尽可能地优化数据使用，并使使用缓存来确保您不必多次加载相同的图像。从长远来看，缓存可能是有益的，但它确实使重新加载图像等操作变得更加困难，因为您不能简单地替换图像或重置其源。鉴于您尝试加载的图像的 URL 在修改前后保持完全相同，浏览器将假定它是完全相同的图像，而不是从服务器再次请求它，它将从缓存，它不会刷新。

通过欺骗浏览器缓存来强制重新加载图像

浏览器缓存依赖于 URL 来确定内容是否相同以及是否使用存储的版本。这意味着如果我们更改 URL 中的某些内容，然后尝试重新加载图像，缓存将不再能够确定它是相同的资源，而是会再次从服务器获取它。

为了在不影响图像的情况下修改 URL，我们可以简单地使用一个可以附加到 URL 末尾的虚拟查询字符串，它只需要是唯一的。为此，我们可以只使用时间戳，以便无论何时调用它，URL 始终是唯一的。

要在 Javascript 中重新加载图像，我们可以简单地选择 元素并将其 src 属性修改为目标图像的 src 属性，以及伪造的查询字符串以确保它不使用缓存。

例如，假设您有一个需要重新加载的图像“test.jpg”。

HTML

<img id="testimg" src="test.png">

Javascript

// create a new timestamp     
var timestamp = new Date().getTime();     
     
var el = document.getElementById("testimg");     
     
el.src = "test.png?t=" + timestamp;     

此代码将时间戳附加到源 URL，并确保使用新修改的图像重新加载和刷新图像。您可以使用同一段代码根据需要多次刷新图像，因此将其放入函数中很有用。

function refreshImage(imgElement, imgURL){    
    // create a new timestamp 
    var timestamp = new Date().getTime();  
  
    var el = document.getElementById(imgElement);  
  
    var queryString = "?t=" + timestamp;    
   
    el.src = imgURL + queryString;    
}    

如果您发现本教程有用或有任何疑问，请随时在下面发表评论！