jQuery:實現圖片按需加載的方法,當要顯示內容的高度超過了頁面的高度,按需加載,根據滾動條的位置來判斷頁面顯示的內容
阿新 • • 發佈:2019-01-03
sse delay already tails wait stat sea syn bsp
實現圖片按需加載的方法,當要顯示內容的高度超過了頁面的高度,按需加載,根據滾動條的位置來判斷頁面顯示的內容
這個類似於京東或淘寶頁面,根絕頁面的滾動,顯示下面的內容
如下圖所示,一開始並不是所有的圖片都顯示,當滾動條移動到頁面最下面的時候,再顯示下面的內容
解決思路:通過判斷滾動條是否滾動到了頁面的最下面,如果滾動到了頁面的最下面,則重新加載圖片
知識點:1.offset() 方法返回或設置匹配元素相對於文檔的偏移(位置)
返回第一個匹配元素的偏移坐標。
該方法返回的對象包含兩個整型屬性:top 和 left,以像素計。此方法只對可見元素有效。
2.scrollTop():方法返回或設置匹配元素的滾動條的垂直位置。返回滾動條的垂直位置
innerHeight(): 返回滾動條的高度,當移動滾動條的位置,innerHeight()的值不變
scrollHeight: 其實不是“滾動條的高度",而是表示滾動條需要滾動的高度,即內部div的高度
參考鏈接:https://blog.csdn.net/wu_dada/article/details/78094991
實現方法是判斷是否到了頁面的最底部:
$(‘#thumbnailcontainer, .scroll-table-wrap‘).on(‘scroll‘, function () { if (loadedImages >= maximumLoadedImages) {if ($(this)[0].scrollHeight - $(this).innerHeight() - $(this).scrollTop() < 5) { _messagebox.newNotify2(GlobalStringsForAssets.MAXIMUM_LOADED_ASSETS, "", -1); } return; } if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight - 60) {if (inDelay) { return; } CallGetImages($(this), false); } })
function CallGetImages($ctl, delayed) { if (delayed) { if ($ctl.scrollTop() + $ctl.innerHeight() >= $ctl[0].scrollHeight - 60) { GetImages(); } inDelay = false; return; } inDelay = true; setTimeout(function () { CallGetImages($ctl, true); }, 100); }
function GetImages() { var timer = null; if (getImagesXhr != null) { getImageQueued = true; return; } var columnQueryData = CollectQueryData(); var sortdata; if (modelPageType === ‘brand‘) { sortdata = $(‘#brandSortFilter > button‘).attr(‘sortcolumn‘) + ‘,‘ + $(‘#brandsortdirection‘).attr(‘sortdirection‘); } else { sortdata = $(‘#sortFilter > button‘).attr(‘sortcolumn‘) + ‘,‘ + $(‘#sortdirection‘).attr(‘sortdirection‘); } var searchTerm = ‘‘; if (modelPageType == ‘brand‘) searchTerm = $(‘#brandsearchbox‘).val().trim(); else searchTerm = $(‘#searchbox‘).val().trim(); var searchTags = null; if (modelPageType !== ‘brand‘) searchTags = $(‘#additionalTags‘).autocomplete("getTags"); var currentSearch = JSON.stringify({ Columns: columnQueryData, SearchTerm: searchTerm, Tags: searchTags, Sorting: sortdata, PageType: pageType }); if (lastSearch == currentSearch && getImagesXhr !== null) { // Already running a query. Wait until it finishes. return; } var newSearch = false; if (lastSearch != currentSearch) { ClearSearch(); newSearch = true; lastSearch = currentSearch; if (getImagesXhr !== null) { getImagesXhr.abort(); getImagesXhr = null; if (modelPageType == ‘brand‘ && getCollectionsXhr !== null) { getCollectionsXhr.abort(); getCollectionsXhr = null; } } lastClickedAssetId = ‘‘; selectedCnt = 0; } if (newSearch || cachedAssets == null) { clearTimeout(timer); $(‘.centered‘).show(); imagesQueryData = { Skip: loadedImages, Batch: 50, Columns: columnQueryData, SearchTerm: searchTerm, Tags: searchTags, Sorting: sortdata, PageType: pageType }; getImagesXhr = $.ajax({ url: ‘/Assets/GetImages‘, type: ‘POST‘, dataType: ‘json‘, data: JSON.stringify(imagesQueryData), contentType: ‘application/json; charset=utf-8‘, success: function (result) { if (result.success) { imageData = result.data; ShowAssets(imageData); showMainSearchList(imageData, searchTerm,"#mainSearchBoxList"); } else { console.log("error"); } getImagesXhr = null; }, error: function (XMLHttpRequest, textStatus, errorThrown) { getImagesXhr = null; }, async: true, processData: true, complete: function () { timer=setTimeout("$(‘.centered‘).hide()", 400); getImagesXhr = null; if (getImageQueued) { getImageQueued = false; GetImages(); } if (newSearch || parseInt($(‘.numberOfSearch‘).text()) < loadedImages) { GetAssetCount(JSON.stringify({ Columns: columnQueryData, SearchTerm: searchTerm, Tags: searchTags, Sorting: sortdata, PageType: pageType })); } CacheAssets(columnQueryData, searchTerm, searchTags, sortdata, pageType); } }); } else { imageData = cachedAssets; cachedAssets = null; ShowAssets(imageData); if (parseInt($(‘.numberOfSearch‘).text()) < loadedImages) { GetAssetCount(JSON.stringify({ Columns: columnQueryData, SearchTerm: searchTerm, Tags: searchTags, Sorting: sortdata, PageType: pageType })); } CacheAssets(columnQueryData, searchTerm, searchTags, sortdata, pageType); } }
完整的代碼為:
jQuery:實現圖片按需加載的方法,當要顯示內容的高度超過了頁面的高度,按需加載,根據滾動條的位置來判斷頁面顯示的內容