[/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]