題目1:如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)屠尊。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)
function isVisible($node){
var wTop = $(window).scrollTop();
var wH = window.innerHeight;
if($node){
if(wH+wTop>$node.offset().top&&$node.offset().top>wTop){
return true ;
}else{
return false ;
}
}
}
題目2:當(dāng)窗口滾動(dòng)時(shí)旷祸,判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺(tái)打印 true 讼昆。用代碼實(shí)現(xiàn)
題目3:當(dāng)窗口滾動(dòng)時(shí)托享,判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true,以后再次出現(xiàn)不做任何處理闰围。用代碼實(shí)現(xiàn)
題目4: 圖片懶加載的原理是什么赃绊?
圖片的懶加載就是將圖片較多的頁面進(jìn)行圖片依據(jù)滾動(dòng)到當(dāng)前頁面的條件加載。在加載之前將圖片使用空白或占位圖加載羡榴,在滾動(dòng)條滾動(dòng)至圖片位置出現(xiàn)在瀏覽器視圖窗口中時(shí)進(jìn)行加載碧查,從而避免了同時(shí)加載大量圖片引起的服務(wù)端返回資源過多發(fā)生阻塞的情況
步驟:
- 首先要判斷圖片是否出現(xiàn)在了可視的窗口:屏幕滾動(dòng)的高度+窗口的高度>圖片距離頁面頂部的距離 && 屏幕滾動(dòng)的高度>圖片距離頁面頂部的距離+圖片所在的元素的高度,這就是可視的范圍了
- 接下來該準(zhǔn)備修改圖片的src了校仑≈沂郏可以給img的src放同樣一張圖片,這樣只會(huì)發(fā)起一次請(qǐng)求迄沫,然后在img中創(chuàng)建一個(gè)屬性(比如data-src),放入展示給用戶的圖片稻扬。
- 當(dāng)圖片到了用戶的可視窗口范圍,把img的src地址換成data-src的地址羊瘩,這樣圖片就會(huì)被加載了泰佳。