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

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

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

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

なんて素敵な！

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

試してみた

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

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

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

試した手順

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

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

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

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

imgタグ　

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

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

背景画像　

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

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

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

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

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

iframe　

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

<iframe class="lazyload" width="560" height="315" data-src="https://www.youtube.com/embed/dF495ERjRUo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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

• tweet
• share