android scrollview 懒加载图片,基于Vue的懒加载图片，懒加载模块

懒加载在日常工作中是相当的常用的，这里介绍一个简单的会用方法，原理就不赘述了，网上有很多经验和demo，也方便自己以后使用。

这是一个比较简介和方便的库,直接用v-lazy替换原本的src即可

开始使用

安装

npm i vue-lazyload -S

在根目录下的main.js中

import Vue from 'vue'

import App from './App.vue'

import VueLazyload from 'vue-lazyload'

// 使用默认参数

Vue.use(VueLazyload)

// 自己配置参数

Vue.use(VueLazyload, {

preLoad: 1.3, // 预加载高度的比例

error: 'dist/error.png', // 加载失败图片

loading: 'dist/loading.gif', // 加载中图片

attempt: 3, // 尝试加载次数

// 不常用参数的一些说明

// 懒加载模块，滚动到对应视图区域之前才加载该模块，模块内容较多时不推荐使用

// 加载速度可能会为用户带来不好的体验，适用于一些信息模块，或者一些非主体模块，适用于少部分用户关注的模块

lazyComponent: true

// 默认的方法有['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']

listenEvents: ['scroll'],

adapter: {

loaded({bindType,el,naturalHeight,naturalWidth,$parent,src,loading,error,Init}) {

// 加载完成之后的回调方法

},

loading(listender, Init) {

console.log('正在加载')

},

error(listender, Init) {

// 加载错误之后的回调方法

}

},

// 每次加载都会执行filter中的方法，参数为listener, options

filter: {

progressive(listener, options) {

const isCDN = /qiniudn.com/

if (isCDN.test(listener.src)) {

// 如果图片是从七牛云得到，就修改loading的默认图片

listener.loading = listener.src + '?imageView2/1/w/10/h/10'

}

},

webp(listener, options) {

if (!options.supportWebp) return const isCDN = /qiniudn.com/

if (isCDN.test(listener.src)) {

// 满足webp条件就加载webp格式的图片

listener.src += '?imageView2/2/format/webp'

}

}

}

})

new Vue({

el: 'body',

components: {

App

}

})

组件内使用

/*懒加载模块*/

模块内容

{

...

methods: {

handler (component) {

console.log('加载完该模块的回调')

}

}

}

参数说明

参数

说明

类型

默认值

loading

加载时的图片

String

-

error

加载错误时的图片

String

-

preload

预加载高度时的比例

String

-

attempt

请求图片错误时，尝试次数

Number

-

listenEvents

监听的事件

Array

scroll等

adapter

适配器

Object

-

filter

图片url过滤

Object

-

lazyComponent

是否能懒加载模块

Boolean

false