jQuery SEO

画像遅延ロードを簡単に実装する jQuery Lazy Load


SEO対策や画面表示の高速化のためにに有効な画像の遅延ロードを簡単に実装してくれる「jQuery Lazy Load」の導入方法メモ。

jQuery Lazyの公式はコチラ


目次[非表示]

導入方法

導入方法は簡単。

  • JqueryとJquerylazyloadを読み込む
  • 対象のimgタグに「data-original」を追加（遅延したい元画像を値に設定）、「class」に「lazy」を追加。
  • 必要ならimgタグのsrcにダミー画像を設定。
  • lazylodを実行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- jquery CDN -->
<script src='<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>">https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script></a>
<!-- jquery lazyload  CDN -->
<script src='<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js'></script>">https://cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js'></script></a>
 
<!-- 対象の画像 -->
<img class="lazy" src="images/dammy.jpg" data-original="images/example.jpg">
 
<!-- 遅延読み込み実行 -->
<script>
$(function(){
    $('.lazy').lazyload({
        effect : 'fadeIn',
        threshold :200
    });
});
</script>

導入方法が簡単でSEO対策、画面表示の高速化に使えるのでオススメです。


0 件のコメント :

コメントを投稿