进阶任务十六

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

$(function() {
      function isVisible($node){
        var scrollTop = $(window).scrollTop()  //页面滚动高度
        var windowHeight = $(window).height()  //窗口高度
        var offsetTop = $node.offset().top     // 元素位于页面高度
        return(scrollTop + '/' + windowHeight + '/' + offsetTop)
      }

      var $container2 = $('.container2')
      console.log(isVisible($container2))
    })

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

function isVisible($node){
        var scrollTop = $(window).scrollTop()  //页面滚动高度
        var windowHeight = $(window).height()  //窗口高度
        var offsetTop = $node.offset().top     // 元素位于页面高度
        if( offsetTop < scrollTop + windowHeight ) {
          return true
        }else {
          return false
        }
        
      }

      $(window).on('scroll', function(){
        var $container2 = $('.container2')
        console.log( isVisible( $container2 ) )
      })

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

$(function() {

      function isVisible($node){
        var scrollTop = $(window).scrollTop()  //页面滚动高度
        var windowHeight = $(window).height()  //窗口高度
        var offsetTop = $node.offset().top     // 元素位于页面高度
        if( offsetTop < scrollTop + windowHeight ) {
          return true
        }else {
          return false
        }
        
      }

      var clock
      $(window).on('scroll', function(){
        var $container2 = $('.container2')
        if(clock) {
          return 
        }
        if( isVisible($container2) ){
           console.log( true )
           clock = true
        }
       
      })
    })

题目4：图片懒加载的原理是什么？

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

题目5：实现视频中的图片懒加载效果
代码

进阶任务十六

推荐阅读更多精彩内容