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

function isVisible(ele)
 {
   var offsettop=$(ele).offset().top;
   var windowscrolltop=$(window).scrollTop();
   var docHeight= $(document).height();
   if((offsettop< windowscrolltop+docHeight)&&(offsettop>windowscrolltop))
   {
     return true;
  
   }
    return false;
 }

image.png

題目2：當(dāng)窗口滾動時思币，判斷一個元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true 汗唱。用代碼實現(xiàn)

function isVisible(ele)
 {
   var offsettop=$(ele).offset().top;
   var windowscrolltop=$(window).scrollTop();
   var windowHeight= $(window).height();
   if((offsettop< windowscrolltop+windowHeight)&&(offsettop>windowscrolltop))
   {
     return true;
  
   }
    return false;
 }
//普通做法如下：
$(window).on('scroll',function(){
  console.log(isVisible('.box'));
  //一般的做法空郊，缺點是滾動一次會觸發(fā)很多次事件份招，當(dāng)執(zhí)行的代碼很多時，對用戶的體驗會很不好 
})
//優(yōu)化的角度狞甚，每次滾動停止時觸發(fā)锁摔，這樣可以做到優(yōu)化代碼的功能 。
//下面是優(yōu)化的代碼：
var s;
$(window).on('scroll',function(){
  if(s)
  {
    clearTimeout(s);

  } 
  s=setTimeout(function(){
  console.log(isVisible('.box')) ;
  },300);  
})

總結(jié)一般的做法哼审，缺點是滾動一次會觸發(fā)很多次事件谐腰，當(dāng)執(zhí)行的代碼很多時，對用戶的體驗會很不好
優(yōu)化的角度涩盾，每次滾動停止時觸發(fā)十气，這樣可以做到優(yōu)化代碼的功能

function isVisible(ele)
 {
   var offsettop=ele.offset().top;
   var windowscrolltop=$(window).scrollTop();
   var windowHeight= $(document).height();
   var nodeHeight=$(ele).height();
   if((offsettop< windowscrolltop+windowHeight)&&(nodeHeight+offsettop>windowscrolltop))
   {
     return true;
   }
    return false;
 }
function Firstappear(ele)
{ //如果擁有show這個class表明不是第一次出現(xiàn)
  if(ele.hasClass("show"))
  {
    return false;
  }
  else
  {
    ele.addClass("show");
    //第一次出現(xiàn)則添加show
    return true;
  }
}
$(window).on('scroll',function(){
  //一般的做法址儒，缺點是滾動一次會觸發(fā)很多次事件芹枷，當(dāng)執(zhí)行的代碼很多時，對用戶的體驗會很不好 
 if(isVisible($('.box'))&&Firstappear($('.box'))){
   console.log("first show");
 } 
  
})
//優(yōu)化的角度莲趣，每次滾動停止時觸發(fā)鸳慈，這樣可以做到優(yōu)化代碼的功能，下面時優(yōu)化的代碼
/*var s;
$(window).on('scroll',function(){
  if(s)
  {
    clearTimeout(s);

  } 
  s=setTimeout(function(){
  if(isVisible($('.box'))&&Firstappear($('.box'))){
   console.log("first show");
 } ;
  },300);  
})*/

image.png

題目4： 圖片懶加載的原理是什么喧伞？

當(dāng)頁面滾動的時候走芋，圖片出現(xiàn)在窗口可視范圍內(nèi)的時候進(jìn)行加載，否在不加載絮识。

沒有出現(xiàn)在窗口的可是范圍的時候绿聘，將img標(biāo)簽的圖片地址設(shè)置在data-src屬性上，等到出現(xiàn)在寬口的可是范圍的時候次舌，再將data-src的值賦值給src熄攘。

圖片的懶加載的作用
1.提高了用戶的使用體驗，不用等到圖片全都加載后再顯示彼念，而是慢慢出現(xiàn)在窗口的可視范圍之內(nèi)挪圾。
2.減輕了服務(wù)器的負(fù)載，因為不需要全部將內(nèi)容發(fā)送給瀏覽器逐沙。

題目5： 實現(xiàn)圖片懶加載效果

思路是：篩選出不是沒有加載的圖片（即沒有'show'的class）哲思，然后將查看是否在窗口范圍內(nèi)，是的就將data-src的屬性值賦值給src吩案，然后添加'show'這個class

var s;
var imgs=$("ul>li>img").not('.show');
function isVisible(ele)
{
   var offsettop=ele.offset().top+300;
   var windowscrolltop=$(window).scrollTop();
   var windowHeight= $(window).height();
  var nodeHeight=$(ele).height();
   if((offsettop< windowscrolltop+windowHeight)&&(nodeHeight+offsettop>windowscrolltop))
   {
     return true;
   }
    return false;
 }
function imgload(ele)
{
  ele.attr('src',ele.attr('data-src'));
  ele.addClass('show');
}

function lazyLoad(ele)
{
   if(isVisible($(ele)))
   { 
     imgload($(ele));
   }
            
}
$(window).on('scroll',function()
{
    
        
   if(s)
    {
        clearTimeout(s);
    }
    s=setTimeout(function( )
    {$.each(imgs,function(index,img)
        {
           lazyLoad(img);
        });
  
    },300);
   });

代碼地址：https://jsbin.com/qifoyesape/2/edit?js,output

ScreenGif.gif

總結(jié) 窗口的可視高度是 $(window).height()而不是$(document).height()棚赔，這是整個文檔的高度啊！