IMMusic Project(17) - Main Intro

• main에서 크롤링을 하는데 크롤링 하는 동안의 로딩시간에 intro가 진행될 수 있도록!
  • ajax를 이용해서 main 들어갈 때 크롤링 할 수 있도록
    

    $(document).ready(function() {
        // AJAX 요청을 보냅니다.
        $.ajax({
            url: "/usr/home/crawl",
            type: "GET",
            success: function(data) {
            	console.log("data: "+ data);
            	
            	 // 받은 데이터를 이용하여 HTML을 생성합니다.
                var html = "";
                data.forEach(function(blog) {
                    var postDate = blog.post_date;
                    var postTitle = blog.post_title;
                    var postContent = blog.post_content;
                    var postUrl = blog.post_url;
    
                    // 생성한 HTML을 추가합니다.
                     html += "<tr class='mb-5' onclick='redirectToPost(\"" + postUrl + "\")'>";
                    html += "<td>" + postDate + "</td>";
                    html += "<td>" + postTitle + "</td>";
                    html += "<td>" + postContent + "</td>";
                    html += "</tr>";
                });
    
                // 생성한 HTML을 해당 요소에 추가합니다.
                $("#blogContent").html(html);
                
                
            },
            error: function(xhr, status, error) {
                console.error("AJAX 요청 실패:", status, error);
            }
        });
    });​

  • 기존코드
    

    <%-- <c:forEach var="blog" items="${blog}"> --%>
    <%-- 	<tr class="mb-5" onclick="redirectToPost('${blog.post_url}')"> --%>
    <%-- 		<td>${blog.post_date}</td> --%>
    <%-- 		<td>${blog.post_title}</td> --%>
    <%-- 		<td>${blog.post_content}</td> --%>
    <!-- 	</tr> -->
    <%-- </c:forEach> --%>​

  • 🚨 문제🚨
    • intro가 나올때 스크롤이 나옴
    • intro가 완벽하게 끝나고 스크롤이 등장하도록 (위치)
  • 🌠해결🌠

    • $('body').css('overflow', 'hidden'); // 스크롤 숨김
      $('body').css('overflow', 'auto'); // 스크롤 보여줌​​

    • $('#intro-top').animate({
          top : '-100%' // 화면 위로 이동
      }, 'slow');
      
      // intro-bottom 요소에 아래로 이동 애니메이션 적용
      $('#intro-bottom').animate({
          top : '100%' // 화면 아래로 이동
      }, 'slow', function() {
          $(this).hide(); // 애니메이션 완료 후 숨김
          scroll();
      });
      
      function scroll() {
      		// 애니메이션이 완료된 후에 스크롤을 다시 활성화합니다.
      		$('body').css('overflow', 'auto');
      	}

 

📝 17일차 회의록

https://docs.google.com/document/d/1ynLN04OanmWzMqy2NopRYjRdAKMxntWWcVTPJ_A9_hA/edit