图片懒加载

懒加载的思路：只在需要时进行加载

方案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节点就又被挤到底部，因此也可以实现懒加载