懒加载的核心代码

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

 var $div= $('.b')
    function  isVisible($div) {
        var scrollTop = $(window).scrollTop()       //页面滚动高度
        var windowHeight = $(window).height()    //窗口高度
        var offsetTop = $div.offset().top                //$div位于页面的高度
        if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
            return true
        }
        return false
    }

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

$(window).on('scroll', function(){
        if (isVisible($div)) {
            console.log(true)
        }
    })
var $div= $('.b')
    function  isVisible($div) {
        var scrollTop = $(window).scrollTop()
        var windowHeight = $(window).height()
        var offsetTop = $div.offset().top
        if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
            return true
        }
        return false
    }

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

var clock   //默认为
    $(window).on('scroll', function () {
        if (clock) {
            return
        } else if (isVisible($div)) {
            console.log(true)
            clock = true
        }
    })


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

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

1. 对于所有的 img 标签，把真实的地址放入自定义属性data-img
2. 当滚动页面时，检查页面所有的 img 标签，看看这个标签是否出现到我们的视野，当出现在我们的视野时，再去判断它是否已经加载过，如果没有加载过，令img的src等于data-src，( $img.attr('src', $img.attr('data-src')))

懒加载代码示范