遅延ロードを実装できる。
ここでいう遅延ロードとは、最初はページの見える部分（viewport）の外側にある画像を読み込まずに、スクロールして見えたら読み込みすること。
Unveil.jsは、遅延ロードの定番jQueryプラグインのLazy Loadからエフェクト等を削除して動作や容量を軽くしたもの。
less than 1k.と書いてある。
Unveil.js
http://luis-almeida.github.io/unveil/
使い方
src属性に、ダミー画像のURLを入れ
data-src属性に、画像のURLを入れる
retina用の画像URLも指定できる
[javascript]
[/javascript]
javascriptを使えないユーザーに対してはnoscriptを利用すると良い
[javascript]
[/javascript]
ページを読み込んだ時に、unveilを実行する。
[javascript]
$(document).ready(function() {
$(“img”).unveil();
});
[/javascript]
例えば、特定の要素に含まれるimgのみに反映したいときは以下
idがlistの要素に含まれるimg
[javascript]
$(document).ready(function() {
$(“#list img”).unveil();
});
[/javascript]
Threshold機能
デフォルトではスクリーンに表示されたときに画像を読み込み始めるが、
以下のようにすると、スクリーンに表示される200ピクセル手前で画像を読み込み始める。
[javascript]
$(“img”).unveil(200);
[/javascript]
Callback機能
2番目の引数にコールバック関数を指定できる。
画像が読み込まれたときに実行される。
CSS3やjQueryのanimation機能を使って
画像が表示されたときにエフェクトをかけたりできる。
[javascript]
img {
opacity: 0;
transition: opacity .3s ease-in;
}
$(“img”).unveil(200, function() {
$(this).load(function() {
this.style.opacity = 1;
});
});
[/javascript]
Trigger機能
viewport（ページの見える部分）の外側にありまだ読み込んでない画像を必要なときに読み込むことができる。
[javascript]
$(“img”).trigger(“unveil”);
[/javascript]