Lazy Load （画像遅延読み込み）
個人的に大量に画像のあるページを作成する必要があったので、画像の遅延読み込みを行って負荷を減らそうとしてみた。その中で使いやすかった Lazy Load を使用したのだけれども、ちょっとはまった箇所もあったので、メモ。
1.x系と2.x系の2種類がサイトで紹介されているが、1.x系はjqueryを使用する必要があり、2.x系は単独で動かす事ができる。
1.x 系のインストールと使い方
よく使われている 1.x系のインストールと使い方
インストールは、Git hub に公開されている1.x系のファイルをダウンロード
jquery.lazyload.js を自分のサイトのスクリプト置き場に設置する。head内にjqueryとjquery.lazyload.jsのリンクを追加。パスは自分の環境に直して使う
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
とりあえず、デフォルトの動作を確認するので、img タグに class="lazy" と srcで書くファイルのパスを data-original として記載。
最後にスクリプトで lazyload を呼び出す。画像より前にスクリプトを書くと動かない事もあるので、公開元のドキュメント通り、最後に書くのがいいかな。
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
<script>
$(function() {
$("img.lazy").lazyload();
});
</script>
画像が問題なく表示されていれば、スクリプトが正しく動作しているが、ちょっと分かりづらいのでオプションを付けて動作を確認してみる
オプションを付ける場合は、lazyload()内に{}を追加し、付けたいオプションを付ける。とりあえず、分かりやすくするために、thresholdとeffectを付ける。これで、画面外に表示されているはずの画像がスクロールした際に読み込まれ表示されるのが分かる。
$(function() {
$("img.lazy").lazyload(
{
threshold: 10, // 10pxの距離まで近づいたら表示する
effect: "fadeIn" // フェードインアニメーションで表示
}
);
});
オプション一覧
| event | |
|---|---|
| click | クリックまたはタップ時に表示 |
| mouseover | マウスカーソルを上に乗せた表示 |
| sporty | *1 |
| effect | |
|---|---|
| fadeIn | 浮き上がるアニメーションで表示 |
| effect_speed | |
|---|---|
| fast | 素早く表示 |
| slow | ゆっくり表示 |
| 数値 | 数値で表示スピードを指定（1000で1秒） |
| threshold | |
|---|---|
| 数値 | 指定したピクセルの距離まで近づいたら表示。たとえば、100なら、100ピクセルの距離まできたら表示する |
| failure_limit | |
|---|---|
| 数値 | 画面外にある画像のチェック枚数（デフォルトでは1）*2 |
*1 公式サイトでは、以下のコードで遅延処理できると書いているが、jqueryのバージョンの問題か動かない。
$(function() {
$("img.lazy").lazyload({
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {
$("img.lazy").trigger("sporty")
}, 2000);
});
遅延処理で行う場合は以下の様に記載して動かすと良いかも。デモでは2秒後になると画像が表示される。
var hoge = function() {
$("img.lazy").lazyload();
}
$(window).on("load", function() {
var timeout = setTimeout( function(){
$("img.lazy").lazyload();
}, 2000);
});
*2 公式サイトの説明文では、以下の様に説明されている。
アンロードされた画像を介してページプラグインループをスクロールした後。画像が見えるようになったかどうかループチェックします。デフォルトでは、ビューポートの外側の最初の画像が見つかるとループは停止します。これは次の仮定に基づいています。ページ上の画像の順序は、HTMLコード内の画像の順序と同じです。レイアウトによっては、これが間違っている可能性があります。 failure_limit設定でロード動作を制御できます。
横並びのブロックレイアウトがある場合など、DOM順だとスクロールと意図しない画像の順番になっていることがあるので複数の画像のチェックをすることでそれを防ぐ方法です。
その他
オプション以外にも色々とできることがあるので、いくつ記載。まずは、プレースホルダーの指定。こちらは、通常のsrcに画像が表示されるまでの代替画像を入れることができます。
<img src="/imo_common/images/demo/loading.gif" class="lazy" data-original="/imo_common/images/demo/demo1.jpeg">
普通にすると代替画像が分かりにくいので、クリックで表示する様にしたデモを用意しました。これだと画面外の画像を表示しようとした際、代替画像が表示されていて、クリックしないと表示されないようになっています。
最後にブラウザのジャバスクリプトが無効になっている場合の対応ですが、基本は noscript で対応してフォールバックする方法が公式で紹介されている。
<img src="/imo_common/images/demo/loading.gif" class="lazy" data-original="/imo_common/images/demo/demo1.jpeg"><noscript>
<img src="/imo_common/images/demo/demo1.jpeg" /></noscript>
ただ、問題なのはプレースホルダーを指定している場合、ジャバスクリプトを無効にしていると、プレースホルダー用の画像とフォールバック用の画像の二つが出てしまう問題がある。なので、それを回避するために、class="lazy" にcssを追記しておく必要がある。
.lazy {
display: none;
}
こうすることでジャバスクリプトが無効になっていてフォールバック用の画像が表示されても、プレースホルダー用の画像はnoneになっているので出ない。デモも用意した。ジャバスクリプトを無効にした場合、下の二枚はnoscriptがないので、表示されないようにした。
2.x 系のインストールと使い方
次は、jqueryがなくても動く 2.x系のインストールと使い方
インストールは、Git hub に公開されている2.x系のファイルをダウンロード
lazyload.js を自分のサイトのスクリプト置き場に設置する。head内にlazyload.jsのリンクを追加。パスは自分の環境に直して使う。jqueryはいらない。
<script src="lazyload.js"></script>
1.x系とは違うのは、classをlazyload deta-original を data-src として指定する。プレースホルダーを指定したい場合は、1.x系と同じでsrcで指定する。
<img class="lazyload" src="/imo_common/images/demo/loading.gif" data-src="/imo_common/images/demo/demo1.jpeg">
最後にスクリプトでlazyloadを指定する。
<script>
lazyload();
</script>
公式サイトを見た限りでは、1.x系のようなオプションの指定はできないようなので、基本的にはこれで動かす。
一応、今のところ使うかもしれない遅延実行の処理も。と言っても、1.x系の現在と同じで、settimeout を使って実行を遅らせるだけ。
<script>
window.addEventListener("load", function(event) {
let timeout = setTimeout(function() {
lazyload();
}, 1000);
});
</script>
一応デモも用意。
なんだか調べるのに疲れたな