題目1:如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間狡赐,肉眼可視)托修。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)
function isVisible($node){
var scrollDis = $(window).scrollTop();
var windowHeight = $(window).height();
var offsetDis = $node.offset().top;
if(offsetDis<scrollDis+windowHeight && offsetDis>scrollTop )
{
return true;
}else{
return false
}
}
題目2:當(dāng)窗口滾動(dòng)時(shí)葫松,判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺(tái)打印 true 草丧。用代碼實(shí)現(xiàn)
$(window).on('scroll',function (){
if(isVisible($node)){
console.log(true);
}else{
console.log(false);
}
})
function isVisible($node){
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height()
var offsetTop = $node.offset().top
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
return true;
}else{
return false;
}
}
題目3:當(dāng)窗口滾動(dòng)時(shí),判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍轰绵。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true家乘,以后再次出現(xiàn)不做任何處理。用代碼實(shí)現(xiàn)
var off = true;
$(window).on('click',function (){
if(isVisible($node) ){
if(off){
console.log(true)
off =false;
}
})
function isVisible($node){
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var offsetTop = $node.offset();
if(offsetTop<scrollTop + windowHeight && offsetTop>scrollTop){
return true;
}else{
return false;
}
}
題目4: 圖片懶加載的原理是什么藏澳?
- 比如一個(gè)頁面中有很多圖片,如淘寶耀找、京東首頁等等翔悠,如果一上來就發(fā)送這么多請(qǐng)求,頁面加載就會(huì)很漫長(zhǎng)野芒,如果js文件都放在了文檔的底部蓄愁,恰巧頁面的頭部又依賴這個(gè)js文件,那就不好辦了狞悲。更為要命的是:一上來就發(fā)送百八十個(gè)請(qǐng)求撮抓,服務(wù)器可能就吃不消了(又不是只有一兩個(gè)人在訪問這個(gè)頁面)。
- 圖片懶加載: 就是當(dāng)訪問一個(gè)頁面的時(shí)候摇锋,先把img元素或是其他元素的背景圖片路徑替換成一張大小固定的圖片的路徑(這樣就只需請(qǐng)求一次)丹拯,只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí),才設(shè)置圖片正真的路徑荸恕,讓圖片顯示出來乖酬。
- 優(yōu)點(diǎn)是: 不僅可以減輕服務(wù)器的壓力,而且可以讓加載好的頁面更快地呈現(xiàn)在用戶面前(用戶體驗(yàn)好)
題目5: 實(shí)現(xiàn)視頻中的圖片懶加載效果
http://js.jirengu.com/fucaropeta/1/edit