对于多图页面，如果一次性加载所有图片可能会因为网络拥堵造成页面卡顿，用户体验不佳。我们可以采用懒加载的方法解决这个问题，使用第三方插件——vue-lazyload 。页面渲染时先加载首屏的图片，其他图片等到用户滚动到相应位置才加载，这样能大大节省流量开销，同时加快页面渲染速度。
效果截图
一、安装插件
cnpm i vue-lazyload -S
二、在main.js中引入并使用插件
import VueLazyload from 'vue-lazyload'
// 直接使用
Vue.use(VueLazyload )
// 或者另外配置一些参数
Vue.use(VueLazyload, {
error: require('common/image/error.png'),
loading: require('common/image/default.png')
})
三、使用方法
<ul>
<li v-for="img in list">
// 使用v-lazy代替:src
<img v-lazy="img.src" >
// 同样支持背景图片的写法
<div v-lazy:background-image="img.src"></div>
</li>
</ul>
网友评论