根据请求的数据动态懒加载图片

效果

思考：假如给你50+张图片，你如何实现懒加载？

思路：

1. 加载loading图片：先在显示9张带着loading图片的div块进行占位
2. 获取后台数据，根据请求图片数量替换并生成同等数量的带着loading的div块
3. 利用Image()对象先将图片加载至内存，
4. 待加载完毕再将图片替换loading.png;

知识预热：

利用图片到 浏览器顶部的距离offsetTop的距离=浏览器可视窗口的距离clientHeight+滚动条距离scrollHeight 的时候开始加载图片。

可视窗口获取api：

• 原生方法：window.innerHeight 标准浏览器及IE9+
• document.documentElement.clientHeight 标准浏览器及低版本IE标准模式
• document.body.clientHeight 低版本混杂模式
• jQuery方法： $(window).height()

滚动条获取api：

• 原生方法：window.pageYoffset——IE9+及标准浏览器
• document.documentElement.scrollTop 兼容ie低版本的标准模式
• document.body.scrollTop 兼容混杂模式；
• jQuery方法：$(document).scrollTop();

获取元素本身的位置信息：

• 原生：ele.offsetT