中断浏览器中的图像缓存 [英] Break image caching in browser

问题描述

没有代码，因为这主要是概念性的:

所以我有一个名为以下名称的图像文件夹:

1.jpg 2.jpg 3.jpg 4.jpg

这些图像填​​充了一个图库，您可能会假设，图库中的顺序由它们的名称决定.因此，在我的php Thingamabob中，我允许客户端对图像进行重新排序.因此，假设我们的图片描述了这些东西:

1.jpg-狗" 2.jpg-猫" 3.jpg-鸡肉" 4.jpg-后现代主义"

我的客户决定先显示后现代主义"，因此我的php Thingamabob将4.jpg重命名为1.jpg，同时将其他1 2和3分别移至2 3 4，如下所示:

1.jpg-后现代主义" 2.jpg-狗" 3.jpg-猫" 4.jpg-鸡肉"

太好了，所以一切看起来都很合理，就像我在每个图像上查看服务器的实际文件夹时一样. 1.jpg作为后现代主义"的形象而存在，其余的也随之而来.但是在我们的浏览器(显示旧订单)上却不是这样.当然，第一个图像链接是"1.jpg"，但是我们的后现代"图像似乎违背了其作为文件的形而上现实，并且浏览器显示了一条狗.我想这是浏览器在缓存图像，而不是需要重新加载它们吗?可以用一个简单的客户端脚本来破坏它吗?

解决方案

在字符串末尾或图像URL处附加随机字符串或时间-

/images/1.jpg?anythinrandonghere

如果缓存是特定于用户或其他东西的，则

/images/1.jpg?username

No code, because this is mostly conceptual:

So I've got a folder of images named thusly:

1.jpg 2.jpg 3.jpg 4.jpg

These images populate a gallery, and as you might assume, the ordering in the gallery is dictated by their names. So, in my php thingamabob, I allow the client to reorder the images. So, say our images depict these things:

1.jpg - "dog" 2.jpg - "cat" 3.jpg - "chicken" 4.jpg - "postmodernism"

My client decides to show "postmodernism" first, so my php thingamabob renames 4.jpg to 1.jpg, while shifting the others 1 2 and 3, to 2 3 4 respectively like so:

1.jpg - "postmodernism" 2.jpg - "dog" 3.jpg - "cat" 4.jpg - "chicken"

Great, so all seems fair and well as I look in the actual folder of the server at each image. 1.jpg exists as an image of "postmodernism" and the rest follow suit. But not so on our browser, which displays the old order. Sure enough the first image link is "1.jpg", but our "postmodern" image seems to defy its metaphysical reality as a file, and the browser displays a dog instead. I guess this is the browser caching the images and not feeling the need to reload them? Can this be broken with a simple client-side script?

解决方案

append random string or time at the end or the image url -

/images/1.jpg?anythinrandonghere

If caching is specific to user or something else then

/images/1.jpg?username

这篇关于中断浏览器中的图像缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！