php 延时 加载图片,vue-lazyload - 图片延迟加载实例教程

Usageimport 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

描述：

例子：

error

描述：图片加载失败后，的默认图片

例子：error: 'dist/error.png',

loading

描述：图片加载过程中，默认显示的图片设置

例子： loading: 'dist/loading.gif',

attempt

描述：

例子：

listenEvents

描述：监听的事件，默认值 ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']

例子：listenEvents: [ 'scroll' ]

adapter

描述：

例子：

filter

描述：过滤图片的路径，默认{ }

例子：

lazyComponent

描述：

例子：

实战例子在main.js文件添加：

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {

// 设置默认显示的图片

loading: require('common/image/default.png')

})

在需要用到延迟加载页面