Question

所以我有JSON对象，我正在阅读看起来像

{数据：[对象，对象.....]}

目前我正在使用

的getJSON

提取该数据的方法。假设此阵列中有大约1600组对象。

目前，当我加载页面时，它需要几秒钟，因为它正在解析所有这些对象。我将如何使用呈现前100个对象然后下一百个对象的逻辑等等。没有任何滞后

任何反馈都将不胜感激

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

  function getInformation(obj){
          console.log(obj);

          var $ul = $('<ul>').addClass('view').appendTo('body');

          for (var i = 0; i < 4; i++) {
              var $list = $('<li>').appendTo($ul);
              var $image = $('<img>').appendTo($list);
              var $content = $('<div>').appendTo($list);
              var $productName = $('<div>').appendTo($content);
              var $price = $('<div>').appendTo($content);

              $image.attr({src: obj.imageUrl,
               width: '200px',
               height: '200px'
              });

              $content.addClass('content');
              $productName.addClass('productName');
              $price.addClass('price');

              $productName.html(obj.fullName);
              $price.html('Price: '+ obj.price);
          }

  }

Answer 1

在底部之前滚动到100px将执行插入数据的代码

window.bInsertingJSON = false;
window.onscroll = function(){
    if(window.pageYOffset >= (document.body.scrollHeight-document.body.clientHeight - 100) && !window.bInsertingJSON) {
        // add block flag
        window.bInsertingJSON = true;
        // here's your code
        // don't forget to reset flag on the end of JSON parsing/inserting
    }
}

你的getInformation函数对于DOM来说非常重要......需要很多附加和更改，方便使用

function getInformation(obj){
    console.log(obj);
    var sHTML = "";
    for (var i = 0; i < 4; i++) {
        sHTMl += "<li>";
        sHTMl += "<img src='" + obj.imageUrl + "' style='width:200px;height:200px'/>";
        sHTMl += "<div class='content'><div>";
        sHTMl += "<div class='productName'>" + obj.fullName + "<div>";
        sHTMl += "<div class='price'>Price: " + obj.price + "</div>";
        sHTMl += "</li>";
    }
    $("<ul class='view'>"+sHTML+"</ul>").appendTo(body);
    // and I'll give a second for implement it
    setTimeout(function(){window.bInsertingJSON = false;},1000);
}

我看到你使用jQuery。做得好。让我们将事件处理程序更改为jQuery。首先，解释一下旗帜。将其用于块事件处理，直到插入新对象。

让我们开始

您不需要定义它，因为我们使用全局变量，在开始时将其设置为false

window.bInsertingJSON = false;

在向上滚动时插入块，让我们定义变量

window.nPrevScroll = 0;

准备好窗口

$（函数（）{

接下来让我们定义滚动的事件句柄

$(window).on("scroll", function(){

这里我们需要为insert插入条件，如果向下滚动（100在底部100px是常数）

if($(window).scrollTop() > window.prevScroll

并比较滚动位置和window.height

&& $(window).scrollTop() + $("body").outerHeight() + 100 >= $(document).outerHeight()

并标记停止事件处理，直到插入DOM元素

&& !window.bInsertingJSON) {

设置停止处理标志

window.bInsertingJSON = true;

并呼叫你ajax请求

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

条件结束

事件处理程序结束

});

现在，定义处理功能

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

在这里你可以重置标志进行处理。我建议添加1秒暂停以插入完成的DOM并更改窗口大小

    setTimeout(function(){window.bInsertingJSON = false;},1000);
}

正如我在本案中所看到的，您将阻止不需要的JSON解析调用。

现在，这是没有评论的完整代码

window.bInsertingJSON = false;
    window.nPrevScroll = 0;
$(function(){    
    $(window).on("scroll", function(){
        if($(window).scrollTop() > window.prevScroll
            && $(window).scrollTop() + $("body").outerHeight() + 100 >= $(document).outerHeight()
            && !window.bInsertingJSON) {
            window.bInsertingJSON = true;
            $.getJSON('products.json', function (pdata) {
                for(var i =0; i < pdata.data.length; i++) {
                    getInformation(pdata.data[i]);
                }
            });
        }
        window.nPrevScroll = $(window).scrollTop();
    });

});

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

    setTimeout(function(){window.bInsertingJSON = false;},1000);
}

Answer 2

老实说，我会使用一个框架为你做这个，比如datatables或angular。

但是，如果您实现了某种逻辑，并且您认为您的独特解决方案是最佳解决方案，那么您所要做的就是将数据列表保存在全局对象中并对其进行分页，只需添加“下一个10”即可。用户滚动到页面底部。

有些事情：

var data = [];
var page = 0;
function loadNext(int number){
    page++;
    RenderNext(data.splice(page-1 * size, page * size);
}

其中RenderNext（）是您以前存在的代码，用于解析您的参数中的所有记录。

我如何在我的DOM中实现无限滚动

2 个答案: