本篇教你如何實現jquery的懶加載會到頂部。
如何判斷一個元素是否出現在視窗視覺範圍(瀏覽器的上緣和下緣之間,肉眼可視)。寫一個函數 isVisible實作
1 2 3 4 5 6 7 | 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 。用程式碼實作
1 2 3 4 5 6 7 8 9 | 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,以後再次出現不做任何處理。用程式碼實作
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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的位址指向一個小的的同樣的白色圖片,將真實的圖片位址放在創建的自訂屬性中如:
1 | <img src= "small.png" data-src= "true.png" >
|
登入後複製
src為小圖位址,data-src為真實位址。
當圖片出現在視窗視覺區域時,將自訂屬性裡的真實圖片位址賦給src為懶載入的實作原理。
本篇對jquery進行了講解,更多相關內容請關注php中文網。
相關推薦:
關於this的相關問題
JS陣列、字串及數學函數
關於JS時間物件與遞迴問題
以上是實現jquery懶加載、回到頂部的詳細內容。更多資訊請關注PHP中文網其他相關文章!