問(wèn)答
1. 如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間圆凰，肉眼可視）。寫(xiě)一個(gè)函數(shù) isVisible實(shí)現(xiàn)
當(dāng)一個(gè)元素的底部不超過(guò)瀏覽器的上邊緣（元素本身的高度+元素到達(dá)頁(yè)面頂端的高度>滾動(dòng)條滾動(dòng)的距離）闰蛔，頂部不超過(guò)瀏覽器的下邊緣（滾動(dòng)條滾動(dòng)的距離+窗口的高度>元素到達(dá)頁(yè)面頂端的高度），就可以說(shuō)這個(gè)元素是在窗口的可視范圍之內(nèi)的图柏。
<pre>function isVisible($node){ var nodeH = $node.height();//獲取元素的高度 var offsetTop = $node.offset().top;//獲取元素在頁(yè)面中的高度 var winH = $(window).height();//獲取窗口的高度 var scrollTop = $(window).scrollTop;//獲取滾動(dòng)條滾動(dòng)的距離 if(winH+scrollTop>offsetTop && scrollTop<scrollTop+winH){ return true; }else{ return false; } }</pre>
2. 當(dāng)窗口滾動(dòng)時(shí)序六，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺(tái)打印 true 爆办。用代碼實(shí)現(xiàn)
<pre>`
function isVisible($node){
var nodeH = $node.height();//獲取元素的高度
var offsetTop = $node.offset().top;//獲取元素在頁(yè)面中的高度
var winH = $(window).height();//獲取窗口的高度
var scrollTop = $(window).scrollTop;//獲取滾動(dòng)條滾動(dòng)的距離
if(winH+scrollTop>offsetTop && scrollTop<scrollTop+winH){
return true;
}else{
return false;
}
}
$(window).on('scroll',function(){//對(duì)窗口事件進(jìn)行監(jiān)聽(tīng)
var rusult = isVisible($node);
if(result){//如果函數(shù)返回值是true难咕，元素出現(xiàn)在窗口可視范圍
console.log(result);//控制臺(tái)打印true
}
})
`</pre>
3. 當(dāng)窗口滾動(dòng)時(shí)课梳，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍距辆。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true余佃，以后再次出現(xiàn)不做任何處理。用代碼實(shí)現(xiàn)
<pre>`
function isVisible($node){
var nodeH = $node.height();//獲取元素的高度
var offsetTop = $node.offset().top;//獲取元素在頁(yè)面中的高度
var winH = $(window).height();//獲取窗口的高度
var scrollTop = $(window).scrollTop;//獲取滾動(dòng)條滾動(dòng)的距離
if(winH+scrollTop>offsetTop && scrollTop<scrollTop+winH){
return true;
}else{
return false;
}
}
var locked = false;//設(shè)定狀態(tài)鎖
$(window).on('scroll',function(){//對(duì)窗口事件進(jìn)行監(jiān)聽(tīng)
if(locked){
return;
}
var rusult = isVisible($node);
if(result){
console.log(result);
locked=true;//當(dāng)元素第一次出現(xiàn)并且執(zhí)行代碼后跨算，狀態(tài)鎖鎖定爆土，這樣元素下次再出現(xiàn)時(shí)不在做任何處理。
}
})
`</pre>
4. 圖片懶加載的原理是什么诸蚕？
沒(méi)有使用懶加載：當(dāng)頁(yè)面上有大量的圖片時(shí)步势，即使圖片的大小很小，但是數(shù)量很多的情況下背犯，也會(huì)達(dá)到幾十坏瘩、上百兆。那么當(dāng)用戶打開(kāi)這個(gè)頁(yè)面的時(shí)候漠魏，要在很短的時(shí)間內(nèi)將這些圖片全部加載好倔矾，這樣就會(huì)導(dǎo)致嚴(yán)重的性能問(wèn)題，用戶會(huì)等待很長(zhǎng)時(shí)間柱锹，瀏覽器甚至?xí)罎⒛淖裕@樣就會(huì)產(chǎn)生較差的用戶體驗(yàn)。由此就引出了圖片懶加載禁熏。
圖片懶加載：就是僅僅加載用戶可視區(qū)域的圖片壤巷，即使一個(gè)頁(yè)面上有大量的圖片，但是呈現(xiàn)在用戶眼中的只有瀏覽器大小的頁(yè)面瞧毙，而這個(gè)頁(yè)面中的圖片是有限的胧华，較少的，如果僅僅只加載這些頁(yè)面宙彪，并不會(huì)出現(xiàn)性能問(wèn)題撑柔。當(dāng)用戶下拉瀏覽器時(shí)，才加載一部分圖片您访。把真實(shí)的圖片存放在一個(gè)自定義屬性中铅忿，可以用data-src來(lái)存放。<img src=“l(fā)oading.gif/xxxblank.jpg” data-src="http://www.xxx.com/realimg.jpg" />當(dāng)瀏覽器下拉到該圖片的可視區(qū)域時(shí)灵汪，在把data-src里面的圖片地址賦給src屬性里面檀训。
本文版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載請(qǐng)注明來(lái)源。
