1、如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）俊柔。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)
- 元素剛剛出現(xiàn)的條件：windowHeight + scrollTop = 元素的offsetTop眷茁；
- 元素剛剛消失的條件：scrollTop = 元素的offsetTop + 元素的height
-
isVisible函數(shù)如下代碼：
function isVisible($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.height();
if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){
return true;
}else{
return false;
}
}
2、當(dāng)窗口滾動(dòng)時(shí)昭殉，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺(tái)打印 true 藐守，用代碼實(shí)現(xiàn)
- 代碼如下所示：
<div class="box"></div>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(window).on("scroll",function(){
if(isVisible($(".box"))){
console.log("true");
}
});
function isVisible($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.height();
if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){
return true;
}else{
return false;
}
}
</script>
-
如下圖GIF所示：
2.gif
3挪丢、當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍卢厂。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true乾蓬，以后再次出現(xiàn)不做任何處理，用代碼實(shí)現(xiàn)
- 代碼如下圖所示：
<div class="box"></div>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(window).on("scroll",function(){
if(isVisible($(".box")) && !($(".box").hasClass("justone"))){
console.log("true");
$(".box").addClass("justone");
}
});
function isVisible($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.height();
if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){
return true;
}else{
return false;
}
}
-
如下圖GIF所示：
3.gif
4慎恒、圖片懶加載的原理是什么任内？
- 圖片懶加載的原理是先不設(shè)置img的src屬性，先將src上的地址存儲(chǔ)在一個(gè)自定義的屬性上融柬，比如data-src死嗦；等到合適的時(shí)機(jī)（比如滾動(dòng)條滾動(dòng)到圖片的頂端即img要顯示的時(shí)候），把data-src上img的地址給src屬性粒氧，這樣圖片就顯示出來(lái)了
5越走、 實(shí)現(xiàn)視頻中的圖片懶加載效果
6、實(shí)現(xiàn)視頻中的新聞懶加載效果
- 代碼預(yù)覽
-
效果如下圖GIF所示：
6.gif
版權(quán)聲明：本教程版權(quán)歸鄧攀和饑人谷所有，轉(zhuǎn)載須說明來(lái)源＠鹊小Ｍ堋！骡澈！
