-
判斷一個元素是否出現在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）
function isVisible($node){
var offsetTop=$node.offset().top;
var windowHeight=$(window).height();
var scrollTop=$(window).scrollTop()
if(offsetTop<windowHeight+scrollTop&&offsetTop>scrollTop){
return true;
}
}
-
當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。每次出現都在控制臺打印 true
function isVisible($node){
var offsetTop=$node.offset().top;
var windowHeight=$(window).height();
var scrollTop=$(window).scrollTop();
$(window).on('scroll',function(){
if(offsetTop<windowHeight+scrollTop&&offsetTop>scrollTop){
console.log( 'true');
}
})
}
-
當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。在元素第一次出現時在控制臺打印 true，以后再次出現不做任何處理。
function isVisible($node){
var offsetTop=$node.offset().top;
var windowHeight=$(window).height();
var scrollTop=$(window).scrollTop();
$(window).on('scroll',function(){
if(offsetTop<windowHeight+scrollTop&&offsetTop>scrollTop){
console.log( 'true');
}
})
}
$(window).on('scroll',function(){
var $text=$('.text')
if(isVisible($text)&&!$text.hasclass('show')){
$text.addclass('show')
console.log('true')
}else{
console.log('false')
}
})
-
懶加載的原理
先將img標簽中的src鏈接設為同一張圖片（空白圖片），將其真正的圖片地址存儲，在img標簽的自定義屬性中（比如data-src）,當js監聽到該圖片元素進入到可視窗口時，即將自定義屬性中的地址存儲到src屬性中，達到懶加載的效果。
這樣做能防止頁面一次性向服務器響應大量請求導致服務器響應慢，頁面卡頓或崩潰的問題。
-
懶加載效果的實現
