jQueryいらずの画像遅延読み込みスクリプト「lazysizes」

jQueryいらずの画像遅延読み込みスクリプト「lazysizes」

jQueryいらずの画像遅延読み込みスクリプト「lazysizes」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 初心者におすすめのクレジットカードランキング
  • このエントリーをはてなブックマークに追加

lazysizesは、画像を遅延読み込みさせるためのスクリプトです。jQueryは必要なく、単体で動作します。

デモは以下ページで確認できます。

デモページを見る

スポンサードリンク

lazysizesの使い方

GitHubからlazysizesをダウンロードします。

lazysizes.min.jsをサーバーにアップロードして、以下コードを記述して読み込みます。

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

HTML内で、遅延読み込みしたい画像を以下のようにマークアップします。

<!-- non-responsive: -->
<img data-src="image.jpg" class="lazyload" />
<!-- responsive example with automatic sizes calculation: -->
<img
data-sizes="auto"
data-src="image2.jpg"
data-srcset="image1.jpg 300w,
image2.jpg 600w,
image3.jpg 900w" class="lazyload" />
<!-- iframe example -->
<iframe frameborder="0"
class="lazyload"
allowfullscreen=""
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

レスポンシブイメージやiframeにも対応しています。

ちなみに、pictureを使ったレスポンシブイメージにもちゃんと対応しています。pictureを遅延読み込みに対応させる場合、srcset属性をdata-srcset属性に変更します。

<picture>
<source media="(max-width: 600px)" data-srcset="image1.jpg">
<source media="(max-width: 900px)" data-srcset="image2.jpg">
<source media="(max-width: 1200px)" data-srcset="image3.jpg">
<img data-src="image.jpg" class="lazyload">
</picture>

あとがき

非常に簡単に画像の遅延読み込みを実現することができます。

サイトに画像の遅延読み込みを実装したい場合は、ぜひ参考にしていただければと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。