1. 如何判斷一個元素是否出現在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個函數 isVisible實現
function isVisible($el) {
var winH = $(window).height(), //窗口高度
offsetH = $el.offset().top, //此元素垂直方向偏移
scrollH = $(window).scrollTop() //垂直滾動距離
if((offsetH > scrollH) && (offsetH < scrollH + winH)){//根據這三個參數的值進行判定
return true
}else{
return false;
}
}
2. 當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。每次出現都在控制臺打印 true
var $e = $("p");
$(window).on("scroll",function(){
isVisible($e)
});
function isVisible($e){
var winHeight = $(window).height(),
WinTop = $(window).scrollTop(),
offsetTop = $e.offset().top
if(offsetTop < winHeight+WinTop){
console.log("位于可視區域內")//出現了就打印
return true
}else{
return false
}
}
3. 當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。在元素第一次出現時在控制臺打印 true，以后再次出現不做任何處理
var $p=$('.test-p');
$(window).on('scroll',function(){
if( $p.data('isVisi') ){
return;
}else{
isVisible($p);
}
});
function isVisible($node){
var winH=$(window).height(),
scrollTop=$(window).scrollTop(),
offsetTop=$node.offset().top;
if( offsetTop<winH+scrollTop && offsetTop>scrollTop){
console.log(true);
$p.data('isVisi',true);
}else{
return;
}
};
4. 圖片懶加載的原理是什么？
把圖片真實的URL 放在data-img的值中,當圖片進入可視區域的瞬間把data-img賦給src
