Unveil.jsというlazy-loadの軽量版のソースを読んでみる。

前置き

てことで、情報も多く、画像遅延読み込みに有用なlazy-load
そして、今回紹介するのが、Unveil
Unveil⇒単語になじみがないですが、un-veil→ベールを取るってまんまの意味ですね。

設置方法

まずは、以下の2点のjavascriptを読み込む

  • JQuery.js
  • Unveil.js

で、イメージタグにアンベールを設定しておく。

$(document).ready(function() {
  $("img").unveil();
});

で、HTML内ののイメージタグは、
srcにダミー表示の画像(くるくる回る画像など)を、
data-srcに遅延表示したい(実際に表示したい)画像を設定。

<img src="bg.png" data-src="img1.jpg" />

ソースを読もう!

ソース内にコメント書いときます

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
;(function($) {
 
  $.fn.unveil = function(threshold, callback) {
 
    var $w = $(window),
        // 閾値の設定をチェック
        th = threshold || 0,
        // 画面のピクセル密度を判定して、高密度の場合はソースの切り替えが可能
        retina = window.devicePixelRatio > 1,
        attrib = retina? "data-src-retina" : "data-src",
        images = this,
        loaded;
 
    this.one("unveil", function() {
      //data-src(-retina)からsrcに上書き⇒画像表示
      var source = this.getAttribute(attrib);
      source = source || this.getAttribute("data-src");
      if (source) {
        this.setAttribute("src", source);
        if (typeof callback === "function") callback.call(this);
      }
    });
 
    function unveil() {
      var inview = images.filter(function() {
        var $e = $(this),
            wt = $w.scrollTop(), //画面に表示されてるトップの座標
            wb = wt + $w.height(), //画面に表示されてるボトムの座標
            et = $e.offset().top, //画像のトップの座標
            eb = et + $e.height(); //画像のボトムの座標
 
        /* 画像ボトム >= 画面トップの座標-閾値 && 画像のトップ座標 <= 画面ボトム+閾値
         * という条件が成り立つならtrue
         */
        return eb >= wt - th && et <= wb + th;
      });
 
      loaded = inview.trigger("unveil");
      images = images.not(loaded);
    }
 
    $w.scroll(unveil); // ウインドウのスクロールに対してトリガー
    $w.resize(unveil); // ウインドウのリサイズに対してトリガー
 
    //1回やっとく
    unveil();
 
    return this;
 
  };
 
})(window.jQuery || window.Zepto);

https://github.com/luis-almeida/unveil/blob/master/jquery.unveil.js

閾値の考え方はこんな感じ

HTMLでは、y座標が下にいくほどプラスなので、混乱しますが…
threshold

https://github.com/luis-almeida/unveil

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です