책 이미지 200장 불러와서 렌더링해주기

Question

안녕하세요책 이미지를 불러오는 페이지를 하나 만들었는데요. for 반복문으로 이미지를 전체 불러오고 active 클래스를 통해서 화면에 보여지고 안보여지고를 컨트롤 했는데요 (자바스크립트 통해서 페이지 넘길경우 active를 삭제하고 불러오고자 하는페이지는 active 클래스를 붙여주는 방식)해당방식으로 불러올 이미지는 대략 150kb X 200장 수준 입니다.화면이 열리는 속도는 아주 느리진 않는데,지금 테스트로 render.com 에 배포해보니 가끔 이미지를 불러오지 못하는 경우가 생깁니다 ㅠ (책 이미지는 cloudinary.com 에 올려놓았구요) (A 노트북에서는 1번 페이지 못불러오고 B노트북에서는 1번은 불러오고 2번은 못불러오고 C 태블릿에서는 1번과 2번 모두 잘 불러오구요... )일단 생각해봤을때,,,, 너무 많은 사진을 불러와서 오류가 난걸까.... 생각해봅니다 ㅠ 아래가 코드인데... 이렇게 짜면 계속 오류가 날 수 밖에 없을까요? Document

<% for(let i = 0; i < book.image.length; i++) { %>

"> " alt="Book Image">

<% } %>

바냐파노 · Answer

사람이 책 200페이지를 한꺼번에 봐야 하는 상황이 아니라면, 사람이 보고 있는 페이지만 불러오도록 수정하는 게 맞겠습니다.

팩트폭행범 · Answer

10명만 동시호출해도 서버터질듯

초보지만 괜찮아 · Answer

lazyload 적용하면 괜찮을까요??const lazyLoad = () => { const lazyImages = document.querySelectorAll('.lazy'); // lazy 클래스를 가진 모든 이미지를 선택 const config = { root: null, // 뷰포트를 root로 설정 rootMargin: '0px', // root의 마진을 0으로 설정 threshold: 0.1 // 이미지가 10% 보일 때 로드 시작 }; // Intersection Observer 객체 생성 let observer = new IntersectionObserver((entries, self) => { entries.forEach(entry => { if (entry.isIntersecting) { // 요소가 뷰포트 안에 들어왔을 때 let img = entry.target; img.src = img.dataset.src; // data-src 속성의 값을 src로 설정하여 이미지 로드 img.classList.remove('lazy'); // lazy 클래스 제거 self.unobserve(img); // 이미지 로드를 완료하면 관찰 중지 } }); }, config); lazyImages.forEach(image => { observer.observe(image); // 각 이미지에 대해 관찰 시작 }); }; 전체 수정 코드 Document

<% for(let i = 0; i < book.image.length; i++) { %>

<%= i % 2 === 0 ? 'pair' : '' %>"> " alt="Book Image" class="lazy">

<% } %>

책 이미지 200장 불러와서 렌더링해주기

3개의 답변

기술 목록