懒加载

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

        //jQuery写法
        function isVisible($element) {
            let windowHeight = $(window).height()
            let elementOffsetTop = $element.offset().top  //获取元素距离document顶端距离
            let scrollTop = $(window).scrollTop()  //获取窗口滚动距离
            if(scrollTop + windowHeight > elementoOffsetTop && scrollTop < elementOffsetTop) {
                //出现了
                return true
            } else {
               //没出现
                return false
            }
        }

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

        let $elemrnt = $(element)

        $(window).on('scroll',function() {
            if(isVisible($element)) {
                console.log('true')
            }
        })

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

        let $element = $(element）

        $(window).on('scroll',function() {
            if($element.attr('loaded')) {
                return
            }
            if(isVisible($element)) {
                console.log('true')
                $element.attr('loaded', true)   //元素已出现
            }
        })

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

图片懒加载的核心逻辑是判断图片是否出现在可视界面，当图片出现在可视范围时才加载图片。
1.可以将图片src存入一个自定义属性，例如：data-src
2.判断元素是否出现在可视区域
3.一旦图片出现在可视区域，改变src的值

5

http://js.jirengu.com/zehidameva/2/edit

6

js中为后端代码
http://js.jirengu.com/duvazimore/2/edit