【lazysize】背景画像を遅延読み込みさせる方法

せっかく作ったホームページやWEBサイトなのに読み込みに時間がかかってしまったり読み込まれないなんてことはありませんか?

WEBページで表示速度はとても大事です。

特にECサイトだと表示速度が遅かったりページが遅いだけで売り上げにも影響してしまいます。

ページを少しでも早くする工夫が必要になってきます。

僕がよく使っているのはlazysizeです。

記述も簡単なのでおすすめです。

imgタグの画像を遅延させることだけでなく背景画像も遅延させることができます。

これによって表示速度もだいぶ変わってくると思います。

今回はlazysizeでimgタグや背景画像を遅延させる方法をお伝えしていきます。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

遅延させるためのファイルをダウンロードする

まずは遅延させるためには遅延に必要なファイルをダウンロードします。

下記のページ(Github)からダウンロードしましょう。

lazysize

imgタグを遅延させるならlazysizes.min.jsをダウンロードします。

背景画像を遅延させたい場合は、lazysizes.min.js + ls.unveilhooks.min.jsが必要になります。

「ls.unveilhooks.min.js」は「lazysizes」→「plugins」→「unveilhooks」の中に格納されています。

遅延のためのjsを読み込む

js読み込み

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

headタグ内やbody内に上記のように記述することでjsの読み込みが可能になります。

imgタグの遅延方法

html

<img src="lazy.jpg" data-src="img.jpg" class="lazyload" />

上記の記述で遅延読み込みができるようになります。

srcには最初に表示させたい画像を設定します。

data-srcには本来表示させる画像を設定します。

以上がimgタグの遅延読み込みの方法になります。

背景画像の遅延読み込み

背景画像を読み込む場合には先ほどもお伝えしたように「ls.unveilhooks.min.js」が必要になります。

js読み込み

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

htmlで記述する方法

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

背景画像を遅延させたいときはdata-bg属性を使います。

data-bgに読み込みたい画像を設定します。

たったこれだけです!

cssに記述する場合

html

<div class="bg-img lazyload">~</div>

記述は上記とほとんど変わりません。

属性をいれずクラス名(lazyload)を指定します。

css

<style>
.bg-img.lazyloaded {
	background-image: url("img.jpg");
}
</style>

遅延後はクラス名がlazyloadからlazyloadedに変わりますので遅延後のクラスに対して背景画像やスタイルを指定します。

画像をたくさん使っていて読み込みの遅いページであればimgタグと背景画像を遅延させることでページの読み込みもだいぶ改善されると思います。

ぜひ使ってみてください。

サンプル

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

jQuery
スポンサーリンク
blogをフォローする
フロントエンジニア&コーダーのためのマテリアルブログ

コメント

タイトルとURLをコピーしました