浏览器需要多次刷新才能显示新图片

时间:2013-06-01 15:52:19

标签: image

我让用户有机会用自己选择的大图来装饰他的主页。 提交后:

  • 1 新上传的图片会被重新调整并重命名(并替换uploads/home目录中的前一张图片。它被重命名为homepic.jpg,它的名称相同=> css

  • 中提到的那个
  • 2 图片显示在<div>,其背景图片为:background-image: url("uploads/home/homepic.jpg");

此方法的优点是,如果新上传图片的格式与<div>格式不完全匹配(太正方形或太矩形) 这不会导致显示错误:图片的薄条在底部或侧面丢失,这根本不会令人不安。

唯一的问题是主页需要刷新2/3/4/5或6次,以便看到新上传的图片出现。(最差的铬:最多20个次) 奇怪的是,当您第二次上传新的图片时,它会立即显示。

无论如何,我希望它能够在第一时间工作,而不必依赖用户的手动刷新。

我目前正在使用Wamp。我还尝试添加header("Cache-Control: no-cache");

我可以做些什么来解决这个问题,还是有其他办法来实现我想要的目标?

2 个答案:

答案 0 :(得分:1)

图片正在浏览器中缓存 - 如果您请求相同的资源(相同的网址),则不会再次下载

因此,在您更改该图像后,尝试添加一些内容,例如获取参数

background-image: url("uploads/home/homepic.jpg?v=3");

现在棘手的部分是 - 这个声明存在于你的CSS文件中,所以你真的只有一个选项 - 将那个CSS声明移动到该div上的内联

编辑: 另一点 - 如果你想允许用户改变那个“homepic”它不应该像那样解决 - 应该有每个用户可以存储这些东西的目录 - 这样你最终会得到“上传/ userxxx /家/ homepic.jpg?v = 1"

答案 1 :(得分:0)

@Ochi,user228395
感谢您的讨论,我找到了一个在我的案例中运作良好的解决方案。

主页:

  • <div id="home" style="background-image: url(uploads/home/homepic.jpg);"></div>

页面结束:调整大小+在数据库中插入

  • header('location:index.php?page=uploaded');
    。此页面显示“您的图片已成功上传” 当用户点击消息或主页按钮时,他会被重定向到主页,并立即显示最新上传的图片。