一、问答

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

      function isVisable($el){
        var $win=$(window)
        var offsetTop=$el.offset().top;
        var scrollTop=$win.scrollTop();
        var winH=$win.height();
        if(offsetTop<scrollTop+winH){
          return true;
        }
        return false;
      }

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

      function isVisable($el){
        var $win=$(window)
        var offsetTop=$el.offset().top;
        var scrollTop=$win.scrollTop();
        var winH=$win.height();
        if(offsetTop<scrollTop+winH){
          return true;
        }
        return false;
      }
      $(window).on("scroll",function(){
        var $node=$("#ct1");
        if(isVisable($node)){
          console.log(true);
        }
      })

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

      function isVisable($el){
        var $win=$(window)
        var offsetTop=$el.offset().top;
        var scrollTop=$win.scrollTop();
        var winH=$win.height();
        if(offsetTop<scrollTop+winH){
          return true;
        }
        return false;
      }
      $(window).on("scroll",function(){
        var $node=$("#ct1");
        if($node.data("hasShow")) return;
        if(isVisable($node)){
          console.log(true);
          $node.data("hasShow",true)
        }
      })

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

1.图片不立即显示或者使用一个统一的空白图片替代
2.图片对应的标签上有"data-img" 属性存储图片的真正地址
3.当用户翻到图片位置时后者在下一页即将要翻到时，将"data-img" 属性赋值给img标签的 "src" 属性上；
4.具体实现需要 监听 窗口的 "scroll" 事件，当"scroll" 事件触发时，标签的位置小于 window窗口的高度+scroll的高度(如果提前一页加载就不需要加上window窗口的高度)；

二、代码

代码1
代码2
代码3

本教程版权归小韩同学和饥人谷所有，转载须说明来源