Jquery克隆图片而无需重新加载

Question

当我克隆一张图片时，浏览器是否会重新下载该图片？ Chrome控制台显示已从缓存加载，但在移动浏览器（iOS）上查看时会有相当的延迟。

$('#a').on('click', function() {
  $(this).clone().appendTo('body');
})

#a {
  width: 200px;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="a" src="https://www.pcspecialist.co.uk/images/misc/right-pc.png" alt="">

- Toniq

---

嗯...你有什么问题？ - Gogol

你能在这个句子中看到问号吗？ - Toniq

Answer 1

我遇到了这个问题，通过对图像进行base64编码并使用data URI将其嵌入html中来解决它。 嵌入后，它会被克隆而无需额外的请求。 但是，请注意，如此处理数据URI存在折衷方案，如在此问题中讨论的那样：网站使用内联/ base64图像比仅链接到硬文件快多少？

- TheDavidFactor

Answer 2

在每次执行 $(this).clone().appendTo('body'); 时，DOM 都会重新绘制，因为移动设备的 CPU 较慢，所以重新绘制的速度当然会更慢。

- Catalin