프론트엔드 이미지 전환 자연스럽게 하는 방법 있을까요?

Question

리액트로 영화소개 사이트를 만들어 보고있습니다. 근데 잘안되는게 있어 궁금해서 질문합니다.일단 프롭스로 받아온 item 배열에는 20개의 이미지 주소가 저장되어있습니다.그리고 4초마다 useEffect를 이용해 배열의 순서를 옮기면서 이미지가 바뀌게 짜봤습니다.근데 어떤건 늦게 되고 어떤건 빨리되고 또 어떨때는 이미지가 한번더 나왔다가 바뀌고. 자연스럽게 바뀌지가않아요.이미지가 바뀔때마다 기존에 없던 이미지를 받기 위해 네트워크 통신을 하게돼서 늦게 되는거 같은데..어떻게 해야 동시에 3개의 이미지가 자연스럽게 애니메이션 효과를 적용하면서 바뀌게 할 수 있을까요? 힌트 부탁드립니다.

Hee Sung Son · Accepted Answer

지금 구현하신 코드에서 4초마다 변경이니까 첫로딩후 4초동안 다음 이미지를 먼저 불러와서 데이터를 base64형태로 가지고있다가 img src에 넣어서 변경해주면 로딩이 많이 줄어 자연스럽게 가능하지 않을까하네요

으악 또 · Answer

서버호출시 느려지면 4초 대기 시간에 미리 호출 하시면 될꺼 같음

프론트엔드 이미지 전환 자연스럽게 하는 방법 있을까요?

2개의 답변

Q&A 목록