728x90
안녕하세요. 은은한 개발자입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<style>
#lazyload tbody tr:nth-child(n+50) {
display: none;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script>
$(document).ready(function () {
const Observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// do something
let el = $(entry.target);
el.nextAll(':lt(5)').show();
observer.unobserve(entry.target);
}
});
});
var lazyload = document.querySelectorAll('#lazyload tbody tr');
lazyload.forEach(obj => {
Observer.observe(obj);
});
});
</script>
</head>
<body>
<table id="lazyload">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<?php for ($rowno = 1; $rowno < 500; $rowno++) { ?>
<tr>
<td><?= $rowno ?></td>
<td>게시글 리스트 제목 <?= $rowno ?></td>
<td>테스터</td>
<td>2018-10-24 13:36:20</td>
<td>1000</td>
</tr>
<?php } ?>
</tbody>
</table>
</body>
728x90
'Develop > Javascript' 카테고리의 다른 글
| jQuery 부트스트랩(bootstrap) 파일첨부 만들기 (2) | 2020.02.23 |
|---|---|
| Javascript & jQuery 페이지 로드 후 이벤트 실행하는 방법들의 차이점 (0) | 2020.02.23 |
| JavaScript 금액 콤마 넣기, 풀기 (0) | 2020.02.23 |
| Javascript 요소 접근 방법 (0) | 2020.02.23 |
| [jQuery] ajax 클로저 방식 (0) | 2019.04.15 |
댓글