javascript - 在假页面滚动上将更多数据加载到 html 模板，性能问题

Question

我有一个包含 3000 条地址记录的 JavaScript 对象。如果我将所有地址加载到容器中的图 block 中，则速度非常慢。我想要的是: - 我想在加载时加载 15-18 个地址图 block - 根据平铺高度动态计算设置容器高度，以便根据记录数在容器负载上创建滚动。例如:平铺高度:80px，总地址记录数:3000，所以容器高度 = 3000*80 - 我想在页面滚动时将 javascript 对象中的一些图 block 附加到 html 模板

但是当第一次滚动时，我的方法不起作用。我可以看到底部的空白区域。那么我可以遵循什么方法来实现在快速滚动上加载更多地址。

Answer 1

看看这个 fiddle :jsFiddle

它使用标准 JavaScript 和 jQuery 根据滚动位置加载无限量的结果。

//View contains references and data concerning the screen, scroll, etc...
var view = {};
var tileSize = 72;
//List of results
var results = [];
//Function to get results.
//If you load all on load, ignor this
function getResults(min, max) {
	//Here should be an AJAX call to the server
	//I'll just generate some dummies since i don't have access to a server
	var returner = []
	for (var i = min; i < max; i++) {
		returner.push({
			"LastName" : ["Ken", "Zarah", "Thrawn", "Oakenshield"][Math.round(Math.random() * 3)],
			"EmailAddress" : "alteam06@scanapp.local",
			"Id" : Math.round(Math.random() * 1000),
			"FirstName" : ["Sai", "Zayda", "Han", "Lurtz"][Math.round(Math.random() * 3)],
			"Drawn" : false
		})
	}
	//Return results
	return returner
}
//Function to display new tiles
function drawTiles() {
	//We want to manipulate the actual DOM tree as little as possible to save calculations.
	//Therefore we will compile our results into one string and then append them all at once.
	var html = '';
	//Only get results that hasn't yet been drawn
	results.filter(function (result) {
		return result.Drawn == false;
	}).forEach(function (el) {
		html += '<div style="height:' + tileSize + 'px; float:left; margin: 2em;">';
		html += '<p>' + el.FirstName + ' ' + el.LastName + '</p>';
		html += '<p>' + el.EmailAddress + '</p>';
		html += '<p>' + el.Id + '</p>';
		html += '</div>';
		el.drawn = true;
	});
	document.getElementById("results").innerHTML += html;
}
//Function handle to request and draw a bundle
function getBundle() {
	//Change the min, max here if you plan to send these parameters with AJAX
	results = results.concat(getResults(0, 10));
	drawTiles();
}
jQuery(document).ready(function () {
	//Listen for scroll events
	jQuery(document).on("scroll", function (evt) {
		//If we are low enough in the scroll
		if (window.scrollY > jQuery("#results").height() - window.innerHeight - (2 * tileSize)) {
			getBundle();
		}
	})
	//Run initial build
	getBundle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- The container for the tiles -->
<div id="results" style="float:left">

</div>