題目1：如何判斷一個元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間手形，肉眼可視）耻姥。寫一個函數(shù) isVisible實現(xiàn)
window.jpg
元素處于窗口高度外
窗口高度 + 垂直滾動距離 = 元素垂直方向距離
元素開始出現(xiàn)
窗口高度 + 垂直滾動距離 > 元素垂直方向距離
元素開始消失
垂直滾動距離 > 元素垂直方向距離
元素消失完畢
垂直滾動距離 > 元素垂直方向距離 + 元素自身高度
滾輪向下滾動的距離 == 元素上升的距離
function isVisible($node){
var scrollTop = $(window).scrollTop()
//滾動的高度
var windowHeight = $(window).height()
//窗口高度
var offsetTop = $node.offset().top
//元素距離頂端的高度
if( offsetTop < scrollTop + windowHeight && offserTop > scrollTop)
//元素距離頂端的高度 小于 窗口高度 并且 大于滾動高度（元素出現(xiàn)的時候）
{
return true
//返回true
}
return false
}
題目2：當(dāng)窗口滾動時莽龟，判斷一個元素是不是出現(xiàn)在窗口可視范圍们豌。每次出現(xiàn)都在控制臺打印 true 悍抑。用代碼實現(xiàn)
function isVisible($node){
var scrollTop = $(window).scrollTop()
//滾動的高度
var windowHeight = $(window).height()
//窗口高度
var offsetTop = $node.offset().top
//元素距離頂端的高度
if( offsetTop < scrollTop + windowHeight && offserTop > scrollTop)
//元素距離頂端的高度 小于 窗口高度 并且 大于滾動高度（元素出現(xiàn)的時候）
{
return true
//返回true
}
return false
}
//方法一
$(window).on('scroll',function(){
if(isVisible){
console.log(true)
}
})
------------------------------------
//方法二
$(window).on('scroll',function(){
xxx()
})
function xxx(){
$(node).each(function(){
if(isVisible($(this))){
console.log(true)
}
})
}
題目3：當(dāng)窗口滾動時吴叶，判斷一個元素是不是出現(xiàn)在窗口可視范圍罩阵。在元素第一次出現(xiàn)時在控制臺打印 true竿秆，以后再次出現(xiàn)不做任何處理。用代碼實現(xiàn)
function isVisible($node){
var scrollTop = $(window).scrollTop()
//滾動的高度
var windowHeight = $(window).height()
//窗口高度
var offsetTop = $node.offset().top
//元素距離頂端的高度
if( offsetTop < scrollTop + windowHeight && offserTop > scrollTop)
//元素距離頂端的高度 小于 窗口高度 并且 大于滾動高度（元素出現(xiàn)的時候）
{
return true
//返回true
}
return false
}
var hadShow = false;
$(window).on('scroll',function(e){
var $markImg = $('.markImg');
//獲取該元素
if(!hadshow && isVisiblie($markImg) ){
//事件為true并且元素出現(xiàn)在了窗口中
console.log(true);
//輸出true
hadShow = true;
//改變值
}
})
題目4：圖片懶加載的原理是什么稿壁？
以上的思路
1.對于所有的img標(biāo)簽幽钢，把真實的地址放入自定義屬性data-img
2.當(dāng)滾動頁面時，檢查頁面所有的img標(biāo)簽傅是，看看這個標(biāo)簽是否出現(xiàn)到我們的視野匪燕，當(dāng)出現(xiàn)在我們視野時吹缔，再去判斷它是否已經(jīng)加載過捐寥，如果沒有加載過，加載它囊榜。
另外的思路
展示一部分HTML內(nèi)容书闸，在底部埋入一個DOM節(jié)點界拦，用戶看不到這個節(jié)點，但在滾動的過程中梗劫，假設(shè)用戶滾動到了底部享甸，這個節(jié)點出現(xiàn)在瀏覽器窗口，向后臺發(fā)送ajax請求梳侨，得到數(shù)據(jù)蛉威，把這些數(shù)據(jù)拼裝成DOM放到頁面上。這個加載節(jié)點又被新加入的元素?fù)蜗氯チ俗卟福?dāng)用戶再滾動的過程中蚯嫌，重復(fù)獲取添加數(shù)據(jù)。
懶加載的好處：同時加載所有圖片，影響用戶體驗择示，浪費多余流量消耗（如：手機）束凑，出現(xiàn)卡頓情況，所以使用懶加載栅盲。
