1，图片体积大，占用资源，影响用户体验，所以要按需加载，滚动到哪里，就加载哪里的图片
2，图片的加载是通过src属性的，所以核心原理就是更改src
3，步骤一，将img的src指向一个默认图片（体积小的空白图，或者高清图片的压缩版），注意src不可为空，否则浏览器依旧会向服务端发出请求
4，img上通过data-src属性，绑定真正的src指向
5，根据scrollTop,offsetTop,scrollLeft,offsetLeft等属性，来判断滚动位置。关于这些属性，可参考https://i.jakeyu.top/2016/09/04/scrollTop-offsetTop-scrollLeft-offsetLeft/
6，如果图片出现在可见区域，则将默认src替换成真实src
7，为了提升用户体验，可参考Img对象的两个属性：complete只是HTMLImageElement对象的一个属性，可以判断图片加载完成，不管图片是不是有缓存；而onload则是这个Image对象的load事件回调，当图片加载完成后执行onload绑定的函数。
8，为了进一步提升性能和用户体验，防止滚动时无限监听，可添加节流函数进行性能优化。
