私はjavascriptオブジェクトに3000レコードのアドレスが含まれています。コンテナ内のタイル内のすべてのアドレスをロードすると、非常に遅いです。 - ロード時に15〜18アドレスタイルをロードしたい - コンテナの高さをタイルの高さから動的に計算し、レコード数に基づいてスクロールがコンテナの負荷で作成されるように設定します。例：タイルの高さ：80px、総アドレスレコード：3000、コンテナの高さ= 3000 * 80 - javascriptオブジェクトからページのスクロールでhtmlテンプレートにタイルを少し追加したい偽のページスクロールで、より多くのデータをHTMLテンプレートに読み込み、パフォーマンスの問題
しかし、アプローチは機能していません。私は下部に空白を見ることができます。だから私は高速スクロールでより多くのアドレスをロードするために達成するために従うことができるものがあります。
は、このバイオリンを見てみましょう：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) {
\t //Here should be an AJAX call to the server
\t //I'll just generate some dummies since i don't have access to a server
\t var returner = []
\t for (var i = min; i < max; i++) {
\t \t returner.push({
\t \t \t "LastName" : ["Ken", "Zarah", "Thrawn", "Oakenshield"][Math.round(Math.random() * 3)],
\t \t \t "EmailAddress" : "[email protected]",
\t \t \t "Id" : Math.round(Math.random() * 1000),
\t \t \t "FirstName" : ["Sai", "Zayda", "Han", "Lurtz"][Math.round(Math.random() * 3)],
\t \t \t "Drawn" : false
\t \t })
\t }
\t //Return results
\t return returner
}
//Function to display new tiles
function drawTiles() {
\t //We want to manipulate the actual DOM tree as little as possible to save calculations.
\t //Therefore we will compile our results into one string and then append them all at once.
\t var html = '';
\t //Only get results that hasn't yet been drawn
\t results.filter(function (result) {
\t \t return result.Drawn == false;
\t }).forEach(function (el) {
\t \t html += '<div style="height:' + tileSize + 'px; float:left; margin: 2em;">';
\t \t html += '<p>' + el.FirstName + ' ' + el.LastName + '</p>';
\t \t html += '<p>' + el.EmailAddress + '</p>';
\t \t html += '<p>' + el.Id + '</p>';
\t \t html += '</div>';
\t \t el.drawn = true;
\t });
\t document.getElementById("results").innerHTML += html;
}
//Function handle to request and draw a bundle
function getBundle() {
\t //Change the min, max here if you plan to send these parameters with AJAX
\t results = results.concat(getResults(0, 10));
\t drawTiles();
}
jQuery(document).ready(function() {
\t //Listen for scroll events
\t jQuery(document).on("scroll", function (evt) {
\t \t //If we are low enough in the scroll
\t \t if (window.scrollY > jQuery("#results").height() - window.innerHeight - (2 * tileSize)) {
\t \t \t getBundle();
\t \t }
\t })
\t //Run initial build
\t 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>
私たちが見ることのためにあなたがここでもまたはリンク[jsFiddle]（https://jsfiddle.net/）に、いくつかのコードを置くことができればそれは大いに役立つだろう。 –
私はサンプルコードで私の質問を変更しました。コードはちょうどアイデアを与えることです..私はサンプルコードをテストしていません。ありがとう –
あなたの助けに感謝しますが、それは偽のスクロールのためではありません。私が必要なのは、コンテナの高さをアドレスの総数に基づいて修正することで、ユーザーはすべてがロードされているように思えるでしょうが、スクロールするともっとロードしたくなります。 私は初期高さを設定し、スクロール.. リンクはここにありますhttps://jsfiddle.net/6Lxc8eba/2/ –