【Vue】vue-lazyload图片懒加载的使用

原创于 2021-07-06 09:53:00 发布 · 48 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了如何在 Vue.js 应用中使用 vue-lazyload 插件进行图片懒加载。首先通过 npm 安装 vue-lazyload，然后在 main.js 文件中配置，设置加载占位图片。接着在组件中，将 img 标签的 src 属性替换为 v-lazy，从而实现延迟加载，提升页面性能。

npm i vue-lazyload -S

在main.js文件中进行基本配置

import VueLazyload from 'vue-lazyload'

// 注册懒加载事件
Vue.use(VueLazyload, {
  // 设置加载的占位图片
  loading: require('./assets/images/loading.png')
})

将img标签传统的src属性换成v-lazy

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>