У меня есть большие пальцы div (для краткости я показываю только четыре больших пальца):
<div id="thumbs">
<img src="graphics/thumbs/01.jpg" width="190" height="190" class="thumb objects" id="project01" />
<img src="graphics/thumbs/08.jpg" width="190" height="190" class="thumb web" id="project08" />
<img src="graphics/thumbs/14.jpg" width="190" height="190" class="thumb freehand" id="project14"/>
<img src="graphics/thumbs/04.jpg" width="190" height="190" class="thumb freehand objects" id="project04" /></div>
и пустой div, называемый «контентом»:
<div id="content"></div>
и скрытый div, называемый «предзагрузкой»:
<div id="preload">
<span id="project01_content"><img src="graphics/010.jpg" /></span>
<span id="project02_content"><img src="graphics/022.jpg" /><img src="graphics/021.jpg" /><img src="graphics/023.jpg" /><img src="graphics/020.jpg" /></span>
<span id="project03_content"><img src="graphics/030.jpg" width="450" height="600" /><img src="graphics/031.jpg" width="450" height="600" /></span>
<span id="project04_content"><img src="graphics/040.jpg" width="775" height="600" /><img src="graphics/041.jpg" width="775" height="600" /></span></div>
, который я подумал, будет хорошим способом предварительно загрузить все изображения в галерее. Мой jQuery использует идентификатор нажатой миниатюры для clone() изображений из соответствующих span и перетаскивает их в content с помощью метода html(). Проблема в том, что у галереи есть сто изображений, а не четыре, и уже, если я нажму на одну из нижних миниатюр, content div останется пустым, пока ВСЕ другие изображения не будут загружены.
Какой лучший способ обойти это? Моя первая мысль: может быть, есть способ поставить загрузку в очередь или снять очередь? Уменьшить пальцы, пока их содержимое не загрузится? Откажитесь от preload в целом в пользу лучшего способа? И если да, то как?