Vue ベースの遅延読み込みプラグイン vue-view-lazy の紹介

この記事では主に、表示領域に入った後に画像やその他のリソースを読み込むことができる Vue ベースの遅延読み込みプラグイン vue-view-lazy を紹介します。その内容は非常に優れているので、ここで共有します。参考に。

vueベースの遅延読み込みプラグイン

目的:表示領域に入った後に画像やその他のリソースをロード

インストールして使用します

1. vue-view-lazy.minを直接ダウンロードしますdist ディレクトリを使用します

2. npm を使用してインストールします
   

<p id="app">
  <span v-view-lazy @model="handleModel"></span>
</p>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="./dist/vue-view-lazy.min.js"></script>
<script>
  Vue.use(vViewLazy.default,{});
  new Vue({
    el:&#39;#app&#39;,
    data:{
      msg:&#39;数据&#39;
    },
    methods:{
      handleModel(){
        console.log(&#39;出现了&#39;);
      },
    },
  })
</script>

npm:

$ npm install --save-dev vue-view-lazy

vue-view-lazy を紹介します

.メインファイル

import vView from 'vue-view-lazy'
Vue.use(vView,{
  error:'../../static/images/loading.png',
  loading:'../../static/images/loading.gif',
});

写真の遅延読み込み

.vueファイル

<template>
  <ul id=&#39;img&#39;>
    <li class="in" v-for="(item,i) in imgs" :key="i">
      <img src="#" alt="图片" v-view-lazy="item.src">
    </li>
  </ul>
</template>

<script>
  export default {
    data () {
      return {
        msg: &#39;Welcome to Your Vue.js App&#39;,
        imgs:[
          {src:&#39;../../static/images/img1.jpg&#39;},
          {src:&#39;../../static/images/img2.png&#39;},
          {src:&#39;../../static/images/img2.jpg&#39;},
          {src:&#39;../../static/images/img3.jpg&#39;},
          {src:&#39;../../static/images/img4.jpg&#39;},
          {src:&#39;../../static/images/img5.jpeg&#39;}, 
        ]
      }
    },
    mounted(){
    },
  }
</script>
<style scoped>
  ...
</style>

データの遅延読み込み

.vueファイル

rrリー

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

Vue のカスタム命令に基づいてボタンレベルの権限制御を実装する方法

vue コンポーネント名の概要

以上がVue ベースの遅延読み込みプラグイン vue-view-lazy の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。