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

function isVisible($node){
  var winH = $(window).height(),
      scrollH = $(window).scrollTop(),
      nodeH = $node.offset().top;
  if(winH + scrollH > nodeH && scrollH > nodeH){
    return true;
  }else{
    return false
  }
}

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

function isVisible($node){
  var winH = $(window).height(),
      scrollH = $(window).scrollTop(),
      nodeH = $node.offset().top;
  if(winH + scrollH > nodeH && scrollH > nodeH){
    return true;
  }else{
    return false;
  }
}
$(window).on('scroll', function(){
  var cur = $('.btn');
  if(isVisible(cur)){
    console.log("true");
  }
});

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

function isVisible($node){
  var winH = $(window).height(),
      scrollH = $(window).scrollTop(),
      nodeH = $node.offset().top;
  if($node.data('data-check')){
    if(winH + scrollH > nodeH && scrollH > nodeH){
      $node.data('data-check', true);
      console.log("true");
    }else{
      return false;
    }
  }
}
$(window).on('scroll', function(){
    var cur = $('.btn');
    isVisible(cur);
  }
});

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

懶加載也叫延遲加載，先在img src中放一張占位符圖片，而真實(shí)的圖片地址存放在相對(duì)應(yīng)一個(gè)屬性 data-img(后綴img可以自定義)中，這樣的話頁(yè)面加載的時(shí)候只加載src地址，不會(huì)對(duì)屬性的圖片真正地址加載，滾動(dòng)時(shí)候判斷待加載的資源相對(duì)于瀏覽器頂端的距離，可視區(qū)域相對(duì)于瀏覽器頂端的距離如果為true的話 則把相對(duì)應(yīng)的data-img值賦值給src否則不加載。