预加载背景图像和304响应

时间:2016-12-01 13:44:49

标签: html css image caching

我发现,当我预先加载背景图像属性中使用的图像时,Safari浏览器(桌面和移动设备)重新请求已经预加载的图像。 (而Theire的回答是304回复。)

如果图片已预先加载,则Chrome浏览器(桌面版和移动版)不会再次请求它。它只是立即出现。

但是我应该在Safari中等一会儿,因为Safari会重新请求获得304响应!

我不希望在Safari中重新请求,因为如果有div标签,其背景图像由其类动态更改,则每当其类更改时都会发生闪烁。

它在桌面上并不重要,但在移动设备中非常重要。

我怎么能达到它?

P.S。

可以通过某种方式使用img标记,显式css背景图像或内容属性或javascript来预加载!

1 个答案:

答案 0 :(得分:0)

我在特殊情况下解决了这个问题。

在我的网站中,我将背景图像添加到BODY标记,当用户单击按钮时,我添加了一个带回调函数的EventListener(更改背景图像URL,并预加载另一个图像以供下次点击)。

当我在本地主机环境中测试这些功能时(href为127.0.0.1),点击后整个页面会在更改背景图像URL时闪烁/闪烁。我使用Wireshark挖掘HTTP res / rep,然后发现Safari将重新请求相同的图像(即使它已经预先加载)。

奇怪的是,当用图像服务器测试这些功能时(href来自www.abcdefgh.com/image/test_xxx.jpg,而不是IP地址),眨眼/轻弹已经消失了。在Wireshark观看,重新请求也消失了!