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

发布时间：2020-12-17 02:45:17 所属栏目：百科来源：网络整理

导读：在vue中使用图片懒加载详细指南，分享给大家。具体如下：说明当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。使用方式使用vue的 vue-lazyload 插件插件地址: 案例 demo

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

分享给大家。具体如下：

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

使用vue的 vue-lazyload 插件

插件地址:

demo：

npm

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的事件

监听器的名字。

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

description	default	options