2010/02/08 by マッチー
jQueryで画像の遅延読み込みを可能にするlazyload
画像の多いページは、どうしても読み込むのに時間がかかってしまう。
そこで、画像の読み込みのタイミングを遅らせてページの表示を早めようという試みを可能にするのが、Lazy Loadというプラグイン。
やっていることは、画像を読み込ませる部分に別の軽い画像を代替的に読み込ませることで負荷を軽減するような感じ……で合ってるのかな。
まずは上記のリンク先からlazyloadをダウンロードしてくる。あとjqueryがないと動かないので、持ってなければダウンロードしておく。
まあ、たとえばこんな感じで画像を呼んでいるソースがあったとする。
これでimgタグで呼んでいるsample.jpgやsample2.jpgがdummy.gifに置き換わる。event: “click”というのは画像をクリックしたらsample.jpgなどを読み込むようにしている。デフォルトはページスクロールで画像を読み込むようになっているらしい。
dummy.gifを1px×1pxのgif画像とかにしておけば一つのページに100個とか200個くらい画像を出しているときなんかはそれなりに読み込みが早くなる……と思う。