問答：
1.如何判斷一個元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之前捆等，肉眼可見）。寫一個函數(shù)isVisible實現(xiàn)萎攒。
當一個元素的底部不超過瀏覽器的上邊緣（元素本身的高度+元素在文檔中的的高度>滾動條滾動的距離）柳骄，頂部不超過瀏覽器的下邊緣（元素在文檔中的高度<窗口的高度+滾動條滾動的距離）瘦赫，就可以說這個元素是在窗口的可視范圍之內(nèi)的。
function isVisible($node){
var nodeH = $node.height();//獲取元素本身的高度
var nodeTop = $node.offset().top;//獲取元素在文檔中的高度
var scrollTop = $(window).scrollTop();//獲取滾動條滾動的距離
var winH = $(window).height();//獲取窗口的高度梁肿。
return (nodeH+nodeTop > scrollTop && nodeTop < scrollTop + winH ) ? true : false//條件判斷蜓陌。
}
2.當窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍吩蔑。每次出現(xiàn)都在控制臺打印 true 钮热。用代碼實現(xiàn)
$(window).on("scroll",function(){//對窗口添加滾動事件監(jiān)聽
if(isVisible($node)){//如果函數(shù)返回為true時，即代表指定元素出現(xiàn)在窗口可視范圍內(nèi)
console.log(true);//控制臺打印true烛芬。
}
});
function isVisible($node){
var nodeH = $node.offset().top;//獲取元素在文檔中的高度
var scrollTop = $(window).scrollTop();//獲取滾動條滾動的距離
var winH = $(window).height();//獲取窗口的高度隧期。
return (nodeH < scrollTop + winH) ? true : false//進行距離判斷。
}
3.當窗口滾動時赘娄，判斷一個元素是不是出現(xiàn)在窗口可視范圍仆潮。在元素第一次出現(xiàn)時在控制臺打印 true，以后再次出現(xiàn)不做任何處理遣臼。用代碼實現(xiàn)
var isLoad; //設置一個狀態(tài)鎖
$(window).on("scroll",function(){
if(isVisible($node) && isLoad){//如果函數(shù)返回為true性置，且狀態(tài)鎖為true時，控制臺才打印true
console.log(true);
isLoad = false;//當元素第一次出現(xiàn)并且執(zhí)行代碼后揍堰，使狀態(tài)鎖為false鹏浅，這樣元素下次再出現(xiàn)時不在做任何處理。
}
});
function isVisible($node){
var nodeH = $node.offset().top;//獲取元素在文檔中的高度
var scrollTop = $(window).scrollTop();//獲取滾動條滾動的距離
var winH = $(window).height();//獲取窗口的高度屏歹。
return (nodeH < scrollTop + winH) ? true : false//進行距離判斷隐砸。
}；
4.圖片懶加載的原理是什么西采？
將圖片地址存放在自定義屬性中凰萨，當完成某種事件操作后，再將圖片地址放在正常的img屬性中，完成圖片的加載胖眷。這樣做的好處是能大大減少網(wǎng)頁加載的時間武通。
代碼：
1.實現(xiàn)如下回到頂部效果,當頁面滾動到一定距離時，窗口右下角會出現(xiàn)回到頂部按鈕珊搀，點擊按鈕頁面會滾動到頂部冶忱。
2.實現(xiàn)如下圖片懶加載效果
3.實現(xiàn)如下無限滾動效果
本文版權(quán)歸本人和饑人谷所有境析，轉(zhuǎn)載請注明來源囚枪。
