jQueryで画像の遅延読み込みを可能にするlazyload

まっちー

まっちー

画像の多いページは、どうしても読み込むのに時間がかかってしまう。

そこで、画像の読み込みのタイミングを遅らせてページの表示を早めようという試みを可能にするのが、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サイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

プログラマのまっちーです。酒が大好きです。ある一定量のお酒を飲むと壊れたレディオモードに入り、同じことを繰り返す癖があります。宜しくお願いいたします。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL