画像の遅延読み込み

今の仕事で大量に画像を表示するのでとても表示が重いです。
これをなんとかできないかと探していたら、見つけたのでやってみました。

1. prototype.js をダウンロードして、設置する。


2. 表示HTMLは別にしてあるので、HEAD内に以下を書き込む

<script type="text/javascript" src="prototype.js"></script>
<!-- このscript タグの中でもPrototype.jsの機能が使えます。-->
<script type="text/javascript">
if (window.Prototype) {

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;  // 元の値に戻す
  });
};
 }>
</script>

3. BODY内の画像を含む範囲を以下で囲む。
<div id="foo">～</div>

これだけで表示が劇的に速くなりました！すげー！！


あとはCakePHPでどうやって使うかを調べればいいかな♪←仕事用として