画像の多いページは、どうしても読み込むのに時間がかかってしまう。
そこで、画像の読み込みのタイミングを遅らせてページの表示を早めようという試みを可能にするのが、Lazy Loadというプラグイン。
やっていることは、画像を読み込ませる部分に別の軽い画像を代替的に読み込ませることで負荷を軽減するような感じ……で合ってるのかな。
まずは上記のリンク先からlazyloadをダウンロードしてくる。あとjqueryがないと動かないので、持ってなければダウンロードしておく。
<img src="sample.jpg" />
<img src="sample2.jpg" />まあ、たとえばこんな感じで画像を呼んでいるソースがあったとする。
<script>
$(function(){
$("img").lazyload({
placeholder: "dummy.gif",
event: "click"
});
});
</script>これでimgタグで呼んでいるsample.jpgやsample2.jpgがdummy.gifに置き換わる。event: “click”というのは画像をクリックしたらsample.jpgなどを読み込むようにしている。デフォルトはページスクロールで画像を読み込むようになっているらしい。
dummy.gifを1px×1pxのgif画像とかにしておけば一つのページに100個とか200個くらい画像を出しているときなんかはそれなりに読み込みが早くなる……と思う。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
