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,058
  • 5
  • 17
  • 38

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,605
  • 1
  • 25
  • 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
  • 183,406
  • 48
  • 308
  • 385