浅谈vue中使用图片懒加载vue-lazyload插件详细指南

前端之家收集整理的这篇文章主要介绍了浅谈vue中使用图片懒加载vue-lazyload插件详细指南前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在vue中使用图片懒加载详细指南

分享给大家。具体如下:

说明

当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点。

使用方式

使用vue的 vue-lazyload 插件

插件地址:

案例

demo:

Installation 安装方式

npm

CDN

CDN:

用法

main.js 在入口文件

Vue.use(VueLazyload)

// 或者添加VueLazyload 选项
Vue.use(VueLazyload,{
preLoad: 1.3,error: 'dist/error.png',loading: 'dist/loading.gif',attempt: 1
})

new Vue({
el: 'body',components: {
App
}
})

在入口文件添加后,在组件任何地方都可以直接使用把 img 里的:src -> v-lazy

把之前项目中img 标签里面的 :src 属性 改成 v-lazy

参数选项说明

key 图片失败的时候图片成功的时候图片监听或过滤器

想要监听的事件

您可以通过传递数组来配置想要使用vue - lazyload的事件

监听器的名字。

如果您遇到这个插件重新设置加载的麻烦,这是很有用的

当你有某些动画和过渡的时候。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章

description default options