【发布时间】：2017-05-24 09:46:10
【问题描述】：
我们的想法是一次只加载 50 个项目以帮助加载页面。
我有将前 50 个项目从 json 文件加载的代码。
然后我想在用户向下滚动页面的一半时加载下一个 50 并继续告诉没有更多的项目要加载。
这是我目前所拥有的。
//This loads the first 50 items from external Json file. No issue here
$(window).load(function(){
var picarioAPI = "https://sdlbytheyard.picarioxpo.com/xpo/api/v1/designs/search/Customizable&Customizable/?apiKey=f02ac05d0a664db08274c7d7c4c0b594&skip=0&take=50";
var newtext = document.getElementById("DeisgnLibraryPopupButtom").innerHTML
$.getJSON(picarioAPI, function (json) {
var text = "";
for (i in json.values)
for (var j in json.values[i].labels) {
if (json.values[i].labels[j].name == "Show") {
// This is for a popup function.
var b = 'data-options={"src": "#hidden-content-3'+json.values[i].id+'", "touch": false}';
text += '<div class="prod" style="float:left;"><a data-fancybox ' + b + ' href="javascript:;" onclick="test()"><img class="lazyload" src="' + json.values[i].displayUrl + '"><p class="title">' + json.values[i].name + '</p></a></div><div style="display: none;max-width:500px;" id="hidden-content-3'+json.values[i].id+'"><img class="lazyload" src="' + json.values[i].displayUrl + '" data-height="'+json.values[i].height+'"data-width="'+json.values[i].width+'"data-url="'+json.values[i].displayUrl+'"data-full="'+json.values[i].renderUrl +'"data-name="'+json.values[i].name+'"><p class="title">' + json.values[i].name + '</p>' + newtext + '</div>';
document.getElementById("design1").innerHTML = text;
}
};
});
});
然后我加载一个滚动函数来加载接下来的 50 个项目，依此类推。我用数字在 Json 文件 API 的末尾添加 50 项
//This is the part I'm not getting correct.
var number = 0;
$(window).scroll(function () {
if ($(window).scrollTop() > $('body').height() / 2) {
number++;
// I use the number to dynamically load the next 50 items as the user scrolls.
var total = number + 50;
var picarioAPI = 'https://sdlbytheyard.picarioxpo.com/xpo/api/v1/designs/search/Customizable&Customizable/?apiKey=f02ac05d0a664db08274c7d7c4c0b594&skip='+total+'&take=50';
var newtext = document.getElementById("DeisgnLibraryPopupButtom").innerHTML
$.getJSON(picarioAPI, function (json) {
var text = "";
for (i in json.values)
for (var j in json.values[i].labels) {
if (json.values[i].labels[j].name == "Show") {
//this is for a popup function
var b = 'data-options={"src": "#hidden-content-3'+json.values[i].id+'", "touch": false}';
text += '<div class="prod" style="float:left;"><a data-fancybox ' + b + ' href="javascript:;" onclick="test()"><img class="lazyload" src="' + json.values[i].displayUrl + '"><p class="title">' + json.values[i].name + '</p></a></div><div style="display: none;max-width:500px;" id="hidden-content-3'+json.values[i].id+'"><img class="lazyload" src="' + json.values[i].displayUrl + '" data-height="'+json.values[i].height+'"data-width="'+json.values[i].width+'"data-url="'+json.values[i].displayUrl+'"data-full="'+json.values[i].renderUrl +'"data-name="'+json.values[i].name+'"><p class="title">' + json.values[i].name + '</p>' + newtext + '</div>';
document.getElementById("design1").innerHTML += document.getElementById("design1").innerHTML + text;
}
};
});
};
});
问题是当我将页面向下滚动到一半时，它将开始加载所有 2000 个项目，而不仅仅是接下来的 50 个。
任何帮助都会很棒。
【问题讨论】：
-
只是你可能想要修复的一点......前50个将加载，然后第一个“加法”将有skip=51，下次加载时，skip=52 - 我想你想要
var total = number * 50;而不是var total = number + 50; -
没错。
-
关于您的问题 - 如果您检查 developer 工具控制台，您是在一个请求中获得了所有 2000 个项目，还是发出了多个请求 - 如果全部都在一个请求，问题是服务器正在发送它们，因为（除了我第一条评论中的问题）代码看起来不错（据我所知，因为格式几乎不可读）
-
That is correct- 是什么？ skip=51 然后skip=52 ...或者你的意思是我的更正是正确的：p -
应该是 var total = number * 50;.
标签： javascript jquery json