問答
1. 如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間缭付，肉眼可視）邑跪。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)
function isVisible($node){
var scrollTop = $(window).scrollTop(),
winH = $(window).height(),
top = $node.offset().top;
if (scrollTop+winH>top) {
return true;
}else{
return false;
}
}
2 .當(dāng)窗口滾動(dòng)時(shí)烈和，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍偶垮。每次出現(xiàn)都在控制臺(tái)打印 true睛约。用代碼實(shí)現(xiàn)
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. 當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍寞肖。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true纲酗，以后再次出現(xiàn)不做任何處理。用代碼實(shí)現(xiàn)
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. 圖片懶加載的原理是什么逝淹？
什么是圖片滾動(dòng)加載耕姊？
通俗的講就是：當(dāng)訪問一個(gè)頁面的時(shí)候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就只需請求一次）栅葡，只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí)茉兰，才設(shè)置圖片正真的路徑，讓圖片顯示出來欣簇。這就是圖片懶加載规脸。為什要使用這個(gè)技術(shù)？
比如一個(gè)頁面中有很多圖片熊咽，如淘寶莫鸭、京東首頁等等，如果一上來就發(fā)送這么多請求横殴，頁面加載就會(huì)很漫長被因，如果js文件都放在了文檔的底部卿拴，恰巧頁面的頭部又依賴這個(gè)js文件，那就不好辦了梨与。更為要命的是：一上來就發(fā)送百八十個(gè)請求堕花，服務(wù)器可能就吃不消了（又不是只有一兩個(gè)人在訪問這個(gè)頁面）。
因此優(yōu)點(diǎn)就很明顯了：不僅可以減輕服務(wù)器的壓力粥鞋，而且可以讓加載好的頁面更快地呈現(xiàn)在用戶面前（用戶體驗(yàn)好）缘挽。
- 怎么實(shí)現(xiàn)？
其實(shí)原理上很簡單呻粹，在頁面載入的時(shí)候?qū)㈨撁嫔系膇mg標(biāo)簽的src指向一個(gè)小圖片壕曼，把真實(shí)地址存放在一個(gè)自定義屬性中，這里我用data-src來存放等浊，如下腮郊。
然后將頁面img標(biāo)簽獲取并保存，開啟一個(gè)定時(shí)器筹燕，遍歷保存的img標(biāo)簽伴榔，判斷其位置是否出現(xiàn)在了可視區(qū)域內(nèi)。如果出現(xiàn)在可視區(qū)域了那么就把真實(shí)的src地址給賦值上庄萎。并且從數(shù)組中刪除，避免重復(fù)判斷塘安。 那么你可能會(huì)問糠涛，如何判斷是否出現(xiàn)在可視區(qū)域內(nèi)呢？那就是你可以獲取當(dāng)前img的相對于文檔頂?shù)钠凭嚯x減去scrollTop的距離兼犯，然后和瀏覽器窗口高度在進(jìn)行比較忍捡，如果小于瀏覽器窗口則出現(xiàn)在了可視區(qū)域內(nèi)了，反之切黔，則沒有砸脊。
代碼
源碼地址
1. backtop 預(yù)覽
2. 圖片懶加載 預(yù)覽
3. 懶加載ajax 預(yù)覽（本地測試成功）
