1

私のウェブサイトには10​​0枚の画像があるウェブページがあり、ブラウザから一度に1つずつ読み込まれる画像を見るのはエレガントではありません。

それをよりエレガントで見栄えよくする方法はありますか？

4

5 に答える 5

4

画像を遅延読み込みすることができます。つまり、ブラウザに表示されたときにのみ画像が読み込まれます。これは、以下を使用するだけで機能します。

$("img.lazy").lazyload();

ただし、ページの読み込み時に表示される画像のファイルサイズが非常に大きい場合、これを防ぐためにできることはあまりありません。

これをよりユーザーフレンドリーにするために私が以前に使用したアイデアは、 ajaxローダーの背景画像を持つ各img要素を配置することです。これにより、少なくとも何かがロードされているように見えます。次に、画像が読み込まれると、読み込み中の画像がオーバーレイされます。div

編集：@ afaf12が指摘しているように、非常に小さい画像を使用している場合は、最新のコメントを参照して、 CSSスプライトを使用するのが適切な解決策になります。StackOverflowを含む多くの大規模なサイトは、これらを利用しています。これは、すべての画像に対して100のHTTPリクエストが行われるのではなく、1つのHTTPリクエストが行われ（つまり、1つの画像のダウンロード）、CSSを使用してこの画像をさまざまな場所に配置することを意味します。

これを自分で作成するという面倒な作業を防ぐために、さまざまなCSSスプライトジェネレーターも利用できます。

于 2012-05-24T10:11:10.097 に答える
2

画像が非常に小さいため、これはcssスプライトが役立つ状況である可能性があります。

100以上の小さな画像ではなく、1つの大きな画像があります。

特定の画像を表示する場合は、次のように背景座標を指定する必要があります。

div#div1 {background-position:0px -100px}
于 2012-05-24T10:16:23.010 に答える
2

見栄えを良くする1つの方法は、画像が読み込まれたときに画像をフェードインさせることです。

$('img').css('opacity', '0.0').load(function(){
  $(this).animate({'opacity': '1.0'});
});

デモ： http： //jsfiddle.net/Guffa/gzFFN/

于 2012-05-24T10:22:20.127 に答える
0

http://code.google.com/p/jquery-appear/

オブジェクトが「表示」されたとき、つまり画面に表示されたときにトリガーされるjQueryappearイベント。

すべての画像のコンテナを作成し、実際の画像が画面に表示されたときにのみ読み込みます。

于 2012-05-24T10:10:44.667 に答える
0

別の興味深い解決策は、このスタックリンクにあります。これはすべてのコンテンツに適用されますが、回答で提供されるコードは画像の読み込みにも適用できます。リンク

于 2012-05-24T10:15:09.710 に答える