本教程版權歸小圓和饑人谷所有,轉載須說明來源
問答
1. 如何判斷一個元素是否出現在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間囚痴,肉眼可視)叁怪。寫一個函數 isVisible
實現
function isVisible($node){
var winH = $(window).height(),
scrollTop = $(window).scollTop(),
offsetTop = $node.offset().top;
if (offsetTop < winH + scrollTop) {
return ture;
} else {
return false;
}
}
2. 當窗口滾動時,判斷一個元素是不是出現在窗口可視范圍深滚。每次出現都在控制臺打印 true 奕谭。用代碼實現
$(window).on('scroll',function() {
if (isVisible($node)) {
console.log('ture');
}
})
3. 當窗口滾動時,判斷一個元素是不是出現在窗口可視范圍痴荐。在元素第一次出現時在控制臺打印 true血柳,以后再次出現不做任何處理。用代碼實現
var isShow = false;
$(window).on('srcoll',function() {
if (isShow) {
return;
} else {
isShow = ture;
console.log('true');
}
})
4. 圖片懶加載的原理是什么生兆?
頁面中所有的圖片的src中存放的都是同一張圖片(例如一張白圖)难捌,這張白圖只需要加載一次,圖片真正的地址存儲在自定義屬性data-src里面皂贩。然后判斷某個元素是否出現在窗口的可視區(qū)域栖榨,如果出現在可視區(qū)域,則修改元素的src屬性明刷,使其變成圖片真正的地址婴栽,從而讓圖片顯示出來。
使用懶加載的方式辈末,可避免出現一次性向服務器發(fā)送大量請求愚争,導致服務器無法及時響應、用戶等待過長時間挤聘、頁面崩潰等問題的發(fā)生轰枝。