如何用纯JS实现图片懒加载的Lazy加载过程？

本文共计2738个文字，预计阅读时间需要11分钟。

一、效果图如下：+ 上面的效果图+ 下面的效果图

效果需求如下：

1、还没有加载图片的时候，默认显示加载背景图

2、刚开始进入页面时，自动加载第一屏的图片

3、下拉界面，当一张图片容器完全显示时，自动加载下一张图片

一、效果图如下

上面的效果图，效果需求如下

1、还没加载图片的时候，默认显示加载图片背景图

2、刚开始进入页面，自动加载第一屏幕的图片

3、下拉界面，当一张图片容器完全显露出屏幕，即刻加载图片，替换背景图

4、加载图片的时候，有渐进显示图片效果

二、难点

1）如何Ajax请求数据

2）如何动态将json数据绑定到html中。

3）如何通过对图片的定位计算，触发图片懒加载机制

4）加分项，显示图片时有渐现的过渡动画

三、前期知识点

1）Ajax相关知识，XMLHttpRequest对象，所有现代的浏览器都支持此对象。