728x90
반응형
HTML
<body>
<div class="img_box fadein">
<div class="img_text">이 이미지는 1번째 이미지입니다.</div>
<img class="test_image" src='//encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRV6cQWlpzaeM-IwJoGf1upU36c_ya_heQdlLRuUgrQqY8GbRFB&usqp=CAU'>
</div>
<div class="img_box fadein">
<div class="img_text">이 이미지는 2번째 이미지입니다.</div>
<img class="test_image" src='//encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRV6cQWlpzaeM-IwJoGf1upU36c_ya_heQdlLRuUgrQqY8GbRFB&usqp=CAU'>
</div>
<div class="img_box fadein">
<div class="img_text">이 이미지는 3번째 이미지입니다.</div>
<img class="test_image" src='//encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRV6cQWlpzaeM-IwJoGf1upU36c_ya_heQdlLRuUgrQqY8GbRFB&usqp=CAU'>
</div>
<div class="img_box fadein">
<div class="img_text">이 이미지는 4번째 이미지입니다.</div>
<img class="test_image" src='//encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRV6cQWlpzaeM-IwJoGf1upU36c_ya_heQdlLRuUgrQqY8GbRFB&usqp=CAU'>
</div>
<div class="img_box fadein">
<div class="img_text">이 이미지는 5번째 이미지입니다.</div>
<img class="test_image" src='//encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRV6cQWlpzaeM-IwJoGf1upU36c_ya_heQdlLRuUgrQqY8GbRFB&usqp=CAU'>
</div>
</body>CSS
body{ padding:0; margin:0; -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none; overflow:auto; }
.fadein
{
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
/* Firefox < 16 */
@-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
/* Internet Explorer */
@-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
/* Opera < 12.1 */
@-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.test_image{ width:300px; height:300px; margin-bottom:300px; }
.img_text{ text-align:center; }
.img_box{ width:300px; margin: 0 auto; }
JS
var loading = false; //중복실행여부 확인 변수
var page = 1; //불러올 페이지
/*nextpageload function*/
function next_load()
{
$.ajax({
type:"GET",
url:"/test.php",
data : {'page':page},
dataType : "text",
success: function(string)
{
if(string=='success')
{
console.log(page+' page load');
/* 이미지 동적 추가 */
for (var x=1;x<6;x++)
{
var append_node = "";
append_node += "<div class='img_box fadein'>";
append_node += "<div class='img_text'>이 이미지는 "+(page*5+x)+"번째 이미지입니다.</div>";
append_node += "<img class='test_image' src='//encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRV6cQWlpzaeM-IwJoGf1upU36c_ya_heQdlLRuUgrQqY8GbRFB&usqp=CAU'>";
append_node +="</div>";
$('body').append(append_node)
}
page++; //페이지 증가
loading = false; //실행 가능 상태로 변경
}
else
{
alert('failed');
}
}
,error: function(xhr, status, error)
{
alert(error);
}
});
}
$(window).scroll(function(){
if($(window).scrollTop()+200>=$(document).height() - $(window).height())
{
if(!loading) //실행 가능 상태라면?
{
loading = true; //실행 불가능 상태로 변경
next_load();
}
else //실행 불가능 상태라면?
{
alert('다음페이지를 로딩중입니다.');
}
}
});
/test.php Code
<?php
$page = $_GET['page'];
if($page)
{
echo 'success';
}
?>
Result
728x90
반응형
'Javascript' 카테고리의 다른 글
| [Vue js 반응형 웹페이지] 페이지 전환효과(fade, slide) *router 사용 (0) | 2021.05.10 |
|---|---|
| [Vue js 반응형 웹페이지] 우측 슬라이드메뉴 (0) | 2021.05.07 |
| [Vue js 반응형 웹페이지] 페이지구성 + Router 설정 (0) | 2021.05.07 |
| IntelliJ + Vue 개발환경 구성 (0) | 2021.04.14 |
| JS Custom Select Box 만들기 (0) | 2020.11.05 |
댓글