問答
1. 如何判斷一個元素是否出現在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個函數 isVisible實現
function isVisible($node){
var scrollTop = $(window).scrollTop(),
winH = $(window).height(),
top = $node.offset().top;
if (scrollTop+winH>top) {
return true;
}else{
return false;
}
}
2 .當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。每次出現都在控制臺打印 true。用代碼實現
function logVisible($node){
$(window).on('scroll',function(){
var scrollTop = $(this).scrollTop(),
winH = $(this).height(),
top = $node.offset().top;
if (scrollTop+winH>top) {
console.log('true');
}
})
}
logVisible($('div'));
3. 當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。在元素第一次出現時在控制臺打印 true，以后再次出現不做任何處理。用代碼實現
function logVisible($node) {
$(window).on('scroll', function() {
var scrollTop = $(this).scrollTop(),
winH = $(this).height(),
top = $node.offset().top;
if (scrollTop + winH > top) {
if ($node.data('visible')) {
return;
}
$node.data('visible', true);
console.log('true');
} else {
$node.data('visible', false);
}
})
}
logVisible($('div'));
4. 圖片懶加載的原理是什么？
什么是圖片滾動加載？
通俗的講就是：當訪問一個頁面的時候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就只需請求一次），只有當圖片出現在瀏覽器的可視區域內時，才設置圖片正真的路徑，讓圖片顯示出來。這就是圖片懶加載。為什要使用這個技術？
比如一個頁面中有很多圖片，如淘寶、京東首頁等等，如果一上來就發送這么多請求，頁面加載就會很漫長，如果js文件都放在了文檔的底部，恰巧頁面的頭部又依賴這個js文件，那就不好辦了。更為要命的是：一上來就發送百八十個請求，服務器可能就吃不消了（又不是只有一兩個人在訪問這個頁面）。
因此優點就很明顯了：不僅可以減輕服務器的壓力，而且可以讓加載好的頁面更快地呈現在用戶面前（用戶體驗好）。
- 怎么實現？
其實原理上很簡單，在頁面載入的時候將頁面上的img標簽的src指向一個小圖片，把真實地址存放在一個自定義屬性中，這里我用data-src來存放，如下。
然后將頁面img標簽獲取并保存，開啟一個定時器，遍歷保存的img標簽，判斷其位置是否出現在了可視區域內。如果出現在可視區域了那么就把真實的src地址給賦值上。并且從數組中刪除，避免重復判斷。 那么你可能會問，如何判斷是否出現在可視區域內呢？那就是你可以獲取當前img的相對于文檔頂的偏移距離減去scrollTop的距離，然后和瀏覽器窗口高度在進行比較，如果小于瀏覽器窗口則出現在了可視區域內了，反之，則沒有。
