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');
    }
    });
    代码预览
  • 图片懒加载的原理是什么?
    • 懒加载即曝光加载,当图片曝光在你眼前的时候再去加载。
      如果网页中有较多图片,为优化渲染速度,图片可以先使用一张占位图片显示,真实的图片地址保存在一个自定义的属性当中,当图片出现在窗口的可是范围的时候,才将真实的地址替换掉占位图片的地址

推荐阅读更多精彩内容

  • 如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现...
    coolheadedY阅读 41评论 0 0
  • Q&A: 1. 如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isV...
    饥人谷_阿群阅读 142评论 0 3
  • 回答: 1.何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一函数 isVisib...
    ahong_吴阅读 29评论 0 0
  • 问答 1、如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数isVisib...
    Evan_Yann阅读 27评论 0 0
  • 问答 1. 如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVis...
    小木子2016阅读 54评论 0 0