javascriptの画像読み込み

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



この記事は javascript で画像の読み込みを扱う場合の例です。

こちらに新しい記事があります。
javascriptの画像読み込み part2

imgタグが表示されている画面内に来たら読み込む javascript のサンプルです。
ダウンロードは下記になります。
dummyThumbnail.2010-03-15.tar.gz

使い方は下記になります。
http://jquery.com/で jquery-1.4.2.min.js をダウンロードして同じディレクトリに入れます。
下記のコマンドを実行し sample.html にブラウザでアクセスします。

$ php sample.php > sample.html

ブラウザは windowsXP の firefox3.6, opeara10.10, ieTeserの6,7,8, chrome4.0.249.89, safari4.0.5 でテストしました。
firefox のみ 3.5.8 を linux 上でテストしています。
画像のサイズ指定無しや文字などが読み込み後に追加されたりするなどの、画面構成が変化すると失敗します。
chrome の innerWidth などは setTimeout で指定した関数内で取得すると、古い内容を取得するかもしれません。

修正版です。
dummyThumbnail.2010-03-22.tar.gz
主な修正点は下記になります。
横のスクロールバーに対応しました。
setTimeout する時間の指定を分けました。

$ php sample.php > sample.html
$ cat sample.html | sed 's/dummyThumbnail.js/dummyThumbnail.min.js/' | sed 's/sample.html/sample2.html/' | sed 's/init.js/init.min.js/' > sample2.html

修正版です。
dummyThumbnail.2010-03-25.tar.gz
主な修正点は下記になります。
eval の部分を修正しました。 (settimeout)
グローバル変数が常に2個消費されるようになりました。(dummyThumbnail, dT$)

$ php sample.php > sample.html
$ cat sample.html | sed 's/dummyThumbnail.js/dummyThumbnail.min.js/' | sed 's/sample.html/sample2.html/' > sample2.html
$ cat sample.html | sed 's/dummyThumbnail.js/dummyThumbnail.min.min.js/' | sed 's/sample.html/sample3.html/' | sed 's/init.js/init.min.min.js/' > sample3.html

http://dev.opera.com/articles/view/efficient-javascript-ja/?page=2