问题
我的主页上有8张图片，可以通过上传页面进行更改。更改8个图像后，用户将导航回主页以查看新图像。
但是，不显示新图像。在刷新浏览器之前，旧图像仍然存在。
我猜这是因为浏览器正在缓存页面然后重新加载缓存页面。
到目前为止我尝试过的事情。
将这行代码添加到标题中。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"><!--stop caching-->
并将带有上述代码的标题添加到页面底部。
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
</HEAD>
然而，这个解决方案对我不起作用。
非常感谢任何帮助或推动正确的方向。
整个HTML页面只是因为我已将上述解决方案添加到错误的位置，并在需要时编写解决方案供您使用。
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"><!--stop caching-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluid.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div id="title">
<h1>Bass Clef Photography</h1>
</div>
<div id="tagLine">Passion 4 Live Music & Passion 4 Photography</div>
<div id="tabsContainer">
<div id="centerContainer">
<div class='tab zero'>
<ul>
<li><a href="index.html">Home</a></li>
</ul>
</div>
<div class='tab one'>
<ul>
<li><a href="#">Music Gallery</a></li>
</ul>
</div>
<div class='tab two'>
<ul>
<li><a href="#">About</a></li>
</ul>
</div>
<div class='tab three'>
<ul>
<li><a href="#">Clients</a></li>
</ul>
</div>
<div class='tab four'>
<ul>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class='tab five'>
<ul>
<li><a href="members.php">Members</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<div id="photoFrame">
<img src="uploads/picture01.jpg" class="demo-img" alt="">
<img src="uploads/picture02.jpg" class="demo-img" alt="">
<img src="uploads/picture03.jpg" class="demo-img" alt="">
<img src="uploads/picture04.jpg" class="demo-img" alt="">
<img src="uploads/picture05.jpg" class="demo-img" alt="">
<img src="uploads/picture06.jpg" class="demo-img" alt="">
<img src="uploads/picture07.jpg" class="demo-img" alt="">
<img src="uploads/picture08.jpg" class="demo-img" alt="">
</div>
</div>
</body>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/screenfull.js"></script>
<script>
$(function () {
$('#supported').text('Supported/allowed: ' + !!screenfull.enabled);
if (!screenfull.enabled) {
return false;
}
$('#request').click(function () {
screenfull.request($('#container')[0]);
// does not require jQuery, can be used like this too:
// screenfull.request(document.getElementById('container'));
});
$('#exit').click(function () {
screenfull.exit();
});
$('#toggle').click(function () {
screenfull.toggle($('#container')[0]);
});
$('#request2').click(function () {
screenfull.request();
});
$('.demo-img').click(function () {
screenfull.toggle(this);
});
$('#demo-video').click(function () {
screenfull.toggle(this);
});
// a little hack to be able to switch pages while in fullscreen.
// we basically just creates a seamless iframe and navigate in that instead.
$('#iframe').click(function () {
// We create an iframe and fill the window with it
var iframe = document.createElement('iframe')
iframe.setAttribute('id', 'external-iframe');
iframe.setAttribute('src', 'http://bbc.com');
iframe.setAttribute('frameborder', 'no');
iframe.style.position = 'absolute';
iframe.style.top = '0';
iframe.style.right = '0';
iframe.style.bottom = '0';
iframe.style.left = '0';
iframe.style.width = '100%';
iframe.style.height = '100%';
$('#container').prepend(iframe);
document.body.style.overflow = 'hidden';
})
document.addEventListener(screenfull.raw.fullscreenchange, function () {
var elem = screenfull.element;
$('#status').text('Is fullscreen: ' + screenfull.isFullscreen);
if (elem) {
$('#element').text('Element: ' + elem.localName + (elem.id ? '#' + elem.id : ''));
}
if (!screenfull.isFullscreen) {
$('#external-iframe').remove();
document.body.style.overflow = 'auto';
}
});
$(document).on(screenfull.raw.fullscreenchange, function () {
console.log('Fullscreen change');
});
// trigger the onchange() to set the initial values
screenfull.onchange();
});
</script>
<script>
var _gaq=[['_setAccount','UA-25562592-1'],['_trackPageview'],['_trackPageLoadTime']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
</HEAD>
</html>
答案 0 :(得分：1)
它可能不是页面，而是仅缓存的图像。一个历史悠久的解决方案是将唯一的查询字符串附加到图像的末尾，以便浏览器重新加载它 - 最简单的方法是使用如下的时间戳：
echo "<img src='uploads/picture01.jpg?" . filemtime('uploads/picture01.jpg') . "' class='demo-img' alt='PictureOne' />"
这很容易在服务器端通过php或诸如此类做。更多信息可以在这个答案中看到：
How to force a web browser NOT to cache images
更新：为了澄清，查询字符串仅在HTML文档中附加到图像文件名。您的服务器上的图像仍将被命名（在我的示例中）my-image.gif。每次提供HTML页面时，您都希望查询字符串是唯一的，以防止浏览器获取图像的缓存版本，因此使用日期/时间戳的解决方案。
答案 1 :(得分：0)
截至2018年，只有两种最可靠的方式
1）<meta http-equiv="expires" content="0">使用此元标记，但要小心，因为只要浏览器处理完网页，此标记就会破坏页面的所有缓存。
2）在服务器上为每个页面请求生成一个唯一ID，并在唯一ID附加到图像，文档之前，将此id附加到HTML文档内所有文件名的末尾?需要每次都从服务器加载的css / js文件，视频等。例如，如果你有像<img src="images/profile223.jpg" alt="profile picture">这样的HTML标签，那么在服务器端附加文件末尾的唯一ID这个名字是echo '<img src="images/profile223.jpg?'.$uniqueid.'"" alt="profile picture">';。在这个例子中我使用php，但你可以在任何语言上生成唯一的ID。 Google，Facebook，Microsoft，Twitter等所有大公司都使用这种技术，因为它是最有效的方式，不会影响您希望存储在用户浏览器上的缓存数据，如登录会话ID。此技术与浏览器兼容并支持旧版本的IE，Firefox，Chrome，Safari和Opera。您可以使用相同的技术在网址末尾添加唯一ID