我们知道，影响用户访问网站体验的不仅仅是网页的交互和设计，还有用户访问网站的速度和流畅度。当服务器的硬件性能无法优化的时候，我们需要采取优化代码来提升网页的性能。

提升网页性能最简单的方法之一就是懒加载。顾名思义，它会延迟网页加载，呢么如何让延迟网页加载来做到提升性能呢？以下是懒加载的思路：

用户对图片和视频的请求带来的压力是大于对文字请求的压力的，那么我们就对图片和视频进行懒加载。

HTML中图片img和视频video等 中有元素属性 src，该属性的值存放的是这个图片或者视频的地址。

呢么，在网页加载的时候，它就会请求到全部的图片和视频。而懒加载就是让图片和视频不被直接的全部请求过来，也就是说，当用户看到这里的时候，再加载相应的图片和视频。这样，网页的性能和服务器的压力就此起彼落。

因此，我们不直接向img等元素赋值src的值，当用户看到这里时，再给src赋值。因此，我们给该元素创建一个新的属性值。

现在，网页中请求到了所有图片或者视频的地址，但是图片和视频不会加载。

接下来，我们要做用户访问到时加载的功能。

然后，我们来看两个方法：

当元素离顶部的距离小于滚动条高度时，将我们刚才设置的属性值赋值给src

我们再完善一下代码：添加滚动事件，循环判断元素距离顶部高度是否小于滚动条高度

each(index,item)是第index个元素，item是该元素

再添加一些显示元素的动画，就完成啦！