ポートフォリオのような1ページに多くの画像を利用しているサイトにアクセスすると表示速度が遅い場合があります。そうなってしまうとユーザーがイライラしてサイトから離脱してしまう可能性がとても高くなります。
これを改善する為のプラグインが「jquery.lazyload.js」です。
jquery.lazyload.jsの設定方法
プラグインのインストール
まず最初にプラグインのインストールです。
インストールは以下からできます。
ファイルにソースコードを追加する
プラグインを動かすため以下をファイルに追加してください。
①JS
HTMLよりも下に記述してください。
<script src="jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
$(function() {
$('img.lazy').lazyload();
});
</script> ②HTML
data-originalとclassにlazyを追加してください。
<img data-original="addImage.png" class="lazy" > これで設定は完了です。
ちなみにこのプラグインを使用している有名なサイトで「ラクマ」があるので参考に動きをみてください。
まとめ
サイトの表示速度が遅いとサイトの評価が下がります。
設定するのはとても簡単なので是非今回のプラグインを利用してみてください。
