Jquery克隆图像无需重新加载

Question

当我克隆图像时，浏览器会重新下载图像吗？ Chrome控制台说从缓存中加载，但

当我在移动浏览器（ios）上查看它时会有相当的延迟吗？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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="">

＆＃13;

＆＃13;

＆＃13;

Answer 1

我遇到了这个问题，我通过对图像进行base64编码并使用data URI将其嵌入html来解决它。嵌入后，无需其他请求即可将其克隆。但是，请注意，在这个问题中讨论了要对数据URI进行权衡的问题：How much faster is it to use inline/base64 images for a web site than just linking to the hard file?

Answer 2

在每个$(this).clone().appendTo('body'); dom重绘时，由于移动设备的CPU速度较慢，当然重新绘制的速度会慢一些。