HTML / jQuery预加载图像

Question

I'm upgrading a basic photo gallery to use jQuery (woohoo!).

I understand the semantics of jQuery thus far, with one exception: I can't seem to wrap my brain around this whole preloading of images thing. I already have a layout complete with divs classes and ids.

Here's roughly what the image part looks like:

<div id="main">
<img id="spotHolder" src="images/somePic.jpg">
</div>
<div id="others">
<img class="otherPics" src="images/someOtherPic.jpg">
</div>

I was using a jQuery Howto as a guide for preloading images; but I don't know what I would need to do (if anything?) to the html.

Looking for an idea of what to do.

Answer 1

If you look on this very page, a little farther over to the right (in the "Related" section), you'll see an exact duplicate of your question that just might answer it for you:

Preloading images with jQuery

Answer 2

I don't know why you would need to do anything to the HTML... To preload all images possible at once you could use:

$("img").attr('src', function (_, src) {
    $("<img>").attr('src', src);
});

It would probably be a bit heavy-handed to do this, so you could use a more specific selector:

$("#gallery-container img").attr('src' /* etc. */