当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载。
这样做能防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等，可以有效的减少首屏加载时间
在某一个页面向服务器发起请求大量的图片请求，而首屏只需要显示几张图片
下面介绍一个适用于vue的图片懒加载插件，vue-lazyload(文档)
npm install vue-lazyload --save
import VueLazyLoad from 'vue-lazyload' //引入
Vue.use(VueLazyLoad, {
loading: require('@/assets/images/loading.gif')
})
//第二个参数为这个插件的配置项，可以参考上面的文档设置配置项
<img v-lazy="item.imgurl"></img>
在vue中使用图片懒加载vue-lazyload插件 使用方式 使用vue的 vue-lazyload 插件插件地...
参考： 【vuejs插件】vue中使用图片懒加载vue-lazyload插件详细指南
使用vue-lazyload实现图片懒加载 1、安装插件 cnpm install --save vue-lazy...
实现图片只加载首屏用到的，其他的等滚动到再加载这就是图片懒加载 使用vue-lazyload插件实现 安装vue-...
分享一个基于vue的图片懒加载的指令插件，使用起来也是极其简易。图片的懒加载，可以减少首页首次加载的数量，减少服务...
什么是图片懒加载？ 当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。...
1.路由懒加载 使用vue-router的方法 2.图片懒加载 组件缓存 使用vue的
Vue 项目使用 Vue-lazyload 做图片懒加载。 下载 下载 Vue-lazyload 的包NPM包 引...
Vue 项目使用 Vue-lazyload 做图片懒加载。 下载 下载 Vue-lazyload 的包NPM包[h...
Vue插件开发初体验——（懒加载） 前言 闲来无事，想自己开发一个简单的Vue懒加载插件，能力的提升我觉得是可以通...
本文标题：在vue中使用图片懒加载插件
本文链接：https://www.haomeiwen.com/subject/mpkcrctx.html
网友评论