如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間病曾，肉眼可視）畴博。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)
function isVisible($node){
var scrollTop = $(window).scrollTop(); //滑動(dòng)高度
var windowHeight = $(window).height(); //可視高度
var offsetTop = $node.offset().top //元素位置高度
//如果元素距頂部的距離小于 滾動(dòng)距離+Window高度临燃，并且高度小于滾動(dòng)
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
return true;
}
return false;
}
當(dāng)窗口滾動(dòng)時(shí)鳄虱，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍诗力。每次出現(xiàn)都在控制臺(tái)打印 true 凰浮。用代碼實(shí)現(xiàn)
var toggle = true; //設(shè)置一個(gè)開關(guān)
//判斷是否出現(xiàn)在窗口可視范圍的函數(shù)
function isVisible($node){
var scrollTop = $(window).scrollTop(); //滑動(dòng)高度
var windowHeight = $(window).height(); //可視高度
var offsetTop = $node.offset().top //元素位置高度
//如果元素距頂部的距離小于 滾動(dòng)距離+Window高度，并且高度小于滾動(dòng)
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
return true;
}
return false;
}
$(window).on('scroll',function(){
if(isVisible($('.box1'))){ //判斷元素是否可視
if(toggle){
console.log('true');
toggle = false;
}
}else{
toggle = true;
}
})
當(dāng)窗口滾動(dòng)時(shí)苇本，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍袜茧。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true，以后再次出現(xiàn)不做任何處理瓣窄。用代碼實(shí)現(xiàn)
var toggle = true;
function isVisible($node){
var scrollTop = $(window).scrollTop(); //滑動(dòng)高度
var windowHeight = $(window).height(); //可視高度
var offsetTop = $node.offset().top; //元素位置高度
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
return true;
}
return false;
}
$(window).on('scroll',function(){
if(toggle && isVisible($('.box1'))){
console.log('true');
toggle = false;
}
})
圖片懶加載的原理是什么笛厦？
懶加載即延遲，對(duì)于圖片過多的頁面俺夕，為了加快頁面加載速度裳凸，將頁面內(nèi)未出現(xiàn)在可視區(qū)域內(nèi)的圖片先加載贱鄙，等到滾動(dòng)到可視區(qū)域后再加載。從而提升頁面加載性能姨谷，提高了用戶體驗(yàn)逗宁。
原理：
- 在頁面載入時(shí)將img標(biāo)簽內(nèi)的src指向空或者占位圖，將真實(shí)地址存放于自定義屬性或者數(shù)組中梦湘；
- 當(dāng)頁面滑動(dòng)的時(shí)候檢查所有的img元素瞎颗，看看是否在可視窗口以內(nèi)，如果在視野內(nèi)在看看是否加載過践叠，沒有的加載的話就加載圖片
