2012-04-15 53 views
1

当你在谷歌浏览器中设置一个背景图片(你可能还包括一个img标签 - 虽然我还没有测试过),并且服务器并没有要求它被缓存,谷歌浏览器会点击服务器再次询问图像(即使它已经在页面中 - 我已经提交了这个bug,但它被设置为wontfix)。有没有办法,我可以绕过这个(最好使用jQuery)?如何防止Google Chrome在设置背景图像css时触碰服务器?

我已经将图像加载到一个javascript图像对象(因为计划是将它放在画布上),所以我想我可以做些什么(但Set an Image object as a div background image using javascript另有说明)。

设置服务器让浏览器缓存文件并不理想,因为它是动态生成的(我知道?_rand = 123的技巧,但更喜欢纯粹的客户端解决方案)。

+1

所以客户根据需求的行为。为什么这是一个问题?使用正确的缓存标题并且一切正常 – zerkms 2012-04-16 00:03:02

+0

浏览器在请求URL时避免获取图像的唯一方法是缓存它。如果你告诉浏览器不这样做,它不会。对于它的请求来自同一页面没有任何区别;换句话说,没有HTTP缓存控制概念用于“不缓存同一页面”。 – Pointy 2012-04-16 00:06:37

+0

我可以理解Chrome团队选择不修复它的原因,但我宁愿如果图像更改服务器端(因为它完全可能在我的应用程序中执行,因为它是动态创建的精灵表)它直到整个页面在客户端刷新(或最好在我的控制下)才会被反映出来。 – 2012-04-16 02:41:29

回答

0

将一个对象换成另一个。

如果您说预先存储的图像无法为您解决此问题(难以让我们知道,而无需查看您的实际页面和服务器),那么您唯一的其他可能解决方案是预先准备好实际图像作为背景图片,然后将当前对象替换为已加载背景的对象。如果你透露你想要改变背景图片的实际HTML,我们可以更具体地建议如何去做。

但是,这只是一种解决方法,因为解决此问题的更正确方法是在需要缓存时使客户端能够从服务器缓存正确的标头。然后,您可以随时通过在不需要缓存的情况下将内容附加到URL来缓存缓存,但如果您指示浏览器不要通过标头缓存,那么它会听取您的意见,而且您无法解决问题那。

+0

不幸的是,由于用户可能会在舞台上放置多个副本,因此不会对我有用(因此此应用程序正朝着使用HTML5画布的方向发展)。它可以用于我正在使用的“捕捉到网格”光标。 – 2012-04-16 03:23:17

0

为每个图像创建一个CSS类,该图像用background-image属性设置,然后将元素的className设置为与要显示的图像对应的类。

看到这个技术在JSBin行动:http://jsbin.com/oruros/1。在Chrome中打开网络面板并查看 - 没有图像被请求多次

如果要动态地做到这一点,利用这里列出来创建CSS类的技术之一:How to create a <style> tag with Javascript