ta9to
ta9to
Jun 6, 2018 · 3 min read

概要

画像が多いVue.js実装のwebアプリに`vue-lazyload`を導入してンダリングタイムの短縮を実施したので、使用したライブラリの紹介をします。

使ったもの

https://github.com/hilongjw/vue-lazyload

A Vue.js plugin for lazyload your Image or Component in your application.

(これ系では一番スターついてる 2018/05)

インストール

$ npm install vue-lazyload -D

(`-D`は` — save-dev`の省略オプション)

CDNもあります。
https://unpkg.com/vue-lazyload/vue-lazyload.js

<script src=”https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
Vue.use(VueLazyload)

</script>

組み込み

// main.js
window.Vue = require(‘vue’);
import VueLazyload from ‘vue-lazyload’;
Vue.use(VueLazyload, {
preLoad: 1.3, // 事前ロードする高さの割合指定
error: ‘images/error.png’, // エラー時に表示する画像指定
loading: ‘images/loading.gif’, // ロード中に表示する画像指定
attempt: 1 // ロード失敗した時のリトライの上限指定
});

Components
遅延ロードしたいimgタグのsrcを以下のように`v-lazy`で指定します。


<img v-lazy=”title.image” />

表示エリア外の画像はスクロールイベントをフックに表示エリアの高さから必要なコンテンツが読み込まれるようになりました。

まとめ

https://caniuse.com/#search=srcset
srcsetが主要ブラウザでだいたい実装されてretina対応とか要らなくなったみたいにlazy loadもさっさとネイティブで実装されればいいのになーと思います。

vueのコンポーネントシステムが優秀でこういったサードパーティの実装をさくっと組み込めちゃうので立ち上げ期の最適化よりとにかくスピード優先で、出して改善出して改善をやりたいときにはこういった良くできたフレームワークは良い仕事をしてくれるなーと感じました。

以上、Vue.jsアプリに簡単にlazyloadを組み込める`hilongjw/vue-lazyload`の紹介でした。

Nyle Engineering Blog

ナイル株式会社のエンジニアブログです。ナイル社内で利用している技術の情報や、社内の様子などを発信しています。

ta9to

Written by

ta9to

電子コミックストア開発中 https://manga.app-liv.jp

Nyle Engineering Blog

ナイル株式会社のエンジニアブログです。ナイル社内で利用している技術の情報や、社内の様子などを発信しています。

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade