1、如何判斷一個元素是否出現在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個函數 isVisible實現
- 元素剛剛出現的條件：windowHeight + scrollTop = 元素的offsetTop；
- 元素剛剛消失的條件：scrollTop = 元素的offsetTop + 元素的height
-
isVisible函數如下代碼：
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、當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。每次出現都在控制臺打印 true ，用代碼實現
- 代碼如下所示：
<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、當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。在元素第一次出現時在控制臺打印 true，以后再次出現不做任何處理，用代碼實現
- 代碼如下圖所示：
<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、圖片懶加載的原理是什么？
- 圖片懶加載的原理是先不設置img的src屬性，先將src上的地址存儲在一個自定義的屬性上，比如data-src；等到合適的時機（比如滾動條滾動到圖片的頂端即img要顯示的時候），把data-src上img的地址給src屬性，這樣圖片就顯示出來了
5、 實現視頻中的圖片懶加載效果
6、實現視頻中的新聞懶加載效果
- 代碼預覽
-
效果如下圖GIF所示：
6.gif
版權聲明：本教程版權歸鄧攀和饑人谷所有，轉載須說明來源！！！！
