いろいろ準備中

[JavaScript] 画像の遅延読み込みメモ

4月 16th, 2008 Posted in javascript, web開発

※prototype.js 1.5.1を使っています。

ちょっと前の記事ですが、ウノウラボの記事を参考に画像の遅延読み込みを実装してみました。

ウノウラボ Unoh Labs: 画像の遅延読み込みから引用

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を呼び出すタイミングとしては「ページ全体のDOMツリーの読み込みが完了したタイミングがいいでしょう」とあります。
おそらくjavascriptでDOMツリーの読み込みが完了したタイミングを判定すると思うのですが、困ったことに私はjavascriptが得意ではありませんのでどうすればいいのかわかりませんでした。
ネットで調べたところ、domready.jsというものがあり、これを使えばうまくできそうです。

使い方は簡単でした。DOMツリーの読み込みが完了したタイミングで実行したい関数を Event.domReady.add で登録するだけです。

Event.domReady.add(function() {
  ...
});

こんな感じの実装になりました。

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;  // 元の値に戻す
  });
};
 
Event.domReady.add(Foo.stopLoadingImages);

最後でEvent.domReady.addを追加しただけです。

これでタブを切り替えるときやwindow.onload時などに、Foo.loadImagesで元の画像を呼び出せば画像の遅延読み込みができます(Fooは適当なものに変えてください)。

ただfirebugで確認したところ、画像のうち数枚は読み込まれてしまいました。ちょっと気持ち悪いのですがいまのところよい対策も見つかりません(なにゆえjavascriptに疎いもので…)。

あまりよい方法ではなさそうですが、最初から画像は小さなものを表示しておいてimgタグのclass属性とかに画像のURLやキーワードを仕込んでおき、このあたいをもとに画像を読み込むことはできないかと考えました。
たとえば、表示したい画像がfoo.jpegで、小さな画像ファイルがsmall.gifの場合、まず、

<div id="foo">
<img class="/images/foo.jpeg" src="/images/small.gif" />
</div>

のようにまず出力しておいて、

Foo = {};
Foo.images = [];
Foo.stopLoadingImages = function() {
  $$("#foo img").each(function(image) {
    image.orgSrc = image.className; // この辺を変更
    Foo.images.push(image);
  });
};
Foo.loadImages = function() {
  Foo.images.each(function(image) {
    image.src = image.orgSrc;
  });
};
 
Event.domReady.add(Foo.stopLoadingImages);

のように、classNameの値から呼び出すファイルパスを直接得る、もしくは作るというのはどうなのでしょうか？
とりあえずこれでうまくいったので、ほかにいいものが思いつくまではこれでやってみようかと思います。

これじゃだめだよとか、もっと他にいい方法あるよとかあったら教えてください。

YUIとかｊQueryには遅延読み込みが行えるライブラリがあるようなので、時間があれば試してみたいですね。

・参考URL
ウノウラボ Unoh Labs: 画像の遅延読み込み
window.onload 前でも DOM 処理が可能なら通知してくれる domready.js – METAREAL

コメントを投稿する