【六】lazyload懒加载

关于专题【vue开发音乐App】 对于多图页面，如果一次性加载所有图片可能会因为网络拥堵造成页面卡顿，用户体验不佳。我们可以采用懒加载的方法解决这个问题，使用第三方插件——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') }) 三、使用方法

• // 使用v-lazy代替:src // 同样支持背景图片的写法

本文章由javascript技术分享原创和收集