画像の遅延ローディング

画像の遅延ローディングについて調べてみた。

参考にしたのはこの辺:

• lazierLoad – Javascript Image Lazy Loader for Prototype – Bram.us
• Vanilla JavaScript Lazy Load Plugin

仕組みは案外単純。適当なタイミングで遅延ローディングしたいimg要素のsrc属性を適当な画像（blank.gifとか）に置換、表示が必要になったらsrc属性の値を元の値に戻してあげるだけ。

あとは、表示が必要になるタイミングを判断するロジックと組み合わせればOK。画像のところまで画面がスクロールされたかとか、display値が切り替えられるタイミングとか。

// prototype.jsを利用した場合
Foo = {
  images: [],
  stopLoadingImages: function() {
    $$("div#foo img").each(function(image) {
      image.orgSrc = image.src;
      image.src = "/img/blank.gif";
      Foo.images.push(image);
    });
  },
  loadImages: function() {
    Foo.images.each(function(image) {
      image.src = image.orgSrc;
    });
  }
};
// あとは適当なタイミングで
// Foo.stopLoadingImagesと
// Foo.loadImagesを実行するだけ

// このコードがきちんと動くかどうかまだ確かめてないので注意…