這篇文章給大家介紹使用JavaScript怎么實現懶加載頁面數據，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
<!-- page lazyloading -->
<script>
$(function(){
// 設置布爾值用于判斷是否該DIV到達過可視區域
var scrollflaga = true;
// 監聽滾輪事件
$(window).scroll(function() {
// 要加載的DIV的ID
// 距離可視區域頂部的距離
var a = document.getElementById("myDiv").offsetTop;
if (scrollflaga == true) {
// 判斷
// $(window).scrollTop()為返回滾動條的垂直位置
// $(window).height()代表了當前可見區域的大小,即你看到的瀏覽器顯示范圍
if (a >= $(window).scrollTop() && a < ($(window).scrollTop()+$(window).height())) {
// 如果到達了可視區域，則設置其布爾值為false，防止一直調用下面函數，即只做一次ajax請求
scrollflaga = false;
// 你的ajax請求函數
loadingFunction();
}
}
}
</script>1、需要導入jquery文件
2、封裝的不是很好，對于多的要加載的數據，比如有許多個div下的table要懶加載，就要設置對應的多個布爾值用于判斷是否各個div是否加載，要申明個多變量（有多少個div就申明幾個對應的變量）去獲取他們距離屏幕頂部的高度然后做判斷
3、目前使用的是該方法，有更好的方法的可以留言討論，如果我又發現了更好的方法會持續更新
關于使用JavaScript怎么實現懶加載頁面數據就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
