前端如何实现内容懒加载

我们可以使用到vue-observe-visibility ，该插件的参数提供了该模块是否可见。当元素进入或离开视口时，它可以触发事件或回调函数。这在实现像懒加载图片或无限滚动等功能时非常有用。以下是如何使用它的基本步骤：

npm install vue-observe-visibility --save
# 或者
yarn add vue-observe-visibility

 我们可以在全局导入并且使用该组件（main.js文件夹）

import Vue from 'vue'

import VueObserveVisibility from 'vue-observe-visibility'

Vue.use(VueObserveVisibility)

 在实际场景我们可以这么使用：

当页面滚动到该位置，触发函数。根据该模块是否可见来改变observeVisible对象下面的值，以实现模块的显示隐藏达到内容懒加载的效果。