Vue.jsでlazysizesを使って画像遅延ロードを実装する

プラグイン

lazysizes

JQueryなしでも遅延ロードが出来るということで人気のプラグインです。npmやyarnを使って簡単にVueプロジェクトに組み込みができます。

npm i lazysizes
もしくは
yarn add lazysizes

これだけでインストール完了です。

CDN版もあるので、vue-cliなどを使っていない場合は、HTMLヘッダーなどでCDNを読み込むこともできます。

lazysizes | cdnjs

使い方がとてもシンプルなので、非Vueプロジェクトでも使えます。

組み込み

組み込みは簡単で、使用したいコンポーネントで

<script>
.
.
import 'lazysizes';
.
.
</script>

を宣言するだけです。

使い方

Vueコンポーネントでimportしてしまえば、あとは遅延ロードするHTML側で、imgタグに「lazyload」クラスを付与して、遅延ロードする画像のURLを「data-src」に指定すればOKです。

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

オプションもあって、レスポンシブデザインやRetinaなどの高解像度ディスプレイにも対応してあります。

<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
    image2.jpg 600w,
    image3.jpg 900w" class="lazyload" />

かつてはlazyloadだけでも外注したら高額案件だったのに、いまとなってはコマンド一発で実装できるのですから、便利になりましたね。