jQuery:实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容

实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容

这个类似于京东或淘宝页面,根绝页面的滚动,显示下面的内容

如下图所示,一开始并不是所有的图片都显示,当滚动条移动到页面最下面的时候,再显示下面的内容

jQuery:实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容

解决思路:通过判断滚动条是否滚动到了页面的最下面,如果滚动到了页面的最下面,则重新加载图片

知识点: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);
}
}

完整的代码为:

上一篇:转载 yii2-按需加载并管理CSS样式/JS脚本


下一篇:10327 - Flip Sort