目次
v-lazy-imageとは
v-lazy-imageは、ビューポートへ画像が入って来たときに、画像を遅延読み込みするコンポーネントライブラリです。
【動画サイズ：150KB】
環境
| Vue | 2.6.10 |
| v-lazy-image | 1.4.0 |
インストール
以下のnpm、CDNを使ってインストールします。
npm
npm install v-lazy-image
UMD
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/v-lazy-image.min.js"></script>
gitリポジトリは以下から取得できます。
導入手順
step
1ライブラリの取り込み
-
ES6等の場合
import { VLazyImagePlugin } from "v-lazy-image"; - UMDの場合
const VLazyImagePlugin = window['VLazyImage'].VLazyImagePlugin;
step
2メソッドを設定
上記で取得したVLazyImagePluginを
Vue.useに取り込みます。
Vue.use(VLazyImagePlugin);
new Vue({
el: '#app',
});
step
3テンプレートを準備
各種コンポーネントを設置します。
サンプルはケバブケースで記載しています。
<div id="app">
<v-lazy-image
src="https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
src-placeholder="https://cdn-images-1.medium.com/max/80/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
></v-lazy-image>
</div>
サンプル
See the Pen Vue.jsで画像を遅延読み込みする「v-lazy-image」 by カバの樹 (@kabanoki) on CodePen.dark
さいごに
ビューポートへ画像が入って来たときに、画像を遅延読み込みするコンポーネントライブラリです。
今日はこの辺でー
