detach() 然后 append() <picture> 标签导致 Safari 下载相同的 JPG 文件两次答案

【问题标题】：detach() then append() <picture> tag causes Safari to download same JPG file twicedetach() 然后 append() <picture> 标签导致 Safari 下载相同的 JPG 文件两次
【发布时间】：2019-07-23 05:06:27
【问题描述】：

最大操作系统版本：10.14.3

Safari 版本：版本 12.0.3 (14606.4.5)

我只遇到了 Safari 的问题。

我使用 jQuery 分离（）然后附加（）一个图片标签，这导致 Safari 请求相同的图像两次。这不是预期的。 Chrome 和 Firefox 都没有这个问题。

我在 Github 上做了一个演示，以便您更好地理解。 https://github.com/EdmondWang/picture-tag-on-safari/tree/master

这是demo的网络面板，可以看到每次点击“移至红色”和“移至蓝色”按钮时都会发送“toyota-prius-D@1x.jpg”的JPG请求。

这是整个请求和响应的快照：这是本地节点快递应用程序的日志：

我为什么要解决这个问题是因为我们发现每次用户在 Safari 中滑动 slick carousel@1.6.0 时都会重新加载图像。我发现这是因为在滑动操作期间存在 detach()&append() 逻辑。（下面的 slickAdd 方法）所以我尝试模拟逻辑以重现问题。有人知道如何避免这个重复的 HTTP 请求吗？

【问题讨论】：

我无法在 safari Version 12.0.3 (14606.4.5) 上重现您的问题：/
@Yanis-git，你可以试试github.com/EdmondWang/picture-tag-on-safari/tree/master
您如何准确验证重复请求？使用开发者工具或服务器日志？
还要检查您是否在 safari 中禁用了缓存。参考：stackoverflow.com/questions/46324675/…
您可以通过使用 Cache-Control 标头进一步控制这一点。这在此处进一步概述：developers.google.com/web/fundamentals/performance/…

标签： javascript jquery html

【解决方案1】：

感谢@Jensv，将图像请求的响应中的max-age 或Cache-Control 设置为大于0 的任何值都可以解决Safari 中重复的http 图像请求。

【讨论】：