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

• 元素刚刚出现的条件：windowHeight + scrollTop = 元素的offsetTop；
• 元素刚刚消失的条件：scrollTop = 元素的offsetTop + 元素的height
• isVisible函数如下代码：

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

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

• 代码如下所示：

        <div class="box"></div>
        <script src="js/jquery-3.2.1.js"></script>
        <script>
            $(window).on("scroll",function(){
                if(isVisible($(".box"))){
                    console.log("true");
                }
            });

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

• 如下图GIF所示：

  
  2.gif

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

• 代码如下图所示：

        <div class="box"></div>
        <script src="js/jquery-3.2.1.js"></script>
        <script>
            $(window).on("scroll",function(){
                if(isVisible($(".box")) && !($(".box").hasClass("justone"))){
                    console.log("true");
                    $(".box").addClass("justone");
                }
            });

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

• 如下图GIF所示：

  
  3.gif

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

• 图片懒加载的原理是先不设置img的src属性，先将src上的地址存储在一个自定义的属性上，比如data-src；等到合适的时机（比如滚动条滚动到图片的顶端即img要显示的时候），把data-src上img的地址给src属性，这样图片就显示出来了

5、 实现视频中的图片懒加载效果

6、实现视频中的新闻懒加载效果

• 效果如下图GIF所示：

  
  6.gif

版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源！！！！