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

  function isVisible($node) {
      var height = $(window).height();
      var scollTop = $(window).scrollTop();
      var offSet = $node.offset().top;
      var nodeHeight = $node.height();
      if (height + scollTop > offSet && scollTop < offSet + nodeHeight) {
        return true;
      } else {
        return false;
    ｝

2：當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。每次出現都在控制臺打印 true 。用代碼實現

 $(window).on("scroll", function () {
   function load() {
      $(".ct img").each(function () {
        if (isVisible($(this))) {
         console.log("true");
        }
      })
    })

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

 $(window).on("scroll", function () {
   function load() {
      $(".ct img").not("loaded").each(function () {
        if (isVisible($(this))) {
         $(this).addClass("loaded");//當元素出現后添加類名，并在遍歷的時候排除有
                                     loaded的類名
         console.log("true");
        }
      })
    })

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

圖片懶加載，當用戶打開頁面時，如果將網頁中的圖片全部加載可能會造成網絡堵塞，利用懶加載，當用戶滑動到圖片元素出現時再加載來提高網站性能。原理就是把圖片的真正地址放在一個自定義的屬性中，然后為窗口滾動添加監聽事件，接著判斷一個元素是否在窗口范圍內出現，出現則把自定義屬性中的圖片地址放到自帶的src屬性中，加載圖片。