欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)頁(yè)面數(shù)據(jù)懶加載

 更新時(shí)間：2020年02月13日 10:53:52   作者：鐺鐺當(dāng)  
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)頁(yè)面數(shù)據(jù)懶加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

頁(yè)面數(shù)據(jù)懶加載。Div移動(dòng)到可視區(qū)域再去ajax加載內(nèi)容。

最近有需求做頁(yè)面的多個(gè)table用于加載數(shù)據(jù)，但是用戶瀏覽頁(yè)面的時(shí)候不需要一次將頁(yè)面所有的東西加載出來(lái)，比如頁(yè)面上3個(gè)table就占滿了，用戶點(diǎn)進(jìn)去第一眼也就只能看到3個(gè)。為了防止一次加載拖慢了頁(yè)面的速度，所以之后的table我們要懶加載。即該table移動(dòng)到了可視區(qū)域再去異步請(qǐng)求加載數(shù)據(jù)。

以下為目前實(shí)現(xiàn)的方法：

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

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論