画像の遅延読み込みをしたいとき、何を使用しますか？
私は「lazysizes」を発見してからというもの、ずっとこいつにお世話になっています。
個人的に、画像をimgタグではなくbackgroundに指定するのが好きなのですが、lazysizesだと背景画像も簡単に遅延読み込み可能ということで愛用するようになりました。
また、jQueryなどのフレームワークに依存せずに動作でき、軽量なうえにiframeやウィジェットなどのスクリプトなども遅延読み込みさせることができるという優れもの。
作者はあのhtml5shivを使った人らしい。これは信頼できますね。
では、使い方をメモしてこうと思います。
基本的な使い方
まずは必要となるファイルをダウンロードし、読み込みましょう。
Githubからダウンロードできます。
たくさんファイルがありますが、基本となるのはlazysizes.min.js（またはlazysizes.js）というファイル。
<script src="lazysizes.min.js"></script>こんな感じでscriptタグで読み込みます。async属性は任意でいいみたい。
これで、imgタグの画像とiframeが遅延読み込み可能になる。使い方は下の通り、data-srcに画像のパスを記述して"lazyload"とうクラスを付けるだけ。
<img data-src="image.jpg" class="lazyload" />
<iframe class="lazyload" data-src="//www.youtube.com/embed/ZfV-aYdU4uE"></iframe>私は画像の遅延読み込みの際、srcが空な状態が気になるので、一応1pxのダミー画像を入れて使ってます。
<img src="dammy.jpg" data-src="image.jpg" class="lazyload" />この時、srcに表示したい画像の低画質バージョンをセットしておくことで、デモページのトップに表示されているような実装になります。先にサイズの低い画像をセットしておくことで一瞬だけ何もない状態が見えてしまうのを防げます。
背景画像の遅延読み方法
背景画像を遅延読み込みさせるには、もう一つ付属ファイルを読み込みます。
ls.unveilhooks.js（ls.unveilhooks.min.js）というファイルです。
ファイルの場所は、lazysizes → pluginsフォルダ → unveilhooksフォルダの中。
こいつを、lazysizes.min.jsを読み込んでいたところに追加します。
<script src="lazysizes.min.js"></script>
<script src="ls.unveilhooks.min.js"></script>これで、背景画像の遅延読み込みが可能になります。
使い方は通常の遅延読み込みと同様、lazyloadというクラスを付け、 data-bgという属性に画像ファイルへのパスを記述するだけ。
<div class="lazyload" data-bg="bg-img.jpg">
<!-- 中身 -->
</div>こんな感じ。
こうするとlazyloadクラスを付けた要素に直接style属性が追加されbackground-imageが指定されるが、別パターンとして次のような使い方もできると書いてある。
Note: In case you want to lazyload a background image via a class you can do so by using the addClasses option:
lazyloadというクラスはスクリプトでlazyloadedというクラスに変換されるので、その変換後のクラスを利用するというものらしいですね。
<style>
.bg-stage.lazyloaded {
background-image: url("lazyloaded-bg.jpg");
}
</style>
<div class="bg-stage lazyload">
<!-- content -->
</div>この使い方はまだしたことないので、検証できたら具体的にどのようなどうさをするのか追記したいと思います。
その他unveilhooksの便利機能
実は先ほど読み込んだls.unveilhooks.jsには、背景画像以外にも便利な遅延読み込み機能が含まれています。
ビデオやCSSやスクリプト、ウィジェットといったものが遅延読み込み可能になります。
以下、Githubより。
<!--CSS -->
<div class="lazyload" data-link="my-style.css">
</div>
<!-- ビデオ: -->
<video class="lazyload" data-poster="poster.jpg" preload="none">
<!-- sources -->
</video>
<!-- スクリプト/ウィジェット -->
<div class="lazyload" data-script="module-name.js">
</div>
<!-- require.js * example(よくわらない) -->
<div class="lazyload" data-require="module-name"></div>
<!-- CSS & JS -->
<div class="lazyload" data-script="my-script.js" data-link="my-style.css">
</div>詳しくは こちらをみてください。
この ls.unveilhooks.jsの他にもたくさんプラグインがあるので、さらに色んなことができると思います。
フェードインで表示させる方法
画像が読み込まれた時にフェードインで表示させたい場合は、CSSで実現可能です。
背景画像の遅延読み込み方法のところでも軽く触れましたが、lazysizesでは、遅延して読み込ませたい対象につけておいた"lazyload"というクラスが読み込みされる瞬間にlazylodedというクラスに変換されています。
なので、次のようにCSSを設定しておくことでフェードインで画像が読み込まれます。
.lazyload{
opacity: 0;
}
.lazyloaded{
opacity: 1;
transition: all 0.5s;
}
同様に、単純なフェードイン以外も色々実装できそうですね。
その他にも様々な使い方ができるみたいなので、新しい使い方が何か分かれば随時更新していこうと思います。
実行タイミングをずらす
以下の記事にて新しく紹介しております。
