微客导航 » 文章资讯 » 分享一个精简的vue.js 图片lazyload插件实例

分享一个精简的vue.js 图片lazyload插件实例

2024-02-27 17:04:04 247

这个插件未压缩版本只有7.62kb，很精简，支持img标签和background-img资源的lazyload。支持vue.js1.0和vue.js2.0

安转

$npminstallvue-lazyload--save

使用方法

//main.js

importVuefrom'vue'
//importVueLazyload
importVueLazyloadfrom'vue-lazyload'

//usecustomdirective
Vue.use(VueLazyload)

//useoptions
Vue.use(VueLazyload,{
preLoad:1.3,
error:'dist/error.png',
loading:'dist/loading.gif',
attempt:1
})

newVue({
el:'body',
})

这里可以定制所有加载中和加载失败加载成功的样式，

API

Options

params type detail preLoad Number proportionofpre-loadingheight error String errorimgsrc loading String loadingimgsrc attempt Number attemptscount

demo下载地址：vue-lazyloadz_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

分享一个精简的vue.js 图片lazyload插件实例

热门推荐

随机推荐