滾動功能不會從外部json加載下一個50個項目

想法一次只加載50個項目以幫助加載頁面。
我有代碼將加載前50個項目形成一個json文件。滾動功能不會從外部json加載下一個50個項目

然後我想要加載下一個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=&#123;&#34;src&#34;&#58;&#32;&#34;#hidden-content-3'+json.values[i].id+'&#34;&#44;&#32;&#34;touch&#34;&#58;&#32;false&#125;'; 
     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項等。我用數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=&#123;&#34;src&#34;&#58;&#32;&#34;#hidden-content-3'+json.values[i].id+'&#34;&#44;&#32;&#34;touch&#34;&#58;&#32;false&#125;'; 
     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
任何幫助都會很棒。

來源

2017-05-24 MPummel

只是一個點，你可能需要修正...第50會加載，那麼第一個「加法」將有跳躍= 51，下一次的負荷情況，跳過= 52 - I認爲你想'var total = number * 50;'not'var total = number + 50;' –

這是正確的。 – MPummel

關於你的問題 - 如果你檢查** developer **工具控制檯，你是否在一個請求中獲得所有2000個項目，或者是否有多個請求被提出 - 如果它全部在一個請求中，問題是服務器是因爲（除了我的第一條評論中的問題），代碼看起來沒問題（儘管我可以告訴它，因爲格式幾乎是不可讀的） –

除非您停止滾動，當您到達中途時，您會得到scroll的多個觸發器 - 您需要引入一些標誌來指示請求正在運行，並忽略滾動事件，直到新數據加載

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=&#123;&#34;src&#34;&#58;&#32;&#34;#hidden-content-3' + json.values[i].id + '&#34;&#44;&#32;&#34;touch&#34;&#58;&#32;false&#125;'; 
         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; 
     }); 
    } 
});

來源

2017-05-24 01:46:10

滾動功能不會從外部json加載下一個50個項目

回答

相關問題