[JS]画像の読み込み・表示を工夫するためのスクリプト集

昨日の「Lightboxのいい点・悪い点」のエントリーから少し派生して、画像の読み込みや表示を工夫するためのスクリプトをピックアップします。

Emulate Ajax Image Loading with CSS

画像の表示前に、ローディングの背景画像が表示されます。

Emulate Ajax Image Loading with CSS

ImageLoader Utility -YUI

YUI Libraryを使用して、画像を読み込むタイミングをコントロールします。

ImageLoader Utility -YUI

サンプルでは、タイマー表示、マウスオーバーやクリックをトリガーとして表示、スクロールして可視範囲に含まれたら表示などがあり、これらを組み合わせて画像の表示タイミングを調整することも可能です。
また、クラス名でのコントロールも可能です。

Lazy Load Plugin for jQuery

jQueryのプラグインで、画像がスクロールして可視範囲にふくまれたら、画像の読み込みを開始します。

Lazy Load Plugin for jQuery

使用するには、dimensions.js(jQueryのプラグイン)も必要です。
また、jQuery 1.1.4ではバグがあるとのことなので、昨日リリースしたjQuery 1.2でも動作しないかもしれません。
jQuery 1.2のリリース情報

lazierLoad - Javascript Image Lazy Loader for Prototype

Prototypeのプラグインで、上記の「Lazy Load」と同様に、画像がスクロールして可視範囲に含まれたら、画像読み込みを開始します。

lazierLoad - Javascript Image Lazy Loader for Prototype

lazierLoadでは、画像の読み込み時にローディング画像が表示されます。