javascriptの画像読み込み part2

追記: http://www.appelsiini.net/projects/lazyload がお勧めです。



このjavascriptは、例えば、ブラウザのスクロールが必要な、大量の画像が張ってあるページで、一番下までユーザーが閲覧することが無い場合に、画像のダウンロード量を減らす、といったことに使えます。
仮に、10画面分の長さがあるとして、すべての画像のサイズの合計が10MBの場合で、スクロールしないで閉じた場合には1MBで、半分スクロールした場合に5MB、といったトラフィックの量になります。
ユーザーの回線が遅い場合や、古いブラウザの場合や、javascriptがOFFの場合で、そういったユーザーがメインの場合には使えません。

dummyThumbnail.2010-03-28.tar.gz をダウンロードします。

$ tar xvzf dummyThumbnail.2010-03-28.tar.gz
$ cd dummyThumbnail
$ cp -i ../../jquery-1.4.2.min.js .
$ php sample.php > sample.html
$ cat sample.html | sed 's/dummyThumbnail.js/dummyThumbnail.min.js/' | sed 's/sample.html/sample2.html/' > sample2.html

http://jquery.com/ で jquery-1.4.2.min.js をダウンロードして同じディレクトリに入れます。
出来上がった sample.html にブラウザでアクセスします。
ブラウザのスクロールなどに反応して画像が読み込まれます。