目标
减少资源加载可以明显的优化页面加载的速度，所以可以减少页面载入时立即下载的图片的数量，以提高页面加载速度，其他的图片在需要的时候再进行加载。
思路
想要实现以上的目标，有几个地方需要思考。
1、如何判断哪些图片需要立即加载，哪些可以晚些再加载？
2、如何控制图片在指定的时候加载？
对于第一个问题，页面打开就会被用户看到的图片肯定需要立即加载，其他的可以延后。即在视窗中的图片需要立即加载。那么如何判断图片是否在视窗内呢？getBoundingClientRect可以返回元素的大小及其相对于视口的位置（）
可以通过图中top和right的值判断图片是否在视窗中。
对于第二个问题，先不给img指定src，而是将图片链接地址存放再元素的data-src属性（自定义）中，需要加载的时候再赋值给src，才会开始下载图片。
实现
思路有了，我们开始实现。用以下HTML进行测试
图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
测试性配文，测试图片懒加载
