如何防止谷歌浏览器在设置背景图像 css 时击中服务器

How can you prevent Google Chrome from hitting the server when setting background image css?

本文关键字：css 服务器图像背景何防止谷歌浏览器设置更新时间：2023-09-26

当您在谷歌浏览器中设置背景图像（您也可以包括使用 img 标签 - 不过我还没有测试过）并且服务器没有要求缓存它时，谷歌浏览器会再次点击服务器要求图像（即使它已经在页面中 - 我已将其作为错误提交，但它被设置为不会修复）。有没有办法绕过这一点（最好使用 jQuery）？

我已经将图像加载到 javascript Image 对象中（因为计划是将其放置在画布上），所以我想我可以用它做点什么（但使用 javascript 状态将图像对象设置为div 背景图像，否则）。

将服务器设置为要求浏览器缓存文件并不理想，因为它是动态生成的（我知道？_rand=123 技巧，但更喜欢纯客户端解决方案）。

将

一个对象交换为另一个对象。

如果您说预缓存的图像无法为您解决此问题（如果不看到您的实际页面和服务器，我们很难知道），那么您唯一的其他潜在解决方案是将实际图像作为其背景图像预缓存对象，然后将当前对象换成已经加载背景的对象。如果您披露了您尝试更改背景图像的实际 HTML，我们可以更具体地建议如何做到这一点。

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

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

在 JSBin： http://jsbin.com/oruros/1 上查看此技术的实际应用。在Chrome中打开网络面板并查看 - 没有图像被多次请求。

如果要动态执行此操作，请使用此处概述的技术之一来创建 CSS 类：如何使用 Javascript 创建