Vue.js環境で画像の遅延読み込み(vue-lazyload)を行う

概要

Vue.j環境の自作のWebアプリで画像読み込みに時間がかかることから、vue-lazuloadを使って画像の遅延読み込みを行う。

経緯

知識がなく当初、lazyload.jsを使って試みましたが動作しませんでした。

結果

ただしく画像遅延読み込みができた

やったこと

vue-lazyload.min.jsを読み込み

 <script src="https://cdn.jsdelivr.net/npm/vue-lazyload@1.3.3/vue-lazyload.min.js"></script>

vue-lazyloadはjsdeliverを使用

Vuelazyloadの設定

Vue.use(VueLazyload, {
    loading: 'img/no_img.png',
    attempt: 1
  })

イメージの読み込み

<!-- <img class="content_img" :src="videoInfo.img_url" v-bind:style="disp_prm.c_img_blur"> -->
<img class="content_img" v-lazy="videoInfo.img_url" v-bind:style="disp_prm.c_img_blur">

参考記事

画像の遅延読み込みを「Vue-Lazyload」で 簡単に実装する
【Vue.js】画像の遅延読み込みを実現する為にvue-lazyloadを導入してみた
Lazy Loadで画像を遅延ロードする方法
※Lazy Load何？とか 、なぜ使うの？ とかも記載されてるます

lazyload.jsを使って動作しなかったときの設定【個人用のメモ】

やったこと

• lazyloadのjsを読み込む
  

<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>

• imgタグをの画像指定をsrcからdata-srcに変更(※下記はVueで記述)
• imgタグのclassにlazyloadを追加

<!-- <img class="content_img" :src="videoInfo.img_url"> -->
<img class="content_img lazyload" :data-src="videoInfo.img_url">

• bodyの最後でlazyload()を実行

参考

SEOを考慮したGoogle推奨の画像の遅延読み込み処理まとめ