vue-lazyload实现图片懒加载

时间:2022-07-24
本文章向大家介绍vue-lazyload实现图片懒加载，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

安装

npm i vue-lazyload -S

main.js全局引入

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
  preLoad: 1.3,
  error: '', //错误图占位
  loading: '',//加载图占位
  attempt: 1,
  throttleWait: 300 //延迟图片加载时间
})

图片懒加载

 <img v-lazy="item.imgurl" alt />

背景图懒加载

 <div v-lazy:background-image="item.imgurl"></div>

随机文章
Javascript知识点必读
最近更新