0

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?

Martin Burch
  • 2,726
  • 4
  • 31
  • 59
  • 2
    You're creating a new Image element. Try transferring it from the `.holding-container` instead. It will be fastest if you keep a reference when you append it: `var img1 = $('').appendTo(".holding-container");` Then do the prepend like this: `img1.prependTo('.animation-container')` – I Hate Lazy Oct 21 '12 at 03:27

3 Answers3

2

Maybe CSS sprites will help you. These are great for animation and if you're have not enough image editing skills, there are whole bunch free online generators.

Sergey Chernykh
  • 51
  • 3
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');
doublesharp
  • 26,888
  • 6
  • 52
  • 73
0

Here are two ways that you can preload images:

Image preloader javascript that supports events

Is there a way to load images to user's cache asynchronously?

In both cases, these preload images into cached images. Then, when you use those image URLs anywhere else in your web page, they will load immediately (from the browser cache).

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Both of those are excellent prefetchers I'm sure, but they leave out a critical bit of information -- how do you actually use the images once they are fetched? Can they be called out of an object or does placing them into the DOM cause a server query (which returns 304 Not Modified, per my question above)? – Martin Burch Oct 21 '12 at 04:21
  • @MartinBurch - After the images are preloaded, I was trying to explain that you just create an image object, assign the image URL as the image `src` and the image will load immediately from the browser cache (without calling the server). That's what "preloading into the cache" means and does and that's how you use this code. – jfriend00 Oct 21 '12 at 04:22