頁面數據懶加載。Div移動到可視區域再去ajax加載內容。

最近有需求做頁面的多個table用于加載數據，但是用戶瀏覽頁面的時候不需要一次將頁面所有的東西加載出來，比如頁面上3個table就占滿了，用戶點進去第一眼也就只能看到3個。為了防止一次加載拖慢了頁面的速度，所以之后的table我們要懶加載。即該table移動到了可視區域再去異步請求加載數據。

以下為目前實現的方法：

<!-- 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、目前使用的是該方法，有更好的方法的可以留言討論，如果我又發現了更好的方法會持續更新

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。