昨天部门会议，领导提出一个需求，就是当一个前端页面有上百个图表或者其它元素，对应的接口有许多时，为了体验效果，不能一次性加载全部的数据，只有当元素滚动到可视区域内时，再进行相应接口的调用，也就是数据的懒加载。

如下图所示：目前出现在可视区域内部的只有图表0 图表1 图表2 图表34个元素，控制台也能拿到对应的索引或者dom元素。

当滚动页面出现图表4 图表5出现在可视区域时，控制台也能拿到对应的索引或者dom元素

而且页面回滚的时候，不会再次请求接口。

能拿到当前可视区域展示的dom元素，就可以获取对应的接口数据了。

下面介绍实现方法：

html部分：

样式部分：

script部分：

完成！！！

如果不是图片，而是其它元素，也可以通过此方法实现，只需要将html中的img部分更换掉，script中的getData方法中添加对应的接口调用即可。

多多积累，多多收获！！！

下面的内容仅为了凑字数，与文章无关，可忽略！！！

Vue是一款非常流行的JavaScript框架，它能够帮助开发者更加方便地构建交互式界面。而Vue懒加载数据则是Vue中非常基础、常见的一个功能。

懒加载数据是指在使用Vue构建交互式界面时，不会在页面初始渲染时一次性加载所有的数据，而是等到用户需要浏览、操作相关数据时，再通过Ajax等方式动态加载数据，这样可以有效地减少页面的初始化耗时。Vue中提供了两种懒加载数据的方式：组件级别的懒加载和路由级别的懒加载。

组件级别的懒加载是指只有当用户需要浏览某个组件时，Vue才会加载相关组件需要的数据，而不是在页面初始渲染时一次性加载所有组件。组件级别的懒加载可以通过Vue的异步组件实现。

我们通过Vue的异步组件API import() 导入了异步组件，这样只有当用户需要浏览组件 AsyncComponent 时，才会加载该组件所需的数据。另外需要注意的是，需要使用箭头函数而非普通的函数，从而实现异步加载。

路由级别的懒加载是指只有当用户进入某个路由时，Vue才会加载该路由所需的模块和组件。路由级别的懒加载可以通过改造Vue的路由器实现。

我们通过重写Vue的路由器 routes 属性，对每个路由进行懒加载。只有当用户进入 /home 或 /user 路由时，才会加载对应的组件 Home 或 User 。从而实现路由级别的懒加载。

总的来说，Vue懒加载数据是Vue中非常基础、常见的一个功能，能够有效地减少页面的初始化耗时，提高用户体验。组件级别的懒加载和路由级别的懒加载两种方式都是通过异步加载实现的，并且都十分方便易用。需要注意的是，在使用懒加载时，需要考虑到组件或路由的依赖关系，避免影响页面的正常渲染。