懒加载

1.如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现

function isVisible($node){
   var window_scroll=$(window).scrollTop(); //滚动条滚动距离
   var node_offset = $node.offset().top;//元素距离窗口顶部距离
   var window_height = $(window).height();//显示窗口的高度
   if(node_offsetwindow_scroll){
     return true;
   }
   return false;
 }

2.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现

实现

3.图片懒加载的原理

对窗口的‘scroll’事件进行监听，当滚动时，去判断图片是否在窗口的显示范围里，就是（图片距离窗口顶部的距离<窗口滚动的距离+窗口的高度 并且 图片距离窗口顶部的距离 > 滚动条滚动距离）。如果在范围内，就对图片进行加载，可以先将图片的地址绑定在元素的‘data-src’里，当需要加载时，通过js将‘data-src’里的值赋值给img标签的src

4.图片懒加载效果

实现效果