Javascript Scroll函数不从外部json加载接下来的50项
其想法是一次只加载50个项目,以帮助加载页面。Javascript Scroll函数不从外部json加载接下来的50项,javascript,jquery,json,Javascript,Jquery,Json,其想法是一次只加载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
我有将前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;
}
};
});
});
//这将从外部Json文件加载前50项。这里没有问题
$(窗口)。加载(函数(){
var picarioAPI=”https://sdlbytheyard.picarioxpo.com/xpo/api/v1/designs/search/Customizable&Customizable/?apiKey=f02ac05d0a664db08274c7d7c4c0b594&skip=0&take=50";
var newtext=document.getElementById(“DeisgnLibraryPopuButtom”).innerHTML
$.getJSON(picarioAPI,函数(json){
var text=“”;
for(json.values中的i)
for(json.values[i].labels中的var j){
if(json.values[i].labels[j].name==“Show”){
//这是一个弹出功能。
var b='data options={;";src";:; ;";#hidden-content-3'+json.值[i].id+'";,; ;touch&";:& ;false;';
text+=''+json.values[i].name+'
'+newtext+'';
document.getElementById(“设计1”).innerHTML=text;
}
};
});
});
然后我加载一个滚动功能来加载接下来的50个项目,以此类推。我使用这个数字将50个项目添加到Json文件API的末尾
//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;
}
};
});
};
});
//这是我不正确的部分。
var数=0;
$(窗口)。滚动(函数(){
如果($(窗口).scrollTop()>$('body').height()/2){
数字++;
//我使用这个数字在用户滚动时动态加载接下来的50个项目。
var总数=数量+50;
picarioAPI变量https://sdlbytheyard.picarioxpo.com/xpo/api/v1/designs/search/Customizable&Customizable/?apiKey=f02ac05d0a664db08274c7d7c4c0b594&skip=“+total+”&take=50';
var newtext=document.getElementById(“DeisgnLibraryPopuButtom”).innerHTML
$.getJSON(picarioAPI,函数(json){
var text=“”;
for(json.values中的i)
for(json.values[i].labels中的var j){
if(json.values[i].labels[j].name==“Show”){
//这是一个弹出功能
var b='data options={;";src";:; ;";#hidden-content-3'+json.值[i].id+'";,; ;touch&";:& ;false;';
text+=''+json.values[i].name+'
'+newtext+'';
document.getElementById(“设计1”).innerHTML+=document.getElementById(“设计1”).innerHTML+文本;
}
};
});
};
});
问题是当我向下滚动到页面的一半时,它将开始加载所有2000个项目,而不仅仅是下一个50个项目任何帮助都会很好。除非您刚好在到达一半时停止滚动,否则您将获得多个
滚动的触发器-您需要引入一些标志来指示请求正在进行中,并忽略滚动事件,直到加载新数据
var inflight = false;
var number = 0;
$(window).scroll(function() {
if (!inflight && $(window).scrollTop() > $('body').height() / 2) {
inflight = true;
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;
}
}
}
inflight = false;
});
}
});
var-inflight=false;
var数=0;
$(窗口)。滚动(函数(){
如果(!inflight&&$(window).scrollTop()>$('body').height()/2){
飞行中=正确;
数字++;
//我使用这个数字在用户滚动时动态加载接下来的50个项目。
var总数=数量+50;
picarioAPI变量https://sdlbytheyard.picarioxpo.com/xpo/api/v1/designs/search/Customizable&Customizable/?apiKey=f02ac05d0a664db08274c7d7c4c0b594&skip=“+total+”&take=50';
var newtext=document.getElementById(“DeisgnLibraryPopuButtom”).innerHTML
$.getJSON(picarioAPI,函数(json){
var text=“”;
for(json.values中的i){
for(json.values[i].labels中的var j){
if(json.values[i].labels[j].name==“Show”){
//这是一个弹出功能
var b='data options={;";src";:; ;";#hidden-content-3'+json.值[i].id+'";,; ;touch&";:& ;false;';
text+=''+json.values[i].name+'
'+newtext+'';
document.getElementById(“设计1”).innerHTML+=document.getElementById(“设计1”).innerHTML+文本;
}
}
}
飞行中=错误;
});
}
});
只是您可能需要修复的一点。。。前50个将加载,然后第一个“加法”将有skip=51,下一次加载时,skip=52-我想您需要var total=number*50代码>非<代码>变量总数=数量+50代码>这是正确的。关于您的问题-如果您检查开发人员工具控制台,您是在一个请求中获得所有2000个项目,还是正在发出多个请求-如果都在一个请求中,问题是服务器正在发送所有项目,因为(除了我第一条注释中的问题)代码看起来正常(据我所知,因为格式几乎不可读)这是正确的
-什么是?skip=51然后skip=52…或者你的意思是我的更正是正确的:pIt应该是var total=number*50;。