プログラミングの勉強日記
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を読み込む。
<!-- 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をつける。
<img class="lazy" src="画像のURL" data-original="画像のURL">
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