1

1 つが表示され、もう 1 つが非表示の 2 つの 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>
4

4 に答える 4

2

ブラウザは、マークアップにリストされている順序で画像を要求する必要があります。したがって、a.jpg、b.jpg などを要求します。

非表示の DIV 画像をページと共にロードしたくない場合は、画像をロードしたいときに、クライアント側からその HTML を挿入する必要があります。

于 2009-07-15T14:39:12.197 に答える
0

他の人が言ったように、それはすべて、html マークアップでどの画像が最初にリストされるかにかかっています。

ただし、この問題を解決するには、すべての画像が完全に読み込まれるまで読み込みスピナーを表示することをお勧めします。

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

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

于 2009-07-15T21:07:52.143 に答える
0

すべての画像が 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

于 2009-07-15T15:21:02.563 に答える
0

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

于 2009-07-15T15:31:01.810 に答える