jQuery CoffeeScript 画像の遅延読み込み lazy-load

まえがき

サイトのページ速度改善のために、サイト内の画像をlazy-loadを使用して遅延読み込みします。
簡単に遅延読み込みを設定出来るので便利です。

使い方

準備

以下よりダウンロード。
jQery Lazy Load

コード(jQuery)

ポイント

• lazy-loadはjQueryに依存するので、jQueryの読み込みが必要。
• 遅延読み込みするためにクラス等をつける（ここでは.lazy)
• 画像にsrcを指定しない。(指定すると画像は表示されても遅延読み込みになっていない)
• 画像のwidthとheightを設定する必要があるようです。

lazy.index

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

<script>
$(function() {
    $("img.lazy").lazyload();
});

//オプションを付けたいときは以下のような感じで
$(function() {
    $("img.lazy").lazyload(
      threshold: 200,  //200pxのところまで近づいたら読み込む
      effect: "fadeIn",  //画像をfadeInさせる
      effect_speed: 3000,  //画像の表示を3秒間かける
    );
});

</script>

コード(slim + CoffeeScript)

ポイント

• 別途、jQueryとlazy-loadの読み込みが必要。
• data-originの設定をする。srcの設定をしない。
• jQueryのときと若干違うので注意。
• widthとheightを別途追加して下さい。

lazy.slim

= image_tag "", :class => 'lazy', 'data-original' => "img/example.jpg")

lazy.js.coffee

$ ->
  $("img.lazy").lazyload()

  #オプションを付けたいときは以下のような感じで
  $("img").lazyload
    threshold: 200
    effect: "fadeIn"
    effect_speed: 3000

参考

Lazy Load(画像の遅延読み込み)を実装する方法
Lazy Load Plugin for jQuery Plugin 見えるようになってから画像を読み込む
Lazy Load Plugin for jQuery