プラカンブログ
プラカンブログ

プラカンブログ

【画像の遅延読み込み】~今さらだけど勉強してみた~

 

少しずつ暖かい日も増え、外にも出たい気分になりますが、
その気持ちをぐっとおさえ、引きこもりをしています、はたやまです。

先日、画像の遅延読み込みについて改めて調べなければと感じることがありました。
今回は、画像の遅延読み込みについて自分の覚書きという意味もこめて
このブログを進めていきたいと思います。

 

1.画像の遅延読み込み

WEBサイトを表示させる際、通常は画像をすべてダウンロードしてから画像が表示されます。
まだ表示されていない、下部の画像も含めてすべて画像を読み込んでしまいます。

そこで、これを改善するのが「画像の遅延読み込み」です。

画像の遅延読み込みは、ブラウザ画面スクロールして表示領域にはいった画像を読み込んでいく仕組みのことです。
必要な分だけ画像を読み込むので無駄な読み込みが発生せずにページを軽くし、効率化できます。

 

2.画像遅延の実装

1)scriptタグを記述

lazysizes.min.jsを読み込むscriptタグを記載します。

<script src="lazysizes.min.js"></script>

 

2-1)imgタグを記述

遅延読み込みを実行する画像の<img>タグのclassに"lazyload"、
src属性にはダミー画像を、data-src属性に表示させる画像のパスを指定します。
iframeの際も同様にdata-srcにはパスを指定します。

<img data-src="image.jpg" class="lazyload" />
<iframe class="lazyload" data-src="動画のURL"></iframe>

 

2-2)backgroundに指定した画像を遅延読み込み

CSSのbackgroundプロパティに背景画像を指定では、data-src属性やクラスは指定することができません。
backgroundプロパティで読み込んだ画像を遅延読み込みしたい場合は、ls.unveilhooks.min.jsというファイルを使用します。
unveilhooksプラグインを使用し、背景画像やscriptタグも遅延ロードできるようにします。

使い方は、imgタグと同じようにclass="lazyload"を指定し、data-bg属性にパスを指定します。

<div class="lazyload" data-bg="bg-img.jpg">

background以外のサンプルコードは下記URLを参考。
https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/unveilhooks

 

 

以上、画像の遅延読み込みでlazysizesを使用した場合の一例でした。
画像の遅延読み込みのライブラリはたくさんありますし、簡単に導入できるものが多いようです。

Google Chromeでは遅延読み込みができる機能が実装されています。

参考:Chromeがネイティブlazy-loadをサポート、JSなしで画像を遅延読み込み可能に

この記事は HATAYAMA が書きました。

プラカン(PLUS DESIGN COMPANY)が目指す3つの顧客満足

  1. ホームページのできあがりに
    満足していただく

    • お客様のご要望、目的の達成
    • ホームページの利便性や満足度の向上
    • ブランドイメージの向上 など
  2. 仕事の進め方に
    満足していただく

    • スケジュール遅延のないスムーズな進行
    • お客様の理解度、知識、経験に応じた親切で分かりやすい進行
    • セキュリティ意識の高い安全な進行管理 など
  3. サポート・フォーローに
    満足していただく

    • 公開後も安心なサーバー保守、CMS保守、コンテンツの保守管理
    • 集客、コンバージョンを強化するためのアクセスログ解析
    • 集客、コンバージョンを強化するためのコンテンツの改善 など

詳しくはWEBコンサルティングをご覧ください

WEBコンサルティング

ホームページに関するご要望がございましたら、お気軽にご相談ください。

Contact Us

お問い合わせをお考えの方

お問い合わせ

Estimate

お見積りをご希望の方

お見積り

お電話でのお問い合わせ