我如何在DOM中实现无限滚动 [英] How would i implement an infinite scroll in my DOM
问题描述
所以我有一个正在读取的JSON对象，
So i have JSON object that i am reading through which looks like
{data:[Object，Object .....]}
{data:[Object,Object.....]}
当前我正在使用
getJSON
getJSON
提取数据的方法. 假设此数组中大约有1600组对象.
method to extract that data. Say there are around 1600 sets of Objects in this array.
当前，当我加载页面时，由于要解析所有这些对象，因此需要花费几秒钟的时间.我将如何处理呈现前一百个对象，然后呈现下一个一百个对象的逻辑，依此类推.没有任何滞后
Currently when i load the page it takes a few seconds as it is parsing all those objects. How would i go about with the logic of presenting the first hundred objects and then the next hundred and so on. Without any lags
任何反馈将不胜感激
$.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);
}
}
推荐答案
滚动到100px，然后在底部执行插入数据的代码
scroll to 100px before bottom will execute you code with inserting data
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来说非常繁重...可以进行大量附加和更改，易于使用
you getInformation function is very heavy for DOM... to much appends and changes, easy use
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. 首先，说明一下标志.将其用于阻止事件处理，直到插入新对象为止.
As I see you use jQuery. Well done. Let's change event handler to jQuery. First, explain about flag. Use this for block event processing till you insert new Objects.
开始吧
您无需定义它，因为我们使用全局变量，将其在开始时设置为false
You do not need to define it as we use global variable, set it to false on start
window.bInsertingJSON = false;
对于向上滚动插入块，让我们定义变量
for block inserting on scroll up, let's define variable
window.nPrevScroll = 0;
在窗口就绪
$(function(){
$(function(){
接下来让我们为滚动定义事件句柄
next let's define event handle for scroll
$(window).on("scroll", function(){
如果向下滚动(底部100像素为100不变)，我们需要在此处编写插入条件
here we need to write condition for insert, if scroll down (100 is constant for 100px in bottom)
if($(window).scrollTop() > window.prevScroll
比较滚动位置和window.height
and compare scroll position and window.height
&& $(window).scrollTop() + $("body").outerHeight() + 100 >= $(document).outerHeight()
并标记停止事件处理，直到插入DOM元素
and flag for stop event processing until insert DOM elements
&& !window.bInsertingJSON) {
设置停止处理标志
window.bInsertingJSON = true;
并致电给您ajax请求
and call you ajax request
$.getJSON('products.json', function (pdata) {
for(var i =0; i < pdata.data.length; i++) {
getInformation(pdata.data[i]);
}
});
条件终止
}
事件处理程序结束
});
现在，定义您的处理功能
Now, define you processing function
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插入并更改窗口大小
And here you can reset flag for processing. I recommend add 1 sec pause for inserting in DOM finished and window size changed
setTimeout(function(){window.bInsertingJSON = false;},1000);
}
在这种情况下，您会阻止不必要的JSON解析调用.
As I see in this case you'll block unneeded JSON parsing calls.
现在，这是没有注释的完整代码
Now, this is complete code without comments
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);
}
这篇关于我如何在DOM中实现无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
