jQuery clone() 和 302 图像源——如何避免在 Firefox 中重新加载？答案

【问题标题】：jQuery clone() and 302 image sources -- how to avoid reloading in Firefox?jQuery clone() 和 302 图像源——如何避免在 Firefox 中重新加载？
【发布时间】：2011-11-27 06:05:48
【问题描述】：

我在<div> 中有一组图像。出于安全目的，所有这些图像都是通过 302 而不是 200 提供的（servlet 提供基于身份验证的图像）。

我想克隆 <div> 并将其附加到另一个容器中。

在除 Firefox 之外的所有浏览器中这样做时，不会重新加载图像。看起来那些浏览器理解它是同一张图片。

在 Firefox 中，每张图片都会在克隆/追加之后重新加载。我想避免这种情况。有人有什么建议吗？

更新代码示例：

<div>
    <p><button type="button" id="btn1">Clone 1</button> <button type="button" id="btn2">Clone 2</button></p>
</div>

<div id="group1">
    <div id="imgs">
        <p><img src="https://example.com/image/9c90434ed657427dad29"></p>
        <p><img src="https://example.com/image/977b5dfe5e064880b164"></p>
        <p><img src="https://example.com/image/8f22d7fd2a2343ab99c9"></p>
        <p><img src="https://example.com/image/898c022e20b742c88ae6"></p>
        <p><img src="https://example.com/image/8319fe1d23064b5d8011"></p>
    </div>
</div>

<div id="group2"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#btn1").click(function(){
            $("#imgs").clone().appendTo("#group1");
        });
        $("#btn2").click(function(){
            $("#imgs").clone().appendTo("#group2");
        });
    });
</script>

【问题讨论】：

当然。我用一个代码示例编辑了我的原始帖子。关键是在 Firefox 中，当您克隆 div#imgs 并附加图像时，所有图像都会重新加载。在所有其他浏览器中，它们不会。同样重要的是要注意，所有这些图像都被用作 302 重定向以进行身份验证（它是一个具有资产隐私的企业应用程序）。我的目标是在我们寻找 302 的替代方案之前看看是否有 jQuery 工作。谢谢。
另外值得注意的是：如果将 clone() 更改为 detach()，图像不会在 Firefox 中重新加载。

标签： jquery clone http-status-code-302

【解决方案1】：

尝试为 Firefox 用户添加预取标签。相信FF还是支持预取关系的；他们确实想出了它。

<link rel="prefetch" src="https://example.com/image/9c90434ed657427dad29">
<link rel="prefetch" src="https://example.com/image/977b5dfe5e064880b164">
<link rel="prefetch" src="https://example.com/image/8f22d7fd2a2343ab99c9">
<link rel="prefetch" src="https://example.com/image/898c022e20b742c88ae6">
<link rel="prefetch" src="https://example.com/image/8319fe1d23064b5d8011">

【讨论】：