Question

Given a number of images (animation frames) I would like to prefetch them and then show them on a webpage as needed.

I have tried several ways of prefetching, including a nifty plugin, but here’s a dead simple method:

<div class="animation-container"></div>

<div class="holding-container" style="display:none"></div>

<script>
$('.holding-container').append('<img src="Image1.png" />');
$('.holding-container').append('<img src="Image2.png" />');
</script>

In the Network tab of Firebug or developer tools, I see these calls result in queries to the server, and the images are fetched successfully.

Now, I want to actually use the images. Here’s some very simplified code:

$('.animation-container').prepend('<img src="Image1.png"/>');

This is where things go off the rails. The network tabs show the browsers query the server again (receiving 304 NOT MODIFIED). This results in about a 200ms delay before the image is shown. Why does this happen and what can I do about it?

Answer 1

You are creating a new DOM object instead of re-using the one that was pre-fetched.

Add an id to each image to uniquely identify it –

<div class="animation-container"></div>
<div class="holding-container" style="display:none"></div>
<script>
    $('.holding-container').append('<img src="Image1.png" id="img1" />');
    $('.holding-container').append('<img src="Image2.png" id="img2" />');
</script>

And then to grab the element using a selector, detach() it (like remove() but keeps the info, you can omit this if you you want to keep it in your holding container), and prependTo() it to your container:

$('.holding-container #img1').detach().prependTo('.animation-container');