Toccaville

blog

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

 Akiko Kubo

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>

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