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

function isVisable($img){
    var scrollTop = $(window).scrollTop()
    var windowHeight = $(window).height()
    var offsetTop = $img.offset().top
    if( offsetTop > scrollTop && offsetTop < scrollTop + windowHeight){
        return true
    }
        return false
}

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

function isVisable($img){
    var scrollTop = $(window).scrollTop()
    var windowHeight = $(window).height()
    var offsetTop = $img.offset().top
    if( offsetTop > scrollTop && offsetTop < scrollTop + windowHeight){
        return true
    }
        return false
}

$(window).on("scroll",function(){
if(isVisable()){
    console.log("true")
}
})

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

function isVisable($img){
    var scrollTop = $(window).scrollTop()
    var windowHeight = $(window).height()
    var offsetTop = $img.offset().top
    if( offsetTop > scrollTop && offsetTop < scrollTop + windowHeight){  
                        $img.attr("num","ok")
        return true
    }
        return false
}

$(window).on("scroll",function(){
        if(isVisable() $$ !isLoad()){
                    console.log("true")
                 }
})

function isLoad(){
      if( $img.attr("num") = "ok"){
          return true
      }
}

图片懒加载的原理是什么？

作用： 监听事件发生，再进行下载图片，这样可以提高性能（放置一次性加载多张图片而产生卡顿），也能帮用户省流量

原理： 先创建一个新的标签（data-src）放置真是图片地址，在img节点中的src标签放置同一张无意义（空白）图片，待事件发生（滚动事件）时，把data-src中的图片地址放置到src中，让浏览器加载。

实现一个懒加载效果

懒加载+木桶布局组件