[jQuery] :visible 이용한 razy loading

razy loading은 json으로만 구현이 가능하다는 생각이 바꼈다!

 

var $btn = $('.btn'),
$tableList = $('table tbody tr'),
showCount = 10,
listLength = $tableList.length;

$tableList.hide();
$tableList.slice(0, numShow).show();

$btn.on('click',function(){
	var showing = tableList.filter(':visible').length;
    $tableList.slice(showing - 1, showing + showCount).fadeIn();
    var nowShowing = $tableList.filter(':visible').length;
    if(nowShowing >= listLength) $btn.hide();
})

<table>
<tbody>
	<tr><td>내용</td></tr>
	<tr><td>내용</td></tr>
	<tr><td>내용</td></tr>
	<tr><td>내용</td></tr>
	<tr><td>내용</td></tr>
	<tr><td>내용</td></tr>
	<tr><td>내용</td></tr>
	<tr><td>내용</td></tr>
	<tr><td>내용</td></tr>
	<tr><td>내용</td></tr>
	<tr><td>내용</td></tr>
	<tr><td>내용</td></tr>
	<tr><td>내용</td></tr>
	<tr><td>내용</td></tr>
	<tr><td>내용</td></tr>
	<tr><td>내용</td></tr>
	<tr><td>내용</td></tr>
	<tr><td>내용</td></tr>
	<tr><td>내용</td></tr>
</tbody>
</table>

<button class="btn">버튼</button>