JS實現頁面資料懶載入
阿新 • • 發佈:2020-02-14
頁面資料懶載入。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、目前使用的是該方法,有更好的方法的可以留言討論,如果我又發現了更好的方法會持續更新
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。