懒加载

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

function isVisible($node){
     var offsetTop=$node.offset().top;
     var windowHeight=$(window).height();
     var scrollTop=$(window).scrollTop()
     if(offsetTopscrollTop){
        return true;
}
 }

2. 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true

function isVisible($node){
     var offsetTop=$node.offset().top;
     var windowHeight=$(window).height();
     var scrollTop=$(window).scrollTop();
     $(window).on('scroll',function(){
          if(offsetTopscrollTop){
          console.log( 'true');
}
})
}

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

function isVisible($node){
     var offsetTop=$node.offset().top;
     var windowHeight=$(window).height();
     var scrollTop=$(window).scrollTop();
     $(window).on('scroll',function(){
          if(offsetTopscrollTop){
          console.log( 'true');
}
})
}
$(window).on('scroll',function(){
    var $text=$('.text')
    if(isVisible($text)&&!$text.hasclass('show')){
      $text.addclass('show')
      console.log('true')
}else{
    console.log('false')
}
})

4. 懒加载的原理

先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储，在img标签的自定义属性中（比如data-src）,当js监听到该图片元素进入到可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃的问题。

5. 懒加载效果的实现

懒加载