如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)

function isVisible($node){
        var $windosHeight = $(window).height(),//窗口高度
            $windosScrollTop = $(window).scrollTop(),//窗口滾動(dòng)高度
            $nodeHeight = $($node).height(), //節(jié)點(diǎn)cotentarea 高度
            $nodeOffsetTop = $($node).offset().top; //節(jié)點(diǎn)距根節(jié)點(diǎn)高度
        if( $windosHeight+$windosScrollTop > $nodeOffsetTop && $windosScrollTop < $nodeOffsetTop+$nodeHeight) {
            //在可視區(qū)域內(nèi)
            return true
        }
        return false;
    }

當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺(tái)打印 true 。用代碼實(shí)現(xiàn)

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

    function isVisible($node){
        var $windosHeight = $(window).height(),//窗口高度
            $windosScrollTop = $(window).scrollTop(),//窗口滾動(dòng)高度
            $nodeHeight = $($node).height(), //節(jié)點(diǎn)cotentarea 高度
            $nodeOffsetTop = $($node).offset().top; //節(jié)點(diǎn)距根節(jié)點(diǎn)高度
        if( $windosHeight+$windosScrollTop > $nodeOffsetTop && $windosScrollTop < $nodeOffsetTop+$nodeHeight) {
            //在可視區(qū)域內(nèi)
            return true
        }
        return false;
    }

當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true，以后再次出現(xiàn)不做任何處理。用代碼實(shí)現(xiàn)

  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(),//窗口滾動(dòng)高度
            $nodeHeight = $($node).height(), //節(jié)點(diǎn)cotentarea 高度
            $nodeOffsetTop = $($node).offset().top; //節(jié)點(diǎn)距根節(jié)點(diǎn)高度
        if( $windosHeight+$windosScrollTop > $nodeOffsetTop && $windosScrollTop < $nodeOffsetTop+$nodeHeight) {
            //在可視區(qū)域內(nèi)
            return true
        }
        return false;
    }

圖片懶加載的原理是什么？

將圖片src 用data-src 保存起來，等到到圖片出現(xiàn)在可是區(qū)域內(nèi)，在進(jìn)行src的加載

實(shí)現(xiàn)視頻中的圖片懶加載效果

如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)

function isVisible($node){
        var $windosHeight = $(window).height(),//窗口高度
            $windosScrollTop = $(window).scrollTop(),//窗口滾動(dòng)高度
            $nodeHeight = $($node).height(), //節(jié)點(diǎn)cotentarea 高度
            $nodeOffsetTop = $($node).offset().top; //節(jié)點(diǎn)距根節(jié)點(diǎn)高度
        if( $windosHeight+$windosScrollTop > $nodeOffsetTop && $windosScrollTop < $nodeOffsetTop+$nodeHeight) {
            //在可視區(qū)域內(nèi)
            return true
        }
        return false;
    }

當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺(tái)打印 true 。用代碼實(shí)現(xiàn)

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

    function isVisible($node){
        var $windosHeight = $(window).height(),//窗口高度
            $windosScrollTop = $(window).scrollTop(),//窗口滾動(dòng)高度
            $nodeHeight = $($node).height(), //節(jié)點(diǎn)cotentarea 高度
            $nodeOffsetTop = $($node).offset().top; //節(jié)點(diǎn)距根節(jié)點(diǎn)高度
        if( $windosHeight+$windosScrollTop > $nodeOffsetTop && $windosScrollTop < $nodeOffsetTop+$nodeHeight) {
            //在可視區(qū)域內(nèi)
            return true
        }
        return false;
    }

當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true，以后再次出現(xiàn)不做任何處理。用代碼實(shí)現(xiàn)

  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(),//窗口滾動(dòng)高度
            $nodeHeight = $($node).height(), //節(jié)點(diǎn)cotentarea 高度
            $nodeOffsetTop = $($node).offset().top; //節(jié)點(diǎn)距根節(jié)點(diǎn)高度
        if( $windosHeight+$windosScrollTop > $nodeOffsetTop && $windosScrollTop < $nodeOffsetTop+$nodeHeight) {
            //在可視區(qū)域內(nèi)
            return true
        }
        return false;
    }

圖片懶加載的原理是什么？

將圖片src 用data-src 保存起來，等到到圖片出現(xiàn)在可是區(qū)域內(nèi)，在進(jìn)行src的加載

實(shí)現(xiàn)視頻中的圖片懶加載效果

1.gif

源碼

實(shí)現(xiàn)視頻中的新聞懶加載效果

2.gif

源碼源碼

實(shí)現(xiàn)視頻中的新聞懶加載效果

2.gif

源碼