vue-lazyload - 画像の遅延読み込みのサンプル チュートリアル

Usage

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
　　preLoad: 1.3,
　　error: 'dist/error.png',
　　loading: 'dist/loading.gif',
　　attempt: 1
})

Options

パラメータの説明

preLoad

例：エラー：「dist/error .png」 ,

loading

新郎前方-ure-画像設定でオンにしてください\

説明: リッスンされたイベント、デフォルト値 ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']

例: listenEvents: [ 'scroll' ]

adapter

Description:

Example:

filter

Description: 画像をフィルタリングするパス、デフォルト { }

ulecess:

|

実践例

 在main.js文件添加：
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
　　// 设置默认显示的图片
　　loading: require('common/image/default.png')
})
在需要用到延迟加载页面
<img width="60" height="60" v-lazy="item.imgurl">

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