2011-12-14 10 views
1

私は、ホームページに2500以上の画像がある商用アフィリエイト関連のウェブサイトのデザインを与えられました。私が画像のロードを容易にすることを考えている2つの方向は、怠惰な画像読み込みスクリプトを利用することです。jQuery遅延画像をスロットリングで読み込んでいますか?

私はjQuery JAIL(Async Image Loader)スクリプトを使いこなしてきました。ページが読み込まれたときにすべての可視イメージを読み込むように設定しました。その後数秒後、折りたたみの下にあるページの残りの画像がすべてダウンロードされます。これは通常、2400 +画像に似ています。

ブラウザが2400イメージをダウンロードするように指示されたとき、基本的にフリーズしたり、少なくともスクロールバーがフリーズして終了するまで問題があります。

JAILに似ていますが、何らかのタイプのスロットルが可能なjQueryイメージ読み込みスクリプトはありますか?本当にページをフリーズするのを助ける何か。

私はCSSのスプライトも見ていますが、さまざまな技術的理由や時間的制約のため、実現できない可能性があります。

+0

これらのイメージはコンテンツまたはデザイン/レイアウトの一部ですか? –

+0

これらの画像はどの程度のサイズですか? – jzila

+0

はデザイン上の問題のように聞こえますが、スロットルは一般に['queue'](http://api.jquery.com/queue/)を使って管理できます。 – zzzzBov

答えて

4

これはjQuery pluginを使用してください。例here 長いWebページの画像の読み込みが遅れます。ビューポートの外側の画像(Webページの可視部分)は、ユーザがスクロールする前にロードされません。

多数の大きな画像を含む長いWebページでレイジーロードを使用すると、ページの読み込みが高速になります。ブラウザは可視イメージをロードした後、レディ状態になります。場合によっては、サーバーの負荷を軽減するのにも役立ちます。

0

イメージが小さい場合は、イメージを小さくして一度に読み込んで、すべてを<div>の要素にバックグラウンドイメージを設定して表示することを検討してください。例:

http://jsfiddle.net/XXRwD/

関連する問題