懒加载的思路：只在需要时进行加载
方案1：
html部分
- 将所有图片的img标签写入html中
- 将所有img的src设置为一个“白图”或者是一个显示“loading”的图片，这样浏览器加载时只需要发送一个请求，因为对于相同内容的请求，浏览器会从缓存中获取数据
- 将img的真实地址放在data-src自定义属性当中，当当前img出现在视口时，再将data-src属性值赋值给src属性
js部分
- 获取所有的img标签
- 判断img是否出现在视口：
if (($(this).offset().top <= $(window).scrollTop() + $(window).height()) &&
($(this).offset().top > $(window).scrollTop()))
```
判断是否已经加载，通过判断img的src是否为空白图片的url，如果是，则说明没有加载，否则就是加载过的
加载图片，将img的data-src赋值给src属性即可
代码： 下面的代码只在$node第一次出现时触发，去除了重复触发
function isVisible($node){
if (!$node.hasClass('data-visible')){
var windowHeight = $(window).height();
var scrollTop = $(window).scrollTop();
var offsetTop = $node.offset().top;
if ((offsetTop > scrollTop) && (offsetTop < (scrollTop + windowHeight))){
// 如果第一次出现，则添加data-visible类
$node.addClass('data-visible');
console.log('出现了');
return true;
}
return false;
}
}
$(window).on('scroll', function(){
isVisible($('.box1'));
});
方案2
主要通过发送ajax请求给后台获取数据，并显示在页面上
思路：
- 在页面的底部插入一个DOM节点，该节点的用户是无法查看到的
- 当该DOM节点出现在视口时，就向服务器发送一条ajax请求获取数据
- 将获取到的数据插入到DOM节点之前，这样DOM节点就又被挤到底部，因此也可以实现懒加载
