vue-progressive-imageとは

始めにボヤっと表示されるlazy load「vue-progressive-image」

 

vue-progressive-imageは、読み込み始めはボヤッとしてから表示される lazy load ライブラリです。

 

インストール

以下のnpmCDNを使ってインストールします。

npm

npm install vue-progressive-image

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-progressive-image.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/MatteoGabriele/vue-progressive-image

 

導入手順

1. ライブラリの取り込み

(1)webpack等の場合 ※モジュール版は未検証です。

import VueProgressiveImage from 'vue-progressive-image'

(2)WEBページの場合

const VueProgressiveImage = window.default;

2.メソッドを設定

Vue.use に上記で取得した VueProgressiveImage を読み込ませます。

Vue.use(VueProgressiveImage, {
  blur: 30,
  delay: 2000
});

let app = new Vue({
  el: '#app',
  data: {
    cnt : 4
  },
  methods: {
    reload: function(){
      location.reload();
    }
  }
});

3. テンプレートを準備

<progressive-img><img> のように利用します。

&lt;div id=&quot;app&quot;&gt;
  &lt;p&gt;&lt;button @click=&quot;reload&quot;&gt;reload&lt;/button&gt;&lt;/p&gt;
  &lt;ul&gt;
      &lt;li v-for=&quot;n in cnt&quot;&gt;
        &lt;progressive-img 
          src=&quot;https://unsplash.it/1920/1080?image=10&quot;
          placeholder=&quot;https://unsplash.it/1920/1080?image=10&quot;
          &gt;&lt;/progressive-img&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

サンプル

>>専用ページで確認する

 

さいごに

読み込み始めはボヤッとしてから表示される lazy load ライブラリでした。

このライブラリは動きが面白いのですが、CDNで読み込みをしてしまうと window.default を専有してしまうので、他のライブラリとぶつかることがあるかも
そこだけ注意です。

今日はこの辺でー

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください