Jquery clone image without reloading

Question

When I clone an image, does the browser redownload the image? Chrome console says loaded from cache, but

When I look it on mobile browser (ios) there is a quite delay?

$('#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="">

Answer 1

I ran into this issue and I got around it by base64 encoding the image and using a data URI to embed it in the html. With it embeded it's cloned without an additional request. However, be aware that there are trade offs to data URIs as discussed in this question: How much faster is it to use inline/base64 images for a web site than just linking to the hard file?