vue-lazyload で画像遅延読み込みプラグインを使用する

ここで、vue-lazyload 画像遅延読み込みプラグインの説明例を共有します。これは良い参考値であり、皆さんの役に立つことを願っています。

1. まず、vue-lazyload のリファレンスパッケージを npm

npm install vue-lazyload --save-dev

2 にダウンロードします。もちろん、このパッケージだけでは不十分で、他のパッケージもインポートします。ファイル

3. 次に、vue-lazyload

import Vue from 'vue';
import App from './App.vue'
import router from './router';
import VueLazyload from "vue-lazyload"

4 の図を参照してください。 html

Vue.use(VueLazyload, {
error: 'static/error.png',//这个是请求失败后显示的图片
loading: 'static/loading.gif',//这个是加载的loading过渡效果
try: 2 // 这个是加载图片数量
})

JS

<template>
 <p>
  <ul id="container">
   <li v-for="img in list">
    <img v-lazy="img">
   </li>
  </ul>
 </p>
</template>

css

<script>
 export default {
 data () {
  return {
    list: [
    &#39;http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb&#39;,
    &#39;http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb&#39;,
    &#39;http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb&#39;,
    &#39;http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb&#39;,
    &#39;http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb&#39;,
    &#39;http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb&#39;,
    &#39;http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb&#39;,
   ]
  }
 }
 }
</script>

以上は、今後皆さんのお役に立てれば幸いです。

関連記事: vue-cli プロジェクトにおける ProxyTable のクロスドメインの問題

React コンポーネントでの refs の使用方法

webpack での devtool の使用の詳細な説明

以上がvue-lazyload で画像遅延読み込みプラグインを使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。