使用JavaScript强制图像缓存 [英] Force image caching with javascript

问题描述

我正在尝试克隆随机生成的图像. 尽管我使用的是完全相同的网址，但加载的图片却不同. (经过chrome和firefox测试)

I am trying to clone an image which is generated randomly. Although I am using the exact same url a different image is load. (tested in chrome and firefox)

我无法更改图像服务器，因此我正在寻找纯JavaScript/jQuery解决方案.

I can't change the image server so I am looking for a pure javascript/jQuery solution.

您如何强制浏览器重用第一张图片?

How do you force the browser to reuse the first image?

Firefox:

Firefox:

Chrome:

自己尝试一下(也许您必须重新加载几次才能看到它)

Try it yourself (maybe you have to reload it several times to see it)

代码: http://jsfiddle.net/TRUbK/

$("<img/>").attr('src', img_src)
$("<div/>").css('background', background)
$("#source").clone()

演示: http://jsfiddle.net/TRUbK/embedded/result/

推荐答案

如果不是您的图像服务器，则无法更改，但您可以在自己的服务器上编写一些内容来为您处理.

You can't change the image server if it isn't yours, but you can trivially write something on your own server to handle it for you.

首先用您选择的服务器端语言(PHP，ASP.NET等)编写以下内容:

First write something in your server-side language of choice (PHP, ASP.NET, whatever) that:

1. 命中 http://a.random -image.net/handler.aspx?username=chaosdragon&randomizername=goat&random=292.3402&fromrandomrandomizer=yes 并下载.您可以通过以下两种方式之一生成密钥.要么获得整个结果的哈希值(MD5应该很好，它与安全无关，所以担心这几天它太弱了，不再适用).或者获取图像的大小-后者可能有一些重复，但是生成速度更快.
2. 如果尚未存储图像，请将其保存在使用该键作为文件名一部分，将内容类型作为另一部分(如果JPEG和PNG混合的情况下)的位置
3. 在下一阶段使用带有URI的XML或JSON响应进行响应.

1. Hits http://a.random-image.net/handler.aspx?username=chaosdragon&randomizername=goat&random=292.3402&fromrandomrandomizer=yes and downloads it. You generate a key in one of two way. Either get a hash of the whole thing (MD5 should be fine, it's not a security-related use so worries that it's too weak these days don't apply). Or get the size of the image - the latter could have a few duplicates, but is faster to produce.
2. If the image isn't already stored, save it in a location using that key as part of its filename, and the content-type as another part (in case there's a mixture of JPEGs and PNGs)
3. Respond with an XML or JSON response with the URI for the next stage.

在客户端代码中，您通过XmlHttpRequest命中了该URI，以获得用于图像的URI.如果您想要一个新的随机图片，请再次点击该第一个URI，如果您想要在两个或多个位置使用相同的图片，请使用相同的结果.

In your client side-code, you hit that URI through XmlHttpRequest to obtain the URI to use with your images. If you want a new random one, hit that first URI again, if you want the same image for two or more places, use the same result.

该URI命中类似http://yourserver/storedRandImage?id=XXX的内容，其中XXX是键(哈希值或大小如上所述).用于处理程序的处理程序将查找存储的图像副本，并将文件以正确的内容类型发送到响应流.

That URI hits something like http://yourserver/storedRandImage?id=XXX where XXX is the key (hash or size as decided above). The handler for that looks up the stored copies of the images, and sends the file down the response stream, with the correct content-type.

从技术上讲，这一切都非常容易，但是可能的问题是合法的，因为您将图像的副本存储在另一台服务器上，因此您可能不再符合发送随机图像的服务的协议条款

This is all really easy technically, but the possible issue is a legal one, since you're storing copies of the images on another server, you may no longer be within the terms of your agreement with the service sending the random images.

这篇关于使用JavaScript强制图像缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！