JS设置background-image，如何缓存

Posted 2023-05-06

做一个走马灯的效果
我的页面上有几张Images，页面加载的时候，会加载这几张图片，然后另外会有一个空的div，我用JS控制这个div的background-image的url为这几张Images的Src切换
但是似乎每设置一次background-image，都会触发一次请求，导致这个走马灯效果每次换图都在不停的请求服务器
我想问，有什么办法比较好缓存这些图片吗？
我试过设置一个数组，来保存这些Images对象，但是效果不佳，还是说得用数组缓存这些设置好background-image的div对象？

理论上，浏览器会自动缓存图片的，
如果你的浏览器没有缓存，那有可能你把浏览器缓存禁用了，

还有一点是，即使是缓存了，浏览器还是会请求服务器的，但是请求的内容是，验证图片是否有修改，如果图片没有修改，那么服务器会返回状态码为300，而不是200，300意味着图片没有修改，那么浏览器就可以取本地缓存了，200是说图片下载传输完成的意思，就是说从服务器下载完成 ，

我觉得你的问题，应该是看到了浏览器请求，但是没有看状态吗的问题。

在明确一下：即使是缓存了，也会有请求的，只是请求的返回结果，是不是需要重新下载数据(图片) 参考技术A http://www.cnblogs.com/cbcye/archive/2011/02/22/1961418.html
楼主试试这个 参考技术B 很严重的问题啊，可以用html5 的离线存储实现

正确设置 HTTP 标头以强制缓存 JS、CSS 和 PNG 文件

【中文标题】正确设置 HTTP 标头以强制缓存 JS、CSS 和 PNG 文件

【英文标题】：Set HTTP headers properly to force caching on JS, CSS and PNG files

【发布时间】：2013-08-25 17:43:22

【问题描述】：

如何告诉 GlassFish 服务器将所有 JS、CSS 和 PNG 文件存储到浏览器缓存中以减少 HTTP GET 请求？

我正在使用 JSF 和 PrimeFaces。

【参考方案1】：

只需使用 JSF 内置资源处理程序。 IE。将<h:outputStylesheet name>、<h:outputScript name> 和<h:graphicImage name> 与/resources 文件夹中的文件一起使用，而不是“普通香草”<link rel="stylesheet">、<script> 和<img>。

<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
<h:graphicImage name="images/logo.png" />

这样你就完全不用担心资源缓存了。 JSF 内置资源处理程序已经设置了必要的响应头。过期时间已经默认为 1 周。

在 Mojarra 中可以通过以下上下文参数控制过期时间（值以毫秒为单位）：

<context-param>
    <param-name>com.sun.faces.defaultResourceMaxAge</param-name>
    <param-value>3628800000</param-value> <!-- 6 weeks. -->
</context-param>

在 MyFaces 中：

<context-param>
    <param-name>org.apache.myfaces.RESOURCE_MAX_TIME_EXPIRES</param-name>
    <param-value>3628800000</param-value> <!-- 6 weeks. -->
</context-param>

另见：

How to reference CSS / JS / image resource in Facelets template? What is the JSF resource library for and how should it be used?

【讨论】：

感谢您的回答。但是查看 netbeans 上的 HTTP 服务器监视器，我注意到需要更多时间下载的文件是 primefaces.js ，我从不在我的页面中调用该脚本。 ..

PrimeFaces 组件可以。

是的，primefaces组件，生成HTML+js代码，每次刷新页面，都会调用GET请求下载primefaces.js，jquery.js等...这个文件不是在 /resources 文件夹中，我怎么知道“将这些文件存储在缓存中”？

那些是 JSF资源依赖。它们捆绑在 PrimeFaces JAR 文件中（有关详细信息，另请参阅 ***.com/q/8320486）。仔细查看 HTTP 流量。如果您不刷新而只是导航到另一个也需要该文件的页面，那么浏览器根本不会请求它。如果刷新页面，那么浏览器确实会发送 GET 请求，但服务器会返回没有正文的 304 响应。仅当您执行“硬刷新”时，它才会是 200 响应并在正文中包含文件。

非常感谢您的回答！