Можете ли вы контролировать порядок загрузки изображений (скрытых или видимых) на веб-странице?

Question

Если у меня есть два div, один показанный, а другой скрытый, я хочу, чтобы изображения в видимом div загружались сначала, а затем только для других скрытых изображений.

Есть ли способ сделать это?

<div class="shown">
<img src="a.jpg" class="loadfirst">
<img src="b.jpg" class="loadfirst">
<img src="c.jpg" class="loadfirst">
<img src="d.jpg" class="loadfirst">
<img src="e.jpg" class="loadfirst">
</div

<div style="display:none" class="hidden">
<img src="1.jpg" class="loadsecond">
<img src="2.jpg" class="loadsecond">
<img src="3.jpg" class="loadsecond">
<img src="4.jpg" class="loadsecond">
<img src="5.jpg" class="loadsecond">
</div>

Answer 1

Браузер должен запрашивать изображения в том порядке, в котором их содержит разметка. Таким образом, он запрашивает a.jpg, b.jpg и т. Д.

Если вы не хотите, чтобы скрытые изображения DIV загружались вместе со страницей, вам нужно будет вставить этот HTML-код со стороны клиента, как только вы захотите загрузить изображения.

Answer 2

Как уже говорили другие, все сводится к тому, какие изображения перечислены первыми в разметке html.

Но кое-что, что может помочь с этой проблемой, - это отображать загрузочный счетчик, пока все ваши изображения не будут полностью загружены.

Вы можете сделать это с JQuery, как в этом примере.

http://jqueryfordesigners.com/image-loading/

Answer 3

Некоторые, если не большинство, браузеры делают это автоматически. Если изображения скрыты, они не загружаются.

Answer 4

Если все изображения встроены в одну карту изображений, все изображения будут загружены одновременно. Это решает проблему «буквального порядка загрузки». Это немного сложнее, но совершенно другая проблема, которую вы можете пропустить сейчас (http://www.alistapart.com/articles/imagemap/).

Но для «очевидного порядка загрузки» вы начинаете с DIV с опцией <DIV id="1" style="visibility: hidden">. Затем используйте цикл for, чтобы изменить видимость DIV по порядку.

for (var=0;var<=10;var=var+increment) {
document.getElementById(var).style.visibility = 'visible';
}

Также, возможно, подход с использованием слоев: http://jennifermadden.com/javascript/dhtml/showHide.html

Я думаю, что есть способы динамически загрузить дополнительный файл CSS (когда вы готовы загрузить изображения): http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS