我正在访问我网站上的链接，该链接每次访问时都会提供新图像。
我遇到的问题是，如果我尝试在后台加载图像然后更新页面上的图像，则图像不会更改 - 尽管在重新加载页面时它会更新。
var newImage = new Image();
newImage.src = "http://localhost/image.jpg";
function updateImage()
{
if(newImage.complete) {
document.getElementById("theText").src = newImage.src;
newImage = new Image();
number++;
newImage.src = "http://localhost/image/id/image.jpg?time=" + new Date();
}
setTimeout(updateImage, 1000);
}
FireFox看到它们的标题：
HTTP/1.x 200 OK
Cache-Control: no-cache, must-revalidate
Pragma: no-cache
Transfer-Encoding: chunked
Content-Type: image/jpeg
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Server: Microsoft-HTTPAPI/1.0
Date: Thu, 02 Jul 2009 23:06:04 GMT
我需要在页面上强制刷新该图像。有什么想法吗？
答案 0 :(得分：311)
尝试在网址末尾添加缓存破解程序：
newImage.src = "http://localhost/image.jpg?" + new Date().getTime();
这将在您创建图像时自动附加当前时间戳，它将使浏览器再次查看图像，而不是检索缓存中的图像。
答案 1 :(得分：193)
我已经看到了如何做到这一点的答案有很多变化，所以我想我在这里总结一下（加上我自己发明的第四种方法）：
newImage.src = "image.jpg?t=" + new Date().getTime();
优点： 100％可靠，快速＆amp;易于理解和实施。
缺点：完全禁止缓存，这意味着只要图像不在视图之间进行更改，就会出现不必要的延迟和带宽使用。可能会为浏览器缓存（以及任何中间缓存）填充许多完全相同图像的副本！此外，还需要修改图片网址。
何时使用：在图片不断变化时使用，例如用于实时网络摄像头Feed。如果您使用此方法，请确保使用Cache-control: no-cache HTTP标头!!! 提供图像本身（通常可以使用.htaccess文件设置）。否则，您将逐步使用旧版本的图像填充缓存！
echo '<img src="image.jpg?m=' . filemtime('image.jpg') . '">';
（那是PHP服务器端代码，但重要的一点是，文件名后附有？m = [文件最后修改时间] 查询字符串。） / p>
优点： 100％可靠，快速＆amp;易于理解和实施，和完美地保留了缓存优势。
缺点：需要修改图片网址。此外，还需要为服务器做更多工作 - 它必须能够访问文件最后修改时间。此外，还需要服务器端信息，因此不适合纯粹的客户端解决方案来检查刷新的图像。
何时使用：当您想要缓存图像时，可能需要不时更新文件名本身，而不是在服务器端更新它们。当您可以轻松确保将正确的查询字符串添加到HTML中的每个图像实例时。
Cache-control: max-age=0, must-revalidate提供图像，并在URL中添加唯一的 memcache -busting片段标识符，例如：newImage.src = "image.jpg#" + new Date().getTime();
这里的想法是缓存控制标头将图像放入浏览器缓存中，但是立即将它们标记为陈旧，以便每次重新显示它们时，浏览器必须检查服务器以查看它们是否已经过时。改变了。这可确保浏览器的 HTTP缓存始终返回图像的最新副本。但是，浏览器通常会重新使用映像的内存副本（如果有的话），在这种情况下甚至不检查它们的HTTP缓存。为了防止这种情况，使用片段标识符：内存中映像src的比较包括片段标识符，但在查询HTTP缓存之前它被剥离。 （例如，image.jpg#A和image.jpg#B可能都会从浏览器的HTTP缓存中的image.jpg条目中显示，但image.jpg#B将永远不会显示在-memory从上次显示image.jpg#A时保留的图像数据。
优点：正确使用HTTP缓存机制，并使用缓存的图片（如果它们尚未更改）。适用于阻塞添加到静态图像URL的查询字符串的服务器（因为服务器永远不会看到片段标识符 - 它们仅适用于浏览器并且仅供自己使用）。
缺点：依赖于浏览器的某些可疑（或至少记录不足）的行为，关于其网址中带有片段标识符的图片（但是，我已经在FF27中成功测试了这一点） ，Chrome33和IE11）。仍然会为每个图像视图向服务器发送重新验证请求，如果图像很少变化和/或延迟是一个大问题，这可能是过度的（因为即使缓存的图像仍然很好，您也需要等待重新验证响应） 。需要修改图片网址。
何时使用：当图片可能经常更改，或需要客户端间歇性刷新而无需服务器端脚本参与，但您仍希望获得缓存优势时使用。例如，轮询每隔几分钟不定期更新图像的实时网络摄像头。或者，如果您的服务器不允许在静态图像URL上使用查询字符串，请使用而不是（1）或（2）。
<iframe>中，然后在iframe location.reload(true)上调用contentWindow。步骤如下：
将要刷新的图像加载到隐藏的iframe中。这只是一个设置步骤 - 如果需要，可以提前很长时间进行实际刷新。如果图像在此阶段无法加载，那就无所谓了！
完成后，在页面或任何DOM节点中的任何位置（甚至是存储在javascript变量中的页外副本）中删除该图像的所有副本。这是必要的，因为浏览器可能会以陈旧的内存中副本显示图像（IE11尤其如此）：在刷新HTTP缓存之前，需要确保清除所有内存中副本。如果其他javascript代码异步运行，您可能还需要阻止该代码在此期间创建待刷新图像的新副本。
致电iframe.contentWindow.location.reload(true)。 true强制缓存绕过，直接从服务器重新加载并覆盖现有的缓存副本。
完成重新加载后，恢复已消隐的图像。他们现在应该从服务器显示最新版本了！
对于同域图像，您可以直接将图像加载到iframe中。对于跨域图片，您必须从您的域加载包含<img>标记中的图片的HTML页面，否则您将获得＆＃34;访问权限否认＆＃34;尝试拨打iframe.contentWindow.reload(...)时出错。
优点：就像您希望 DOM拥有的image.reload（）函数一样！允许图像正常缓存（如果您需要，即使是将来的到期日期，从而避免频繁的重新验证）。允许您刷新特定图像，而无需仅使用客户端代码更改当前页面或任何其他页面上该图像的URL。
缺点：依赖于Javascript。并非100％保证在每个浏览器中都能正常工作（我已经在FF27，Chrome33和IE11中成功测试了这一点）。相对于其他方法而言非常复杂。
何时使用：当您拥有一组基本静态图像时，您希望缓存它们，但您仍需要偶尔更新它们并获得即时视觉反馈更新发生了。 （特别是在刷新整个浏览器页面时不会起作用，例如在基于AJAX构建的一些Web应用程序中）。当方法（1） - （3）不可行时，因为（无论出于何种原因），您无法更改可能显示您需要更新的图像的所有URL。 （请注意，使用这3种方法将刷新图像，但如果另一个页面然后尝试显示该图像而没有相应的查询字符串或片段标识符，则可能显示较旧的而不是版本。
下面给出了以一种神奇而健全的方式实现这一点的细节：
假设您的网站在网址路径/img/1x1blank.gif中包含空白的1x1像素.gif，并且还具有以下单行PHP脚本（仅在将强制刷新应用于交叉时需要） -domain 图像，并且可以在URL路径/echoimg.php上以任何服务器端脚本语言重写：
<img src="<?=htmlspecialchars(@$_GET['src'],ENT_COMPAT|ENT_HTML5,'UTF-8')?>">
然后，这是一个如何在Javascript中完成所有这些操作的实际实现。它看起来有点复杂，但是有很多注释，重要的功能只是forceImgReload（） - 前两个只是空白和非空白的图像，应该设计为能够有效地使用您自己的HTML，所以将它们编码为最适合您的;您的网站可能没有必要使用它们中的大部分复杂功能：
// This function should blank all images that have a matching src, by changing their src property to /img/1x1blank.gif.
// ##### You should code the actual contents of this function according to your page design, and what images there are on them!!! #####
// Optionally it may return an array (or other collection or data structure) of those images affected.
// This can be used by imgReloadRestore() to restore them later, if that's an efficient way of doing it (otherwise, you don't need to return anything).
// NOTE that the src argument here is just passed on from forceImgReload(), and MAY be a relative URI;
// However, be aware that if you're reading the src property of an <img> DOM object, you'll always get back a fully-qualified URI,
// even if the src attribute was a relative one in the original HTML. So watch out if trying to compare the two!
// NOTE that if your page design makes it more efficient to obtain (say) an image id or list of ids (of identical images) *first*, and only then get the image src,
// you can pass this id or list data to forceImgReload() along with (or instead of) a src argument: just add an extra or replacement parameter for this information to
// this function, to imgReloadRestore(), to forceImgReload(), and to the anonymous function returned by forceImgReload() (and make it overwrite the earlier parameter variable from forceImgReload() if truthy), as appropriate.
function imgReloadBlank(src)
{
// ##### Everything here is provisional on the way the pages are designed, and what images they contain; what follows is for example purposes only!
// ##### For really simple pages containing just a single image that's always the one being refreshed, this function could be as simple as just the one line:
// ##### document.getElementById("myImage").src = "/img/1x1blank.gif";
var blankList = [],
fullSrc = /* Fully qualified (absolute) src - i.e. prepend protocol, server/domain, and path if not present in src */,
imgs, img, i;
for each (/* window accessible from this one, i.e. this window, and child frames/iframes, the parent window, anything opened via window.open(), and anything recursively reachable from there */)
{
// get list of matching images:
imgs = theWindow.document.body.getElementsByTagName("img");
for (i = imgs.length; i--;) if ((img = imgs[i]).src===fullSrc) // could instead use body.querySelectorAll(), to check both tag name and src attribute, which would probably be more efficient, where supported
{
img.src = "/img/1x1blank.gif"; // blank them
blankList.push(img); // optionally, save list of blanked images to make restoring easy later on
}
}
for each (/* img DOM node held only by javascript, for example in any image-caching script */) if (img.src===fullSrc)
{
img.src = "/img/1x1blank.gif"; // do the same as for on-page images!
blankList.push(img);
}
// ##### If necessary, do something here that tells all accessible windows not to create any *new* images with src===fullSrc, until further notice,
// ##### (or perhaps to create them initially blank instead and add them to blankList).
// ##### For example, you might have (say) a global object window.top.blankedSrces as a propery of your topmost window, initially set = {}. Then you could do:
// #####
// ##### var bs = window.top.blankedSrces;
// ##### if (bs.hasOwnProperty(src)) bs[src]++; else bs[src] = 1;
// #####
// ##### And before creating a new image using javascript, you'd first ensure that (blankedSrces.hasOwnProperty(src)) was false...
// ##### Note that incrementing a counter here rather than just setting a flag allows for the possibility that multiple forced-reloads of the same image are underway at once, or are overlapping.
return blankList; // optional - only if using blankList for restoring back the blanked images! This just gets passed in to imgReloadRestore(), it isn't used otherwise.
}
// This function restores all blanked images, that were blanked out by imgReloadBlank(src) for the matching src argument.
// ##### You should code the actual contents of this function according to your page design, and what images there are on them, as well as how/if images are dimensioned, etc!!! #####
function imgReloadRestore(src,blankList,imgDim,loadError);
{
// ##### Everything here is provisional on the way the pages are designed, and what images they contain; what follows is for example purposes only!
// ##### For really simple pages containing just a single image that's always the one being refreshed, this function could be as simple as just the one line:
// ##### document.getElementById("myImage").src = src;
// ##### if in imgReloadBlank() you did something to tell all accessible windows not to create any *new* images with src===fullSrc until further notice, retract that setting now!
// ##### For example, if you used the global object window.top.blankedSrces as described there, then you could do:
// #####
// ##### var bs = window.top.blankedSrces;
// ##### if (bs.hasOwnProperty(src)&&--bs[src]) return; else delete bs[src]; // return here means don't restore until ALL forced reloads complete.
var i, img, width = imgDim&&imgDim[0], height = imgDim&&imgDim[1];
if (width) width += "px";
if (height) height += "px";
if (loadError) {/* If you want, do something about an image that couldn't load, e.g: src = "/img/brokenImg.jpg"; or alert("Couldn't refresh image from server!"); */}
// If you saved & returned blankList in imgReloadBlank(), you can just use this to restore:
for (i = blankList.length; i--;)
{
(img = blankList[i]).src = src;
if (width) img.style.width = width;
if (height) img.style.height = height;
}
}
// Force an image to be reloaded from the server, bypassing/refreshing the cache.
// due to limitations of the browser API, this actually requires TWO load attempts - an initial load into a hidden iframe, and then a call to iframe.contentWindow.location.reload(true);
// If image is from a different domain (i.e. cross-domain restrictions are in effect, you must set isCrossDomain = true, or the script will crash!
// imgDim is a 2-element array containing the image x and y dimensions, or it may be omitted or null; it can be used to set a new image size at the same time the image is updated, if applicable.
// if "twostage" is true, the first load will occur immediately, and the return value will be a function
// that takes a boolean parameter (true to proceed with the 2nd load (including the blank-and-reload procedure), false to cancel) and an optional updated imgDim.
// This allows you to do the first load early... for example during an upload (to the server) of the image you want to (then) refresh.
function forceImgReload(src, isCrossDomain, imgDim, twostage)
{
var blankList, step = 0, // step: 0 - started initial load, 1 - wait before proceeding (twostage mode only), 2 - started forced reload, 3 - cancelled
iframe = window.document.createElement("iframe"), // Hidden iframe, in which to perform the load+reload.
loadCallback = function(e) // Callback function, called after iframe load+reload completes (or fails).
{ // Will be called TWICE unless twostage-mode process is cancelled. (Once after load, once after reload).
if (!step) // initial load just completed. Note that it doesn't actually matter if this load succeeded or not!
{
if (twostage) step = 1; // wait for twostage-mode proceed or cancel; don't do anything else just yet
else { step = 2; blankList = imgReloadBlank(src); iframe.contentWindow.location.reload(true); } // initiate forced-reload
}
else if (step===2) // forced re-load is done
{
imgReloadRestore(src,blankList,imgDim,(e||window.event).type==="error"); // last parameter checks whether loadCallback was called from the "load" or the "error" event.
if (iframe.parentNode) iframe.parentNode.removeChild(iframe);
}
}
iframe.style.display = "none";
window.parent.document.body.appendChild(iframe); // NOTE: if this is done AFTER setting src, Firefox MAY fail to fire the load event!
iframe.addEventListener("load",loadCallback,false);
iframe.addEventListener("error",loadCallback,false);
iframe.src = (isCrossDomain ? "/echoimg.php?src="+encodeURIComponent(src) : src); // If src is cross-domain, script will crash unless we embed the image in a same-domain html page (using server-side script)!!!
return (twostage
? function(proceed,dim)
{
if (!twostage) return;
twostage = false;
if (proceed)
{
imgDim = (dim||imgDim); // overwrite imgDim passed in to forceImgReload() - just in case you know the correct img dimensions now, but didn't when forceImgReload() was called.
if (step===1) { step = 2; blankList = imgReloadBlank(src); iframe.contentWindow.location.reload(true); }
}
else
{
step = 3;
if (iframe.contentWindow.stop) iframe.contentWindow.stop();
if (iframe.parentNode) iframe.parentNode.removeChild(iframe);
}
}
: null);
}
然后，要强制刷新与您的网页位于同一域的图片，您可以这样做：
forceImgReload("myimage.jpg");
要从其他位置刷新图像（跨域）：
forceImgReload("http://someother.server.com/someimage.jpg", true);
更高级的应用程序可能是在将新版本上载到服务器后重新加载映像，在上载时同时准备重新加载过程的初始阶段，以最大限度地减少用户可见的重新加载延迟。如果您通过AJAX进行上传，并且服务器返回一个非常简单的JSON数组[success，width，height]，那么您的代码可能如下所示：
// fileForm is a reference to the form that has a the <input typ="file"> on it, for uploading.
// serverURL is the url at which the uploaded image will be accessible from, once uploaded.
// The response from uploadImageToServer.php is a JSON array [success, width, height]. (A boolean and two ints).
function uploadAndRefreshCache(fileForm, serverURL)
{
var xhr = new XMLHttpRequest(),
proceedWithImageRefresh = forceImgReload(serverURL, false, null, true);
xhr.addEventListener("load", function(){ var arr = JSON.parse(xhr.responseText); if (!(arr&&arr[0])) { proceedWithImageRefresh(false); doSomethingOnUploadFailure(...); } else { proceedWithImageRefresh(true,[arr[1],ar[2]]); doSomethingOnUploadSuccess(...); }});
xhr.addEventListener("error", function(){ proceedWithImageRefresh(false); doSomethingOnUploadError(...); });
xhr.addEventListener("abort", function(){ proceedWithImageRefresh(false); doSomethingOnUploadAborted(...); });
// add additional event listener(s) to track upload progress for graphical progress bar, etc...
xhr.open("post","uploadImageToServer.php");
xhr.send(new FormData(fileForm));
}
最后一点：尽管本主题是关于图像的，但它也可能适用于其他类型的文件或资源。例如，防止使用陈旧的脚本或css文件，或甚至刷新更新的PDF文档（仅在设置为在浏览器中打开时使用（4））。在这些情况下，方法（4）可能需要对上述javascript进行一些更改。
答案 2 :(得分：174)
作为......的替代方案。
newImage.src = "http://localhost/image.jpg?" + new Date().getTime();
......似乎......
newImage.src = "http://localhost/image.jpg#" + new Date().getTime();
Cache-Control标头，...就足以欺骗浏览器缓存而不会绕过任何上游缓存。虽然你可以使用......
Cache-Control: no-cache, must-revalidate
...您失去了If-Modified-Since或If-None-Match标题的好处，所以就像......
Cache-Control: max-age=0, must-revalidate
...应该阻止浏览器重新下载整个图像，如果它没有实际更改。测试并使用IE，Firefox和Chrome。令人讨厌的是它在Safari上失败，除非你使用...
Cache-Control: no-store
...虽然这仍然可能比用数百个相同的图像填充上游缓存更可取，特别是当它们在您自己的服务器上运行时。 ; - ）
更新（2014-09-28）：现在看来Chrome也需要Cache-Control: no-store。
答案 3 :(得分：6)
创建新图像后，您是从DOM中删除旧图像并将其替换为新图像吗？
您可以在每次updateImage调用时抓取新图像，但不要将它们添加到页面中。
有很多方法可以做到这一点。这样的事情会起作用。
function updateImage()
{
var image = document.getElementById("theText");
if(image.complete) {
var new_image = new Image();
//set up the new image
new_image.id = "theText";
new_image.src = image.src;
// insert new image and remove old
image.parentNode.insertBefore(new_image,image);
image.parentNode.removeChild(image);
}
setTimeout(updateImage, 1000);
}
在完成这项工作之后，如果仍然存在问题，可能会出现缓存问题，就像其他答案一样。
答案 4 :(得分：4)
一个答案就是强行添加一些get建议的查询参数。
更好的答案是在HTTP标头中发出一些额外的选项。
Pragma: no-cache
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Cache-Control: no-cache, must-revalidate
通过提供过去的日期，浏览器不会缓存它。在HTTP / 1.1中添加了Cache-Control，并且must-revalidate标记表明即使在情有可原的情况下，代理也不应该提供旧图像，而Pragma: no-cache对于当前的现代浏览器/缓存来说并不是必需的但可能有助于一些苛刻的旧实施。
答案 5 :(得分：3)
您可以简单地使用 fetch 并将 cache option 设置为 'reload' 来更新缓存：
fetch("my-image-url.jpg", {cache: 'reload', mode: 'no-cors'})
以下函数将更新缓存并重新加载您页面中任何地方的图像：
const reloadImg = url =>
fetch(url, { cache: 'reload', mode: 'no-cors' })
.then(() => document.body.querySelectorAll(`img[src='${url}']`)
.forEach(img => img.src = url))
它返回一个 promise，因此您可以根据需要像 await reloadImg("my-image-url.jpg") 一样使用它。
现在获取 API 是 available almost everywhere（当然，IE 除外）。
答案 6 :(得分：3)
function reloadImage(imageId)
{
path = '../showImage.php?cache='; //for example
imageObject = document.getElementById(imageId);
imageObject.src = path + (new Date()).getTime();
}<img src='../showImage.php' id='myimage' />
<br/>
<input type='button' onclick="reloadImage('myimage')" />
答案 7 :(得分：2)
我最终做的是让服务器将对该目录中的图像的任何请求映射到我试图更新的源。然后我让我的计时器在名称的末尾添加一个数字，以便DOM将其视为新图像并加载它。
E.g。
http://localhost/image.jpg
//and
http://localhost/image01.jpg
将请求相同的图像生成代码，但它看起来像浏览器的不同图像。
var newImage = new Image();
newImage.src = "http://localhost/image.jpg";
var count = 0;
function updateImage()
{
if(newImage.complete) {
document.getElementById("theText").src = newImage.src;
newImage = new Image();
newImage.src = "http://localhost/image/id/image" + count++ + ".jpg";
}
setTimeout(updateImage, 1000);
}
答案 8 :(得分：2)
document.getElementById("img-id").src = document.getElementById("img-id").src
将自己的src设置为src。
答案 9 :(得分：1)
尝试使用无用的查询字符串使其成为唯一的网址：
function updateImage()
{
if(newImage.complete) {
document.getElementById("theText").src = newImage.src;
newImage = new Image();
number++;
newImage.src = "http://localhost/image.jpg?" + new Date();
}
setTimeout(updateImage, 1000);
}
答案 10 :(得分：1)
我在使用 Unsplash 随机图像功能时遇到了同样的问题。在 URL 末尾添加一个虚拟查询字符串的想法是正确的，但在这种情况下，完全随机的参数不起作用（我试过了）。我可以想象它对于其他一些服务也是一样的，但是对于 unsplash，参数需要是 sig，所以你的图片 URL 应该是，例如，http://example.net/image.jpg?sig=RANDOM，其中 random 是一个随机字符串，不会更新时相同。我用了 Math.random()*100，但 date 也很合适。
您需要执行上述操作，因为没有它，浏览器将看到该路径上的图像已被加载，并会使用该缓存的图像来加快加载速度。
答案 11 :(得分：1)
我对AlexMA的脚本进行了改进，以使我的网络摄像头显示在网页上，并定期上传具有相同名称的新图像。我遇到的问题是，有时由于图像损坏或图像不完整（上载）而导致图像闪烁。为防止闪烁，我检查了图像的自然高度，因为网络摄像头图像的大小没有改变。仅当加载的图像高度适合原始图像高度时，完整图像才会显示在页面上。
<h3>Webcam</h3>
<p align="center">
<img id="webcam" title="Webcam" onload="updateImage();" src="https://www.your-domain.com/webcam/current.jpg" alt="webcam image" width="900" border="0" />
<script type="text/javascript" language="JavaScript">
// off-screen image to preload next image
var newImage = new Image();
newImage.src = "https://www.your-domain.com/webcam/current.jpg";
// remember the image height to prevent showing broken images
var height = newImage.naturalHeight;
function updateImage()
{
// for sure if the first image was a broken image
if(newImage.naturalHeight > height)
{
height = newImage.naturalHeight;
}
// off-screen image loaded and the image was not broken
if(newImage.complete && newImage.naturalHeight == height)
{
// show the preloaded image on page
document.getElementById("webcam").src = newImage.src;
}
// preload next image with cachebreaker
newImage.src = "https://www.your-domain.com/webcam/current.jpg?time=" + new Date().getTime();
// refresh image (set the refresh interval to half of webcam refresh,
// in my case the webcam refreshes every 5 seconds)
setTimeout(updateImage, 2500);
}
</script>
</p>
答案 12 :(得分：1)
单击按钮时，以下代码可用于刷新图像。
function reloadImage(imageId) {
imgName = 'vishnu.jpg'; //for example
imageObject = document.getElementById(imageId);
imageObject.src = imgName;
}
<img src='vishnu.jpg' id='myimage' />
<input type='button' onclick="reloadImage('myimage')" />
答案 13 :(得分：1)
我有一个要求：1）无法向图片添加任何?var=xx 2）它应该跨域工作
我非常喜欢this answer中的＃4选项，其中包括：
我的快速而肮脏的方式是：
iframe.contentWindow.location.reload(true); 这是
function RefreshCachedImage() {
if (window.self !== window.top) return; //prevent recursion
var $img = $("#MYIMAGE");
var src = $img.attr("src");
var iframe = document.createElement("iframe");
iframe.style.display = "none";
window.parent.document.body.appendChild(iframe);
iframe.src = window.location.href;
setTimeout(function () {
iframe.contentWindow.location.reload(true);
setTimeout(function () {
$img.removeAttr("src").attr("src", src);
}, 2000);
}, 2000);
}
是的，我知道，setTimeout ......您必须将其更改为正确的onload-events。
答案 14 :(得分：0)
<img src='someurl.com/someimage.ext' onload='imageRefresh(this, 1000);'>
然后在下面的一些javascript中
<script language='javascript'>
function imageRefresh(img, timeout) {
setTimeout(function() {
var d = new Date;
var http = img.src;
if (http.indexOf("&d=") != -1) { http = http.split("&d=")[0]; }
img.src = http + '&d=' + d.getTime();
}, timeout);
}
</script>
所以它的作用是，当图像加载时，安排它在1秒内重新加载。我在带有不同类型家庭安全摄像头的页面上使用它。
答案 15 :(得分：0)
不需要new Date().getTime()的恶作剧。您可以通过使用不可见的虚拟图像并使用jQuery .load（）欺骗浏览器，然后每次创建一个新图像：
<img src="" id="dummy", style="display:none;" /> <!-- dummy img -->
<div id="pic"></div>
<script type="text/javascript">
var url = whatever;
// You can repeat the following as often as you like with the same url
$("#dummy").load(url);
var image = new Image();
image.src = url;
$("#pic").html("").append(image);
</script>
答案 16 :(得分：0)
简单的解决方案：将此标头添加到响应中：
Cache-control: no-store
在此权威页面上明确解释了为什么这样做的原因：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
这也解释了为什么no-cache不起作用。
其他答案无效，因为：
Caching.delete关于您可能为离线工作创建的新缓存，请参见：https://web.dev/cache-api-quick-guide/
在URL中使用＃的片段不起作用，因为＃告诉浏览器不要向服务器发送请求。
将随机部分添加到url的缓存无效器是可行的，但也会填充浏览器缓存。在我的应用程序中，我想每隔几秒钟从网络摄像头下载5 MB的图片。完全冻结您的电脑只需要一个小时或更短的时间。我仍然不知道为什么浏览器缓存不限于合理的最大值，但这绝对是一个缺点。
答案 17 :(得分：0)
严重基于Doin的＃4代码，下面的示例在document.write中使用src代替iframe来大大简化代码，以支持CORS。此外，我们只关注破坏浏览器缓存，而不是重新加载页面上的每个图像。
下面用typescript编写并使用angular $q承诺库，只是fyi，但应该很容易移植到vanilla javascript。方法意味着生活在typescript类中。
返回iframe完成重新加载后将解析的promise。没有经过严格测试，但对我们来说效果很好。
mmForceImgReload(src: string): ng.IPromise<void> {
var deferred = $q.defer<void>();
var iframe = window.document.createElement("iframe");
var firstLoad = true;
var loadCallback = (e) => {
if (firstLoad) {
firstLoad = false;
iframe.contentWindow.location.reload(true);
} else {
if (iframe.parentNode) iframe.parentNode.removeChild(iframe);
deferred.resolve();
}
}
iframe.style.display = "none";
window.parent.document.body.appendChild(iframe);
iframe.addEventListener("load", loadCallback, false);
iframe.addEventListener("error", loadCallback, false);
var doc = iframe.contentWindow.document;
doc.open();
doc.write('<html><head><title></title></head><body><img src="' + src + '"></body></html>');
doc.close();
return deferred.promise;
}
答案 18 :(得分：0)
将图像的第二个副本放置在同一位置，然后删除原始图像。
ele.insertAdjacentHTML('beforebegin',ele.outerHTML);
ele.parentNode.removeChild(ele);
这将有效刷新图像。
答案 19 :(得分：0)
这是我的解决方案。这很简单。帧调度可能更好。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image Refresh</title>
</head>
<body>
<!-- Get the initial image. -->
<img id="frame" src="frame.jpg">
<script>
// Use an off-screen image to load the next frame.
var img = new Image();
// When it is loaded...
img.addEventListener("load", function() {
// Set the on-screen image to the same source. This should be instant because
// it is already loaded.
document.getElementById("frame").src = img.src;
// Schedule loading the next frame.
setTimeout(function() {
img.src = "frame.jpg?" + (new Date).getTime();
}, 1000/15); // 15 FPS (more or less)
})
// Start the loading process.
img.src = "frame.jpg?" + (new Date).getTime();
</script>
</body>
</html>
答案 20 :(得分：0)
我通过servlet发送数据解决了这个问题。
response.setContentType("image/png");
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache, must-revalidate");
response.setDateHeader("Expires", 0);
BufferedImage img = ImageIO.read(new File(imageFileName));
ImageIO.write(img, "png", response.getOutputStream());
然后在页面中，您只需给它一些带有一些参数的servlet来获取正确的图像文件。
<img src="YourServlet?imageFileName=imageNum1">
答案 21 :(得分：0)
此答案基于上述几个答案，但对它们进行了一些统一和简化，并将答案转换为 JavaScript 函数。
function refreshCachedImage(img_id) {
var img = document.getElementById(img_id);
img.src = img.src; // trick browser into reload
};
我需要解决动画 SVG 在第一次播放后没有重新启动的问题。
这个技巧也适用于音频和视频等其他媒体。
答案 22 :(得分：-2)
我使用了以下概念：首先使用false（缓冲区）url绑定图像，然后使用有效url绑定它。
imgcover.ImageUrl = ConfigurationManager.AppSettings["profileLargeImgPath"] + "Myapp_CoverPic_" + userid + "Buffer.jpg";
imgcover.ImageUrl = ConfigurationManager.AppSettings["profileLargeImgPath"] + "Myapp_CoverPic_" + userid + ".jpg";
这样，我强制浏览器刷新有效网址。