23.1.19 9:25 PM
그동안 javascript 나 php 를 잘 몰라서 좀 알아봤는데 무한스크롤을 구현할 수는 있을것 같다
로컬 테스트 환경이 구축되진 않아서 쉽진 않겠지만 가능은 할듯 함
먼저 예제 코드로 테스트를 하면서 진행해볼 예정
일단 무한 스크롤의 큰 로직은
if 페이지 끝단에 오면
로딩 띄우기
ajax
php 스크립트 실행 (return js.array)
html 코드 append
로딩 지우기
이렇게 될것 같다
23.1.19 10:53 PM
계속 예제로 실습하던중 ajax 에 대해서 더 알아보면 무한 스크롤이 가능할것 같은 감이 왔다
[PHP + AJAX] php 함수를 ajax로 호출하는 법
우선 본론으로 들어가기 전 좋은 방법이 아닐 수 있다고 말하고 싶다. 어째보면 꼼수이기 때문에... 우선 화면을 담당하는 test.php 결과 함수 호출 그리고 api를 담당하는 /api/ajax_test.php가 있다고
xively.tistory.com
무한 스크롤(Infinity Scrolling) 예제 6가지
무한 스크롤(Infinity Scrolling) 예제/구현 6가지원본은 이곳입니다. 아래는 번역입니다. 오타 및 오역은 댓글로 알려주세요. 인피니티 스크롤은 이제 흔한 기능이고 실제로 유용하게 사용되는 사례
kutar37.tistory.com
[ajax]데이터 전송
화면전환 없이 데이터를 전송하기 위해 ajax를 사용하는 경우가 많다. 1. JSON 형태로 데이터 전송123456789$.ajax({ url: '데이터를 보낼 곳 url', type: 'form 태그의 method 속성(post 또는 get)', data: {"변수1": "
ddulgi.tistory.com
이렇게 ajax 라이브러리 활용부터 천천히 적용해볼 예정
23.1.19 10:53 PM
ajax 로 무한스크롤 구현에 성공한듯 했지만 이상하게 스크롤이 맨 아래가 아니라 맨 위에서 데이터를 불러온다..
왜 이지랄인지 모르겠는데
프론트 문제로 시간 너무끌리는게 짜증나기 시작한다;;\
실패했던 코드
index.html
<html>
<head>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<h1>Infinite Scrolling, Demo 2</h1>
<ul id="posts">
<li>
<article>
<header>
<h1>This Is an Article</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae suscipit arcu. Praesent pretium orci neque, non egestas massa suscipit non. In urna ligula, pretium ac magna in, consectetur venenatis dui. Etiam id commodo neque, vel semper nunc. Vivamus porttitor condimentum pulvinar. Quisque et consequat mi. Suspendisse luctus, quam in dapibus venenatis, velit erat malesuada lacus, dapibus tincidunt neque ex vitae leo. Suspendisse fermentum sit amet urna eu dignissim. Curabitur vel nibh quis justo volutpat porttitor et tempus sem.</p>
<p>In a luctus purus, in tempus mi. Integer vulputate tincidunt arcu quis aliquet. Maecenas sollicitudin nec nisi sit amet dictum. Curabitur sagittis nulla id sem vulputate, eget blandit nibh ullamcorper. Nam feugiat elementum pharetra. Vestibulum a purus eget mi mattis tincidunt a sed felis. Sed pretium dignissim elementum. Cras est arcu, posuere et justo in, vehicula rutrum elit. Phasellus dictum risus libero, non cursus neque faucibus a. Nunc dignissim at purus vitae condimentum. Curabitur in libero mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at tristique nibh, sed congue ligula. Curabitur eu porttitor tellus. Aliquam eu mollis tortor. Donec tortor sapien, molestie eu turpis vel, ultrices pulvinar orci. Aenean sagittis sem sit amet viverra maximus. Morbi id enim ipsum. Curabitur luctus placerat erat ut volutpat. In quis eros mattis, rutrum neque ut, malesuada neque.</p>
<p>Integer erat eros, vestibulum at tortor vitae, sollicitudin finibus est. Aliquam ornare, elit nec gravida sagittis, sapien nibh elementum felis, eu eleifend eros lectus non mi. Nulla vel nisl scelerisque, consectetur nibh vel, malesuada lacus. Nam lobortis accumsan nisl consequat dictum. Praesent eget lobortis lorem. Ut sed ultrices enim. Nam nec ultricies felis.</p>
<p>Donec hendrerit dolor id auctor ullamcorper. Curabitur ut mauris dolor. Quisque vitae cursus eros, ac rutrum sem. Aenean in turpis turpis. Fusce sit amet libero id massa dictum fermentum at eget arcu. Vestibulum eget blandit urna. In eu tristique augue. Phasellus augue risus, porttitor vel arcu nec, tincidunt laoreet tellus. Nam ornare leo dapibus ipsum dictum interdum.</p>
<p>Nulla molestie porttitor justo vitae pharetra. Proin non convallis lacus, eget malesuada metus. Duis aliquam eu massa molestie rhoncus. Vestibulum a malesuada nulla. Morbi at libero tempus, hendrerit quam vitae, auctor eros. Vivamus tincidunt enim a est tincidunt, sed fringilla erat placerat. Nulla cursus, eros sed posuere sagittis, dui est lobortis tellus, id dapibus dui sem eget enim. Vestibulum eleifend lacus velit, ut suscipit nisi bibendum at. Nulla facilisi. Aenean luctus tellus eget nisi vestibulum, eget interdum lectus efficitur.</p>
<p>Quisque facilisis aliquet dui, ut blandit odio vulputate et. Ut ac nisl turpis. Pellentesque scelerisque massa sit amet ipsum commodo cursus. Aenean eget ante et neque gravida tempor. Phasellus aliquam, purus quis malesuada vestibulum, sem mi cursus justo, a convallis purus dolor non lorem. Nunc dapibus vehicula nisi, eget egestas tellus lacinia vel. Nullam nisl ipsum, vehicula dignissim feugiat eu, semper nec arcu. Duis porttitor ut ex eget commodo. Curabitur accumsan diam ac euismod tincidunt. Cras dui urna, volutpat quis vehicula vitae, rhoncus a lacus. Curabitur ut purus aliquet, venenatis felis in, laoreet massa. Nullam lobortis sollicitudin aliquam. Quisque nec nisl eu sem vulputate venenatis. Proin sagittis erat sit amet sem vestibulum vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
</li>
</ul>
<p id="loading">
<img src="images/loading.gif" alt="Loading…" />
</p>
<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>main.js
var loading = false; //중복실행여부 확인 변수
var page = 1; //불러올 페이지
$(document).ready(function() {
var win = $(window);
// Each time the user scrolls
win.scroll(function() {
$('#loading').hide();
// End of the document reached?
if ($(document).height() - win.height() == win.scrollTop()) {
$('#loading').show();
/*
// Uncomment this AJAX call to test it
$.ajax({
url: 'get-post.php',
dataType: 'html',
success: function(html) {
$('#posts').append(html);
$('#loading').hide();
}
}); */
$('#posts').append(randomPost());
$('#loading').hide();
}
});
});
var pagenum=1;
// Generate a random post
function randomPost() {
// Paragraphs that will appear in the post
var paragraphs = [
'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae suscipit arcu. Praesent pretium orci neque, non egestas massa suscipit non. In urna ligula, pretium ac magna in, consectetur venenatis dui. Etiam id commodo neque, vel semper nunc. Vivamus porttitor condimentum pulvinar. Quisque et consequat mi. Suspendisse luctus, quam in dapibus venenatis, velit erat malesuada lacus, dapibus tincidunt neque ex vitae leo. Suspendisse fermentum sit amet urna eu dignissim. Curabitur vel nibh quis justo volutpat porttitor et tempus sem.</p>',
'<p>In a luctus purus, in tempus mi. Integer vulputate tincidunt arcu quis aliquet. Maecenas sollicitudin nec nisi sit amet dictum. Curabitur sagittis nulla id sem vulputate, eget blandit nibh ullamcorper. Nam feugiat elementum pharetra. Vestibulum a purus eget mi mattis tincidunt a sed felis. Sed pretium dignissim elementum. Cras est arcu, posuere et justo in, vehicula rutrum elit. Phasellus dictum risus libero, non cursus neque faucibus a. Nunc dignissim at purus vitae condimentum. Curabitur in libero mi.</p>',
'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at tristique nibh, sed congue ligula. Curabitur eu porttitor tellus. Aliquam eu mollis tortor. Donec tortor sapien, molestie eu turpis vel, ultrices pulvinar orci. Aenean sagittis sem sit amet viverra maximus. Morbi id enim ipsum. Curabitur luctus placerat erat ut volutpat. In quis eros mattis, rutrum neque ut, malesuada neque.</p>',
'<p>Integer erat eros, vestibulum at tortor vitae, sollicitudin finibus est. Aliquam ornare, elit nec gravida sagittis, sapien nibh elementum felis, eu eleifend eros lectus non mi. Nulla vel nisl scelerisque, consectetur nibh vel, malesuada lacus. Nam lobortis accumsan nisl consequat dictum. Praesent eget lobortis lorem. Ut sed ultrices enim. Nam nec ultricies felis.</p>',
'<p>Donec hendrerit dolor id auctor ullamcorper. Curabitur ut mauris dolor. Quisque vitae cursus eros, ac rutrum sem. Aenean in turpis turpis. Fusce sit amet libero id massa dictum fermentum at eget arcu. Vestibulum eget blandit urna. In eu tristique augue. Phasellus augue risus, porttitor vel arcu nec, tincidunt laoreet tellus. Nam ornare leo dapibus ipsum dictum interdum.</p>',
'<p>Nulla molestie porttitor justo vitae pharetra. Proin non convallis lacus, eget malesuada metus. Duis aliquam eu massa molestie rhoncus. Vestibulum a malesuada nulla. Morbi at libero tempus, hendrerit quam vitae, auctor eros. Vivamus tincidunt enim a est tincidunt, sed fringilla erat placerat. Nulla cursus, eros sed posuere sagittis, dui est lobortis tellus, id dapibus dui sem eget enim. Vestibulum eleifend lacus velit, ut suscipit nisi bibendum at. Nulla facilisi. Aenean luctus tellus eget nisi vestibulum, eget interdum lectus efficitur.</p>',
'<p>Quisque facilisis aliquet dui, ut blandit odio vulputate et. Ut ac nisl turpis. Pellentesque scelerisque massa sit amet ipsum commodo cursus. Aenean eget ante et neque gravida tempor. Phasellus aliquam, purus quis malesuada vestibulum, sem mi cursus justo, a convallis purus dolor non lorem. Nunc dapibus vehicula nisi, eget egestas tellus lacinia vel. Nullam nisl ipsum, vehicula dignissim feugiat eu, semper nec arcu. Duis porttitor ut ex eget commodo. Curabitur accumsan diam ac euismod tincidunt. Cras dui urna, volutpat quis vehicula vitae, rhoncus a lacus. Curabitur ut purus aliquet, venenatis felis in, laoreet massa. Nullam lobortis sollicitudin aliquam. Quisque nec nisl eu sem vulputate venenatis. Proin sagittis erat sit amet sem vestibulum vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>'
];
// Shuffle the paragraphs
for (var i = paragraphs.length - 1; !!i; --i) {
var j = Math.floor(Math.random() * i);
var p = paragraphs[i];
paragraphs[i] = paragraphs[j];
paragraphs[j] = p;
}
// Generate the post
var post = '<li>';
post += '<article>';
post += '<header><h1>Random Article!</h1></header>';
post += paragraphs.join('');
post += '<p>'+string(pagenum)+'</p>';
post += '</article>';
post += '</li>';
return post;
}
/*
$(window).scroll(function(){
if($(window).scrollTop()+200>=$(document).height() - $(window).height())
{
if(!loading) //실행 가능 상태라면?
{
loading = true; //실행 불가능 상태로 변경
$('#posts').append(randomPost());
$('#loading').hide();
loading = false;
}
else //실행 불가능 상태라면?
{
alert('다음페이지를 로딩중입니다.');
}
}
}); */
css 파일도 있는데 그냥 안넣었다
ajax 는 포기하고 다른 방법으로 선회해보자
https://code-anthropoid.tistory.com/202
IntersectionObserve API, 무한 스크롤
원래 이전에 레이지 로딩에 이어서 IntersectionObserve 두 번째 시간 별 다른 검색 없이 쉽게 구현할 수 있어서 쪼금 김이 빠졌다 아마 그런만큼 헛점이 많을 줄 알았으나 구현 퀄리티를 제외하고 코
code-anthropoid.tistory.com
http://blog.hyeyoonjung.com/2019/01/09/intersectionobserver-tutorial/
Intersection Observer API의 사용법과 활용방법 · Yoon's devlog
Intersection Observer API의 사용법과 활용방법 Web API 중 하나인 Intersection Observer API를 알아보고 어떻게 활용할 수 있는지에 대해 정리한 글입니다. Intersection Observer API(교차 관찰자 API)를 들어본 적이
blog.hyeyoonjung.com
https://nohack.tistory.com/124
Intersection Observer API로 무한 스크롤 구현하기
Infinite Scroll 무한 스크롤은 말 그대로 스크롤을 무한으로 할 수 있는 기능을 말하며, 페이지의 최하단에 도달했을 때 신규 콘텐츠를 로드하는 식으로 동작합니다. 페이지네이션(Pagination)과 함께
nohack.tistory.com
intersection observer api 로 구현한 블로그들을 참고해서 해봐야겠다
일단 오늘은 여기까지
'Archive > [Infra+Web] fanpage:BLACKPINKINYOURAREA' 카테고리의 다른 글
| 프로젝트 조기 종료 (0) | 2023.02.21 |
|---|---|
| [Web]BLACKPINK IN YOUR AREA-28-html 이벤트 핸들러 (0) | 2022.12.30 |
| [Web]BLACKPINK IN YOUR AREA-27-dockerfile ㅡㅡ (0) | 2022.12.27 |
| [Web]BLACKPINK IN YOUR AREA-26-인프라 설계 및 구축 -완- (1) | 2022.12.27 |
| [Web]BLACKPINK IN YOUR AREA-25-CI/CD 환경 구축-3 (0) | 2022.12.18 |