使用ajax實現移動端懶惰載入

2021-08-04 14:50:23 字數 1760 閱讀 9933

這個懶惰載入的叫法是很久以前聽說過的,當時感覺會,哈哈,就沒細做過。這次正兒八經的改了很多個這種形式,就來記錄一下。

至於它叫不叫這個名字就再說了。我還習慣叫他非同步載入。正文如下:

1.首先要檢測螢幕的滑動

var flag = 0;  用來標記每一次載入的狀態

var currentpage = 1;

$('.page').scroll(

function()}};

});

2. 螢幕移動超過一定範圍則改變 flag狀態,然後執行 downloadmoredate()方法
functiondownloadmoredata(index)
這裡主要是將當前頁進行累加,那麼這樣的話就應該先將currentpage 初始化乙個值。寫到最開始的位置
它主要用來標記載入了多少頁,然後根據總的頁數和它比較,就能判斷出各種狀態。
3.向介面請求資料 ajaxlabelcon():
functionajaxlabelcon(index),

success:function(result)else}})

}

這個方法是沒有經過加工,就為了簡單顯示其原理。
json資料返回的格式必須包括
'currentpage'=>1

,'start'=>0

,'pernum'=>3,

'total'=>6,

'pages'=>

2,4.迴圈出資料就行了

functionlistexperters(result)

$('#professlist'showmessage(result);

}

5.然後顯示各種提示狀態
functionshowmessage(result);

$('#downloadmoredata').remove();

$('#professlist''

); }else if(result.page.pages == result.page.currentpage && result.page.pages >= 1)else if(result.list.length == 0)

}

到此結束。
指的注意的是要在初始狀態加上正在載入的標籤,這樣才能從第一步開始執行。
<

aid="downloadmoredata"class=>拼命載入中<

iclass="loadmore">

i>

a>

利用ViewStub實現布局懶惰載入

這個問題也是頭條面試官問的,本身沒什麼難度,但以前確實沒仔細研究過。viewstub是一種不可見的尺寸為0的view,用來實現布局資源的懶載入。當viewstub被設定為使用者可見或其 inflate 被呼叫時,實際的布局資源才會被載入。這時viewstub在view樹中的位置會被新載入的view取...

移動端滾動載入資料實現

模擬場景 移動端上劃到底,載入更多資料。1 本例子基於jquery實現。監聽滾動事件。2 獲取滾動條到文件頂部的距離,上圖scrolltop那段。原生js可用document.documentelement.scrolltop獲取。var scrolltop math.ceil this scrol...

移動端使用下拉載入的簡單方法

var io new intersectionobserver callback,option 函式的配置 var io new intersectionobserver entries 開始觀察 io.observe document.getelementbyid example 停止觀察 io....