jquery懒加载、回到顶部

  • 如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现
    function isVisible($node){
    var curHigh = $node.offset().top,
    winTop = $(window).scrollTop(),
    winHigh = $(window).height();
    if(winTop + winHigh > curHigh && winTop < curHigh){
    return true;
    }else{
    return false;
    }
    }
  • 当窗口滚动时,判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
    $(window).on('scroll',function(){
    if(isVisible($node)){
    console.log('true')
    }
    })
    代码预览
  • 当窗口滚动时,判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true,以后再次出现不做任何处理。用代码实现
    $(window).on('scroll',function(){
    if($('.green').data('condition')){return}
    if(isVisible($node)){
    console.log('true');
    $node.data('condition','true');
    }
    });
    代码预览
  • 图片懒加载的原理是什么?
    • 懒加载即曝光加载,当图片曝光在你眼前的时候再去加载。
      如果网页中有较多图片,为优化渲染速度,图片可以先使用一张占位图片显示,真实的图片地址保存在一个自定义的属性当中,当图片出现在窗口的可是范围的时候,才将真实的地址替换掉占位图片的地址

你可能感兴趣的:(jquery懒加载、回到顶部)