juery懒加载，回到顶部

问答

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

function isVisible($el){
      var scrollH = $(window).scrollTop(),
      winH = $(window).height(),
      top = $el.offset().top;
      
      if(top < winH + scrollH){
        return true;        
      }else{
        return false;
      }
}

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

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

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

$(window).on('scroll',function(){
    if(isVisible($el)){
    print();
    $(this).attr('isLoading',true);
    }
})

function print($el){
    if($el.attr('isLoading')){
        return;
    }else{
        console.log(true);
    }
}

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

用户滚到哪个位置，哪个位置再加载图片。

代码

代码1

代码2

代码3

本文版权归作者_Josh和饥人谷所有，转载请注明来源