Webページ上の画像（非表示対可視）の読み込み順序を制御できますか？

Question

2つのdivがある場合、1つは表示され、もう1つは非表示になります。表示する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

他の人からも言われているように、すべての画像がHTMLマークアップの最初に表示されます。

しかし、この問題の原因となるものは、すべての画像が完全に読み込まれるまでローディングスピナーを表示することです。

この例のように、JQueryでこれを行うことができます。

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

Answer 2

ブラウザは、マークアップは、それらを一覧表示した順に画像を要求しなければならない。あなたがしたくない場合は、など

、a.jpg b.jpg用を求めるだろうだから隠されたDIVイメージをページにロードすると、イメージをロードした後にクライアント側からそのHTMLを挿入する必要があります。

Answer 3

すべてのイメージが1つのイメージマップに埋め込まれている場合、すべてのイメージが同時に読み込まれます。これは "リテラルロードオーダー"の問題を解決します。それはちょっと複雑で、あなたは今スキップしたいかもしれない全く異なる問題（http://www.alistapart.com/articles/imagemap/）です。

しかし、 "見かけのロードオーダー"の場合は、<DIV id="1" style="visibility: hidden">オプションのDIVで始まります。その後、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

Answer 4

一部は、ほとんどのブラウザは自動的にこれを行います。画像が非表示の場合、ダウンロードされません。