lazyloadっぽいもの

kaakaa/PPTGallery
シコシコ改修中。

スライドのページが多い時に最初に全ての画像を読み込むと重くなりそうなので、lazyload的なのを適用しようとしてみた。

Lazy Load Plugin for jQuery
前から目をつけていたコレを組み込んで見たけど、スクロールでなくjQueryのtoggleで画像を表示させるのが原因か、スライド表示後にウインドウサイズに合わせてリサイズするのが原因か分からないけど、lazyloadさせるべき画像が表示されなかった。

なので、別の方法を探してると下記のエントリを発見。
Lazy loading of images (jquery) without scrolling | Suman Srinivasan's Code Blog

$("img.lazyload").each(function() {
    $(this).attr("src", $(this).attr("original"));
    $(this).removeAttr("original");
});

単純にimgタグのsrcにダミーの画像を表示させておき、画像表示するイベントが起こった所に上のスクリプトを入れて、srcのダミー画像とoriginalに設定していた本来の画像のURLを入れ替えるだけ。

画像表示後の処理とかは実装してあるので、コレだけで十分そう。