Charge all the images before displaying the website

Question

I know that this is a question asked a lot of times here but my situation is a little bit different. I want the images to load even if they are not being displayed or in the code. I have something like this:

HTML

<div id="gallery">
    <div class="photo></div>    
</div>

<div id="thumbnails>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
</div>

jQuery

$('.thumb:nth-of-type(1)').click(function(){
    $('.photo').css('background','url(css/img/1.jpg)');
});

$('.thumb:nth-of-type(2)').click(function(){
    $('.photo').css('background','url(css/img/2.jpg)');
});

$('.thumb:nth-of-type(3)').click(function(){
    $('.photo').css('background','url(css/img/3.jpg)');
});

$('.thumb:nth-of-type(4)').click(function(){
    $('.photo').css('background','url(css/img/4.jpg)');
});

I know it's not the best to do this, but it's the easiest for me. The problem is that when I click on the photo it changes but takes a time to load and it looks bad. Is there a way to load the images even if they didn't appeared on the page/code yet?

How is your situation different? http://stackoverflow.com/questions/476679/preloading-images-with-jquery — isherwood, Mar 11 '15 at 15:36
All that hard stuff I don't understand. I just want to know a simple way to achieve this. — mrpinkman, Mar 11 '15 at 15:39
If there was a simple way, the answers you've seen would be simple. — isherwood, Mar 11 '15 at 15:49

score -1 · Answer 1 · answered Mar 11 '15 at 15:39

-1

Put multiple

<div class="photo"></div>

With an "active" class for the active background and load the bckgnd when you load the page.

Then just change the "active" class from one photo to the other.

answered Mar 11 '15 at 15:39

jeremyb

470
4
12

Charge all the images before displaying the website

1 Answers1