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

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

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

目前我正在使用

的getJSON

提取该数据的方法。 假设此arrays中有大约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 = $('
').addClass('view').appendTo('body'); for (var i = 0; i < 4; i++) { var $list = $('
').appendTo($ul); var $image = $('').appendTo($list); var $content = $('
').appendTo($list); var $productName = $('
').appendTo($content); var $price = $('
').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 += "
"; sHTMl += ""; sHTMl += "
"; sHTMl += "
" + obj.fullName + "
"; sHTMl += "
Price: " + obj.price + "
"; sHTMl += "
"; } $("
"+sHTML+"
").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

 function getInformation(obj){ console.log(obj); var sHTML = ""; for (var i = 0; i < 4; i++) { sHTMl += "
"; sHTMl += ""; sHTMl += "
"; sHTMl += "
" + obj.fullName + "
"; sHTMl += "
Price: " + obj.price + "
"; sHTMl += "
"; } $("
"+sHTML+"
").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 += "
"; sHTMl += ""; sHTMl += "
"; sHTMl += "
" + obj.fullName + "
"; sHTMl += "
Price: " + obj.price + "
"; sHTMl += "
"; } $("
"+sHTML+"
").appendTo(body); setTimeout(function(){window.bInsertingJSON = false;},1000); } 

Answer 2

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

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

有点像：

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

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