如何判斷一個元素是否出現在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個函數 isVisible實現
function isVisible($node){ var winH = $(window).height(),
winS = $(window).scrollTop(),
nodeHeight = $node.height(),
nodeTop = $node.offset().top; if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight){ return true;
}else{ return false;
}
}當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。每次出現都在控制臺打印 true 。用代碼實現
function isVisible($node){
$(window).on('scroll',function(){ var winH = $(window).height(),
winS = $(window).scrollTop(),
nodeHeight = $node.height(),
nodeTop = $node.offset().top; if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){ console.log(true);
}else{ console.log(false);
}
});
}isVisible($node);
當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。在元素第一次出現時在控制臺打印true，以后再次出現不做任何處理。用代碼實現
function isVisible($node){
$(window).on('scroll',function(){ var winH = $(window).height(),
winS = $(window).scrollTop(),
nodeHeight = $node.height(),
nodeTop = $node.offset().top; if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){ if(!$node.attr("data-sc")){ console.log(true);
$node.attr("data-sc",true);
}else{ return;
}
}else{ return;
}
});
}
isVisible($node);圖片懶加載的原理是什么？
在頁面載入的時候將頁面的img的地址指向一個小的的同樣的白色圖片，將真實的圖片地址放在創建的自定義屬性中如：
<img src="small.png" data-src="true.png">
src為小圖地址，data-src為真實地址。
當圖片出現在窗口可視區域時，將自定義屬性里的真實圖片地址賦給src為懶加載的實現原理。
本篇對jquery進行了講解，更多相關內容請關注Gxl網。
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2023 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
