jQuery Forum

I have a page that contains 1000+ background images. Each image is the background of a thumbnail-sized div, and when that div is clicked, the background of the page changes to the same background as the thumbnail. Initially all thumbnail divs are hidden. Links are used to show a few thumbnails at a time. For example, you could click on "pink" to show all pink background images. I don't want any thumbnail divs to load their backgrounds until they are actually visible on the page. It looks like what's happening is that the page is attempting to load all background images even when they aren't shown. So, even when I'm only showing 10 images, it takes forever to load because it's trying to load several hundred other images first.

Does anyone know how to make the background image load only when its div is actually visible? I would then want it to stay loaded even if turned off afterwards (re-hidden), so it won't have to load twice.

Here is my structure:

<div class="thumbs">
    <div class="cloth solid" style="background-image: url('bc-01.png');">bc-01</div>
      .... more images
</div>