これは、「しばらく滞在し、しばらくしてから次の行セットをフェッチする」という部分には取り組みませんが、適切な行を示す高さの簡単な計算を次に示します。
http://jsfiddle.net/yvAtW/
JS
allowedHeight = $("div").height();
actualHeight = 0;
$("tr").each(function(){
actualHeight += $(this).height();
if(actualHeight < allowedHeight) {
$(this).show();
}
});
HTML
<div>
<table>
<tr class="height0">
<td>Row</td>
</tr>
<tr class="height1">
<td>Row</td>
</tr>
<tr class="height2">
<td>Row</td>
</tr>
<tr class="height1">
<td>Row</td>
</tr>
<tr class="height0">
<td>Row</td>
</tr>
</table>
</div>
CSS
div{
height:100px; /* fixed height container */
overflow:hidden; /* Ensures no overflowing content if JS doesn't work */
padding:10px 15px;
background:#777;
}
table{
width:100%;
}
tr{
display:none; /* all hidden by default */
}
/* different height trs */
.height0{
height:20px;
background:#900;
}
.height1{
height:30px;
background:#090;
}
.height2{
height:40px;
background:#009;
}