這篇文章給大家介紹使用JavaScript怎么實現(xiàn)懶加載頁面數(shù)據(jù)，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)是一家專業(yè)提供潢川企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、網(wǎng)站制作、H5場景定制、小程序制作等業(yè)務(wù)。10年已為潢川眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

<!-- page lazyloading -->
<script>
$(function(){
  // 設(shè)置布爾值用于判斷是否該DIV到達(dá)過可視區(qū)域
 var scrollflaga = true;
  // 監(jiān)聽滾輪事件
 $(window).scroll(function() {
  // 要加載的DIV的ID
  // 距離可視區(qū)域頂部的距離
 var a = document.getElementById("myDiv").offsetTop;
 if (scrollflaga == true) {
    // 判斷
    // $(window).scrollTop()為返回滾動條的垂直位置
    // $(window).height()代表了當(dāng)前可見區(qū)域的大小,即你看到的瀏覽器顯示范圍
   if (a >= $(window).scrollTop() && a < ($(window).scrollTop()+$(window).height())) {
      // 如果到達(dá)了可視區(qū)域，則設(shè)置其布爾值為false，防止一直調(diào)用下面函數(shù)，即只做一次ajax請求
     scrollflaga = false;
      // 你的ajax請求函數(shù)
     loadingFunction();
 }
  }
}
</script>

1、需要導(dǎo)入jquery文件

2、封裝的不是很好，對于多的要加載的數(shù)據(jù)，比如有許多個div下的table要懶加載，就要設(shè)置對應(yīng)的多個布爾值用于判斷是否各個div是否加載，要申明個多變量（有多少個div就申明幾個對應(yīng)的變量）去獲取他們距離屏幕頂部的高度然后做判斷

3、目前使用的是該方法，有更好的方法的可以留言討論，如果我又發(fā)現(xiàn)了更好的方法會持續(xù)更新

關(guān)于使用JavaScript怎么實現(xiàn)懶加載頁面數(shù)據(jù)就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

本文題目：使用JavaScript怎么實現(xiàn)懶加載頁面數(shù)據(jù)
文章分享：http://jinyejixie.com/article0/psgooo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、品牌網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、品牌網(wǎng)站設(shè)計、自適應(yīng)網(wǎng)站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)