懒加载

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

function isVisible($node){
    $(window).on('scroll',function(){
        var scrollTop = $(this).scrollTop()
        var windowHeight = $(this).height()
        var top = $node.offset().top
//元素出现在窗口可见范围内，console打印出true
        if(scrollTop+windowHeight>top){
            console.log('true')
        }
    })
}

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


$(window).on('scroll',function(){
  if(isVisible($node.not('.show'))){
    console.log('true')
    $(this).addClass('show')
  }
})

function isVisible($node){
        var scrollTop = $(this).scrollTop()
        var windowHeight = $(this).height()
        var offsetTop = $node.offset().top
        var nodeHeight = $node.offset().top
        if(scrollTop+windowHeight>offsetTop && scrollTop<offsetTop + nodeHeight){
           return true
        }else{
           return false
}

3、图片懒加载原理
图片的懒加载就是将图片较多的页面进行图片依据滚动到当前页面的条件加载。在加载之前将图片使用空白或占位图加载，在滚动条滚动至图片位置出现在浏览器视图窗口中时进行加载，从而避免了同时加载大量图片引起的服务端返回资源过多发生阻塞的情况
实现的核心要点：

加载图片
可以将真实的图片资源定义到自定义属性data-src中，当符合加载条件时，将data-src的值提取赋值给img的src
判断在何种状态下加载
临界位置：

scrollTop(滚动距离) + windowHeight(浏览器窗口大小) > offsetTop(元素距离scrollTop=0的距离)
scrollTop < offsetTop + height(元素占据高度）

推荐阅读更多精彩内容