JS實現(xiàn)頁面數(shù)據(jù)懶加載
更新時間：2020年02月13日 10:53:52 作者：鐺鐺當(dāng)
這篇文章主要為大家詳細介紹了JS實現(xiàn)頁面數(shù)據(jù)懶加載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
頁面數(shù)據(jù)懶加載。Div移動到可視區(qū)域再去ajax加載內(nèi)容。
最近有需求做頁面的多個table用于加載數(shù)據(jù)，但是用戶瀏覽頁面的時候不需要一次將頁面所有的東西加載出來，比如頁面上3個table就占滿了，用戶點進去第一眼也就只能看到3個。為了防止一次加載拖慢了頁面的速度，所以之后的table我們要懶加載。即該table移動到了可視區(qū)域再去異步請求加載數(shù)據(jù)。
以下為目前實現(xiàn)的方法：
<!-- page lazyloading -->
<script>
$(function(){
// 設(shè)置布爾值用于判斷是否該DIV到達過可視區(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())) {
// 如果到達了可視區(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ù)更新
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中使用參數(shù)個數(shù)實現(xiàn)重載功能
這篇文章主要介紹了JavaScript中使用參數(shù)個數(shù)實現(xiàn)重載功能,需要的朋友可以參考下2017-09-09
這篇文章主要為大家介紹了js常用的方法示例梳理總結(jié)及功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了JavaScript大文件上傳的處理方法之切片上傳,切片上傳的原理較為簡單，即獲取文件后切片，切片后整理好每個切片的參數(shù)并發(fā)請求即可2022-06-06
JavaScript+html5 canvas制作色彩斑斕的正方形效果
這篇文章主要介紹了JavaScript+html5 canvas制作色彩斑斕的正方形效果,實例分析了JavaScript結(jié)合html5 canvas實現(xiàn)圖形動態(tài)繪制的技巧,需要的朋友可以參考下2016-01-01
鼠標(biāo)事件的抓取實現(xiàn)代碼，需要的朋友可以參考下。2010-04-04
JavaScript實現(xiàn)pdf文件導(dǎo)出和在線預(yù)覽功能
這篇文章主要為大家詳細介紹了如何通過JavaScript實現(xiàn)在線導(dǎo)出pdf文件,及office文件如何在線預(yù)覽,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
js遍歷獲取表格內(nèi)數(shù)據(jù)的方法(必看)
下面小編就為大家?guī)硪黄猨s遍歷獲取表格內(nèi)數(shù)據(jù)的方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
本篇主要是對js二維數(shù)組排序的簡單示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
JavaScript 中實現(xiàn) use strict的方法及優(yōu)勢
本教程將討論JavaScript中的use strict特性,在這里,我們將通過不同的示例了解如何在JavaScript代碼語句中創(chuàng)建和執(zhí)行use strict關(guān)鍵字,需要的朋友可以參考下2023-09-09
本文詳細介紹了如何在Uniapp中獲取用戶的地理位置,包括申請高德地圖的Key、配置定位功能以及實現(xiàn)定位功能的代碼示例,感興趣的小伙伴跟著小編一起來看看吧2025-02-02