プログラミングの勉強日記

2020年6月26日　Progate Lv.148
ポートフォリオ作成中
以前作成したWebページの読み込みに時間がかかってしまうのが気になり、ポートフォリオを作成する前にこの問題に対処する。

読み込みが遅い原因

考えられる原因
　1. GitHubホスティングを利用して公開しているので、GitHubホスティング自体がWebページの読み込みが遅い？
　　→GitHubは関係なさそう。
　　　作成したサイトに原因がある、、

　2. 画像が原因で読み込みが遅い？
　　→たしかに多くの画像を利用しているので、これに原因があるかも！
　　　そこでlazy loadという方法を用いて解決する。

lazy load

　多くの画像を含むWebページでは、表示速度が遅くなってしまう。HTMLでimgタグを使用して画像ファイルを読み込んでいる。この場合、ページ上のすべての画像がフルサイズで読み込まれている。しかし、下の画面の画像など現時点では必要のない画像もあるので、すべての画像を読み込む必要はない。そこで、画像の遅延ロードを行う。画像の遅延ロードは指定したときにユーザーの画面に画像をロードする。（スクロールの位置に応じて必要な分だけ画像を取得する）

lazy loadの使い方

　まず、GitHub（ https://github.com/tuupola/lazyload ）からlazyload.jsとjQueryを読み込む。

HTMLファイル

<!-- Google CDNからjQuryを読み込む -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- ダウンロードしたlazyload.jsの読み込み -->
<script src="js/jquery.lazyload.min.js"></script>

　imgのファイルパスをsrcからdata-originに変更して、遅延読み込み対象とわかるようにclassをつける。

HTMLファイル

<img class="lazy" src="画像のURL" data-original="画像のURL">

JSファイルを読みこませた記述のあとに挿入する。

JSファイル

$(function() {
    $('img.lazy').lazyload();
});

オプション

threshold

　読み込みのタイミングをずらしたいときに使う。マイナスの値を大きくするほど読み込みは遅くなる。

$(function() {
    $('img.lazy').lazyload({
        threshold: -200
    });
});

event

　画像が画像内に表示されたときではなく、指定したイベントが発生したときに表示される。
　clickは画像をクリックしたとき、mouseoverは画像にオンマウスしたときに表示される。

$(function() {
    $('img.lazy').lazyload({
        event: 'click'
    });
});

effect

　画像が表示されるときのエフェクトを設定できる。effect_speedを併用することで、速さも変更できる。

$(function() {
    $('img.lazy').lazyload({
        effect : 'fadeIn',
        effect_speed: 2000
    });
});

感想

　大量の画像を使っていたので、読み込みが遅くなっていた。lazy loadを使うことでWebページの読み込み速度を改善することができた。

参考文献

http://cly7796.net/wp/javascript/plugin-jquery-lazyload/
https://alaki.co.jp/blog/?p=2527