Javascript JSON对象（如何最初不在DOM上加载整个对象）

因此，我正在读取一个由{[Object，Object，Object….]}组成的本地json文件 我正在使用

 $.getJSON('products.json', function (pdata) {
              for (var i = 0; i < pdata.data.length; i++) {
                  AppendtoDom(pdata.data[i]);

              }

$.getJSON（'products.json'，函数（pdata）{
对于（var i=0；i

上面的代码读取json对象并将其附加到DOM中，但我希望一开始一次只加载100个对象，然后滚动添加

假设有大约1200个物体，我该怎么做呢

我的实施至今

  $(function(){
      loadData();
  });

  function loadData(){
      $.getJSON('products.json', function (pdata) {
          var i = 0;
              function addtoDom(num){
                  var limit = Math.min(i + num, pdata.data.length);
                  for(; i < limit; i++){
                      getInformation(pdata.data[i]);
                  }
              }
              addtoDom(100);
          $('.content').jscroll({
              callback: addtoDom(100)
          });
      });
  }

  function getInformation(obj){
         var content = "";
          for (var i = 0; i < 4; i++) {
              content += '<li>';
              content += "<img src='" + obj.imageUrl + "' style='width:200px;height:200px'/>";
              content += '<div class="productName">' + obj.fullName + "</div>";
              content += '<div class="price">Price: ' + obj.price + "</div>";
              content +=  '</li>';
          }
      $("<ul class= 'view'>" + content + "</ul>").appendTo('.content');


  }

$（函数（）{
loadData（）；
});
函数loadData（）{
$.getJSON（'products.json'，函数（pdata）{
var i=0；
函数addtoDom（num）{
var limit=Math.min（i+num，pdata.data.length）；
对于（；i”；
内容+=”；
content+=''+obj.fullName+''；
内容+=“价格：”+obj.Price+”；
内容+=''；
}
$（“
”+content+“
”）.appendTo（'.content'）；
}

---

类似于我在

中提出的问题，您可以将从Ajax调用返回的所有对象放入一个持久变量中，将前100个对象添加到DOM中，保留一个到目前为止添加了多少对象的计数器，然后滚动到某个点，再添加100个对象，再添加100个对象，依此类推

$.getJSON('products.json', function (pdata) {
     var i = 0;

     function addMore(num) {
         var limit = Math.min(i + num, pdata.data.length);
         for (; i < limit; i++) {
              AppendtoDom(pdata.data[i]);
         }
     }

     // add the first 100
     addMore(100);

     // then set up whatever scroll detection you want here and 
     // when you decide that it has scrolled enough to add some more
     // you just call addMore(100) again

});

为此：

      $('.content').jscroll({
          callback: function() {addtoDom(100);}
      });

---

您可以将从Ajax调用返回的所有对象放入一个持久变量中，将前100个对象添加到DOM中，保留一个计数器，记录到目前为止添加了多少对象，然后滚动到某个点，再添加100个对象，再添加100个对象，依此类推

$.getJSON('products.json', function (pdata) {
     var i = 0;

     function addMore(num) {
         var limit = Math.min(i + num, pdata.data.length);
         for (; i < limit; i++) {
              AppendtoDom(pdata.data[i]);
         }
     }

     // add the first 100
     addMore(100);

     // then set up whatever scroll detection you want here and 
     // when you decide that it has scrolled enough to add some more
     // you just call addMore(100) again

});

为此：

      $('.content').jscroll({
          callback: function() {addtoDom(100);}
      });

---

将JSON分配给变量，并根据需要动态呈现它们

var-json；
$.getJSON（'products.json'，函数（pdata）{
JSON=pdata；
};
//调度逻辑
AppendtoDom（json[i]）；

将json分配给变量，并根据需要动态呈现它们

var-json；
$.getJSON（'products.json'，函数（pdata）{
JSON=pdata；
};
//调度逻辑
AppendtoDom（json[i]）

什么是

AppendtoDom

定义的？首先，你必须确定你的滚动活动，然后在哪里开始和停止，通常你允许加载DOM中的所有内容，只隐藏那些你还不想显示的内容，@jsve该函数只是将obj作为一个参数，使用obj上的属性并将其分配给必要的elements@paulpolo我可以使用jscroll插件吗？你如何隐藏这个插件的一部分logic@user3750842，是的，您可以使用使用延迟加载的插件，这可以提高性能。

AppendtoDom

定义为什么？首先，您必须确定您的滚动活动，然后在通常允许的情况下，保留一种开始和停止的标记要加载DOM中的所有内容并隐藏那些您还不想显示的内容，@jsve that函数只需将obj作为参数，并使用obj上的属性并将其分配给必要的elements@paulpolo我可以使用jscroll插件吗？你如何隐藏这个插件的一部分logic@user3750842，是的，你可以使用一个插件，它使用惰性加载，即时消息证明性能。+1但只想添加这一点，而不是单独向DOM添加100个项目，将这100个项目合并为1，然后进行1个DOM修改thnxs作为解释，而不是调用addMore（100）如何手动执行？@jasonscript-为了获得最高性能，您可能需要执行一个DOM操作（可能使用片段），但由于时间不确定（从用户的角度来看），因此不确定用户是否需要或是否注意到额外的代码添加了更多内容。@user3750842-您是否在询问如何检测滚动？如果是，您必须披露您的HTML并解释您试图检测的滚动位置（例如，逻辑上，您希望何时触发添加更多项目）？另外，请解释为什么不首先将它们全部添加到DOM中，因为您已经从服务器检索了它们。@jfriend00我正在尝试使用jscroll（）在父容器上，我的目标是一次在DOM中只有100个，然后滚动添加另一个100+1，但我只想添加这一点，而不是单独将100个项目添加到DOM中，将这100个项目合并为1，然后进行1个DOM修改thnxs以进行解释，而不是调用addMore（100）如何手动执行？@jasonscript-为了获得最高性能，您可能需要执行一个DOM操作（可能使用片段），但由于时间不确定（从用户的角度来看），因此不确定用户是否需要或是否注意到额外的代码添加了更多内容。@user3750842-您是否在询问如何检测滚动？如果是，您必须披露您的HTML并解释您试图检测的滚动位置（例如，逻辑上，您希望何时触发添加更多项目）？另外，请解释为什么不一开始就将它们全部添加到DOM中，因为您已经从服务器检索到了它们。@jfriend00我正在尝试在父容器上使用jscroll（），我的目标是一次在DOM中只添加100个，然后滚动添加另外100个