0

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.

redhotspike
  • 1,056
  • 5
  • 17
  • 39

2 Answers2

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

Community
  • 1
  • 1
Joshua
  • 3,615
  • 1
  • 26
  • 32
  • Well I'd already seen that question, but I read a little farther and found something that definitely fits: http://stackoverflow.com/a/10214021/1301332 so thanks! – redhotspike Apr 30 '13 at 04:12
1

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. */
Explosion Pills
  • 188,624
  • 52
  • 326
  • 405