关于专题【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')
})

三、使用方法

<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>
0
浏览:349

0 条评论

发表评论

电子邮件地址不会被公开。

你必须允许浏览器启用JavaScript才能看到验证码

Scroll Up