画像の遅延読み込み

具体例

具体例として、idが「foo」のブロック要素に含まれる画像を遅延読み込みさせる場合を考えてみます。 prototype.jsをライブラリとして利用している場合、次のように遅延読み込み処理を記述することができます（便宜上、「Foo」を名前空間代わりに使用しました）。

Foo = {};

Foo.images = [];

Foo.stopLoadingImages = function() {

  $$("#foo img").each(function(image) {

    image.orgSrc = image.src;

    image.src="1x1.gif";   // 小さな画像に置き換え

    Foo.images.push(image);  // 置き換えた要素をとっておく

  });

};

Foo.loadImages = function() {

  Foo.images.each(function(image) {

    image.src = image.orgSrc;  // 元の値に戻す

  });

};

あとは、「Foo.stopLoadingImages」と「Foo.loadImages」を必要なタイミングで実行するようにするだけです。

http://labs.unoh.net/2008/01/lazy-loading-of-images.html