jQuery SEO

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

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

jQuery Lazyの公式はコチラ

導入方法

導入方法は簡単。

• JqueryとJquerylazyloadを読み込む
• 対象のimgタグに「data-original」を追加（遅延したい元画像を値に設定）、「class」に「lazy」を追加。
• 必要ならimgタグのsrcにダミー画像を設定。
• lazylodを実行

<!-- jquery CDN -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<!-- jquery lazyload  CDN -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js'></script>

<!-- 対象の画像 -->
<img class="lazy" src="images/dammy.jpg" data-original="images/example.jpg">

<!-- 遅延読み込み実行 -->
<script>
$(function(){
    $('.lazy').lazyload({
        effect : 'fadeIn',
        threshold :200
    });
});
</script>

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