lazysizes：背景画像もYoutube埋め込みも遅延読み込みするlazyloader

lazyloadって、imgタグの画像にしか使えないのかな。。

って思っていたけど、lazysizesを使えば

• imgタグはもちろんlazyload
• backgroundもlazyload
• iframeもlazyload（つまりYoutube埋め込みもlazyload）

なんて素敵な！

なお、他にも同じことができるlazyloadライブラリはあると思います。

試してみた

試してみたサンプルはこちら。以下の5つを配置しています。遅延がわかりやすいように、間を1000px開けています。

• imgタグ lazyloadしない
• imgタグ lazyloadする♪
• 背景画像 lazyloadしない
• 背景画像 lazyloadする♪
• iframe lazyloadする♪
• webpとjpg lazyloadしないpictureを使って767px以下はスマートフォン用画像
• 同上のlazyloadする版

iframeの「lazyloadしない」も配置すると、初期読み込みが多過ぎてわかりづらいので、配置していません。

試した手順

• GitHubからダウンロードして、

2. jsを読み込んで（背景画像に適用しないなら2行目は不要）

3. class=”lazyload”をつけるなど、htmlにlazyload対応を書く。

imgタグ

class=”lazyload”をつけて、data-src=にする。読み込み前の空白を避けたかったら、src=を追加して軽量画像を配置。

背景画像

class=”lazyload”をつけて、背景画像をdata-bg=で書く。（cssに背景画像を書かない）

lazyloadedというclass名が付与されるそうなので、下記もOK。私は背景画像はcssに書いてある方がわかりやすいし、レスポンシブで背景画像を分けている場合にも対応できるので、こっちが好きかも。

.lazyload-bg.lazyloaded {
　background-image: url(lazyload-bg.jpg);
}

iframe

Youtubeだったら、取得した埋め込みコードにclass=”lazyload”をつけて、src=をdata-src=にする。

参考にさせていただいた記事

背景画像も遅延読み込み可能なLazyload系ライブラリ「lazysizes」

						[prev](https://www.toccaville.com/blog/customize-google-calendar-embed-in-your-webpage/)
						[一覧に戻る](/blog/)
						[next](https://www.toccaville.com/blog/thumbnail-image-on-google-mobile-search-results/)