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

Question

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

{data:[Object,Object.....]}

目前我正在使用

getJSON

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

目前，当我加载页面时，它需要几秒钟的时间来解析所有这些对象。我将如何处理呈现前一百个对象然后再呈现下百个对象的逻辑等等。没有任何滞后

任何反馈将不胜感激

  $.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。首先，解释一下标志。将其用于 block 事件处理，直到您插入新对象。

开始吧

不需要定义，因为我们使用的是全局变量，启动时设置为false

window.bInsertingJSON = false;

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

window.nPrevScroll = 0;

窗口准备就绪

$(函数(){

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

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

这里我们需要写插入条件，if scroll down (100 is constant for 100px in bottom)

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);
}