回答：

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

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

元素距離根元素的高度 < 窗口高度 + 窗口滾動高度；
窗口滾動高度 < 元素距離根元素的高度 + 元素本身高度；
2.當(dāng)窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true 。用代碼實現(xiàn)

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

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

<script>
    var $visible = $('.visible');
    var flag = true;
    $(window).on('scroll', function() {
      if(flag) {
        isVisible($visible);
      }
    })

    function isVisible($node) {
      var windowHeight = $(window).height(),
            scrollTop = $(window).scrollTop(),
            offsetTop = $node.offset().top,
            nodeHeight = $node.outerHeight(true);
      if (windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight) {
        console.log('true');
        flag = false;
        return true;
      }else{
        return false;
      }
    }
  </script>

4.圖片懶加載的原理是什么？
當(dāng)用戶往下滾動窗口，圖片進(jìn)入window窗口（用戶可見）就會加載。正常的時候圖片地址是放在自定義屬性上，用戶滾動窗口后才將地址賦值給src，這樣優(yōu)化了代碼的性能。

代碼

回到頂部
懶加載
無限滾動