概要
jQueryライブラリ lazyload の基本的な実装方法用途
- アクセス時は画像を読み込まず、画像の表示位置までスクロールしたタイミングで画像を読み込む（遅延読み込み）
- ファーストビューが表示されるまでの時間を短縮する（ページロードの高速化）
注意点
- Googleの画像検索で引っかからない（SEO的にマイナス）
検証ブラウザ
- Microsoft Edge
- IE11
- IE10
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
実装方法
公式サイト : https://appelsiini.net/projects/lazyload/ダウンロード : https://github.com/tuupola/jquery_lazyload
HTML
<div class="example-classname">コンテンツ 1</div>
<div class="example-classname">
<!-- 読み込む画像のパスを「data-original」属性に記述 -->
<img class="lazyload" src="/img/dummy/dummy_200_200.png" data-src="/img/dummy/dummy_600_400.png" />
</div>
<div class="example-classname lazyload" style="background-image: url('/img/dummy/dummy_200_200.png')" data-src="/img/dummy/dummy_600_400.png" />
JS
$(function () {
'use strict';
$('.lazyload').lazyload({
threshold: 10, // 読み込み閾値 px
effect: 'fadeIn' // 読み込みエフェクトも指定できる
});
});
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
