懒加载

2017-02-15 本文已影响0人饥人谷_全

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

function isVisible($node){
        var $windosHeight = $(window).height(),//窗口高度
            $windosScrollTop = $(window).scrollTop(),//窗口滚动高度
            $nodeHeight = $($node).height(), //节点cotentarea 高度
            $nodeOffsetTop = $($node).offset().top; //节点距根节点高度
        if( $windosHeight+$windosScrollTop > $nodeOffsetTop && $windosScrollTop < $nodeOffsetTop+$nodeHeight) {
            //在可视区域内
            return true
        }
        return false;
    }

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

  window.on('scroll'.function(){
    var flag = isVisible($node);
    if(flag){
      console.log(true); 
    }
  })      

    function isVisible($node){
        var $windosHeight = $(window).height(),//窗口高度
            $windosScrollTop = $(window).scrollTop(),//窗口滚动高度
            $nodeHeight = $($node).height(), //节点cotentarea 高度
            $nodeOffsetTop = $($node).offset().top; //节点距根节点高度
        if( $windosHeight+$windosScrollTop > $nodeOffsetTop && $windosScrollTop < $nodeOffsetTop+$nodeHeight) {
            //在可视区域内
            return true
        }
        return false;
    }

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

  window.on('scroll'.function(){
    var flag = isVisible($node);
    if(flag && ！$node.hasClass('load')){
        $node.addClass('load');
        console.log(true);
    }
    return;
  })      

    function isVisible($node){
        var $windosHeight = $(window).height(),//窗口高度
            $windosScrollTop = $(window).scrollTop(),//窗口滚动高度
            $nodeHeight = $($node).height(), //节点cotentarea 高度
            $nodeOffsetTop = $($node).offset().top; //节点距根节点高度
        if( $windosHeight+$windosScrollTop > $nodeOffsetTop && $windosScrollTop < $nodeOffsetTop+$nodeHeight) {
            //在可视区域内
            return true
        }
        return false;
    }

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

将图片src 用data-src 保存起来，等到到图片出现在可是区域内，在进行src的加载

实现视频中的图片懒加载效果

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

function isVisible($node){
        var $windosHeight = $(window).height(),//窗口高度
            $windosScrollTop = $(window).scrollTop(),//窗口滚动高度
            $nodeHeight = $($node).height(), //节点cotentarea 高度
            $nodeOffsetTop = $($node).offset().top; //节点距根节点高度
        if( $windosHeight+$windosScrollTop > $nodeOffsetTop && $windosScrollTop < $nodeOffsetTop+$nodeHeight) {
            //在可视区域内
            return true
        }
        return false;
    }

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

  window.on('scroll'.function(){
    var flag = isVisible($node);
    if(flag){
      console.log(true); 
    }
  })      

    function isVisible($node){
        var $windosHeight = $(window).height(),//窗口高度
            $windosScrollTop = $(window).scrollTop(),//窗口滚动高度
            $nodeHeight = $($node).height(), //节点cotentarea 高度
            $nodeOffsetTop = $($node).offset().top; //节点距根节点高度
        if( $windosHeight+$windosScrollTop > $nodeOffsetTop && $windosScrollTop < $nodeOffsetTop+$nodeHeight) {
            //在可视区域内
            return true
        }
        return false;
    }

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

  window.on('scroll'.function(){
    var flag = isVisible($node);
    if(flag && ！$node.hasClass('load')){
        $node.addClass('load');
        console.log(true);
    }
    return;
  })      

    function isVisible($node){
        var $windosHeight = $(window).height(),//窗口高度
            $windosScrollTop = $(window).scrollTop(),//窗口滚动高度
            $nodeHeight = $($node).height(), //节点cotentarea 高度
            $nodeOffsetTop = $($node).offset().top; //节点距根节点高度
        if( $windosHeight+$windosScrollTop > $nodeOffsetTop && $windosScrollTop < $nodeOffsetTop+$nodeHeight) {
            //在可视区域内
            return true
        }
        return false;
    }