vue-lazyload解决图片懒加载问题

Posted 2023-05-04

参考技术A 在本次项目中 由于是一个相册展示的项目，相片数据通过月份进行分页，前端通过接口一次返回所有相片的链接，接口上并没有返回相片总数，嗯...加上有点懒 也就没做滚动加载了 然后发现了 vue-lazyload这个插件

本文只是简单记录一下插件用法 和有这个插件的存在 并不是什么高端文章哦~

官方简单事例子

通过这个简单例子就可以实现lazyload

看看请求

可以看出滚动后才开始加载后面的图片

看看dom结构可以看出 通过 监听页面展示区域 动态把把v-lazy里面的替换为data-src 替换为src 实现懒加载

嗯 这就很好的解决了 在不用再次分页的情况下请求大量图片请求的问题了

具体参见文档

vue + vue-lazyload 实现图片懒加载

1.安装

npm i vue-lazyload -S

2.配置 main.js

/***图片模板等懒加载 start ***/
import VueLazyload from ‘vue-lazyload‘
// 404图片
import errImg from ‘./assets/img/404.png‘
// loading图片
import loadingImg from ‘./assets/img/loading-spin.svg‘

// 图片懒加载配置
Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载高度比例
  error: errImg, // 图片路径错误时加载图片
  loading: loadingImg, // 预加载图片
  attempt: 1, // 尝试加载图片数量
  // set observer to true
  observer: true,
  // optional
  observerOptions: {
    rootMargin: ‘0px‘,
    threshold: 0.1
  }
})
/***图片模板等懒加载 end ***/

3.调用

<!-- 图片懒加载-->
<img v-lazy="picUrl" />

.