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

5107 ワード
CoffeeScript JavaScript slim Rails jQuery JavaScript テキストリンク

まえがき

サイトのページ速度改善のために、サイト内の画像を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

1 D配列パラメータ問題
C++最大公約数と最小公倍数を求める