안녕하세요. 파일 로딩으로 화면 밀려 내려가는 현상
본문
안녕하세요.
영카트를 사용중입니다.
문제 상황.
1. 메인페이지(인덱스페이지) 후기 노출
2. 후기 클릭 후 상품의 후기 탭으로 바로 넘어오게끔 설정
3. 열자마자 후기탭으로 넘어왔으나, 상세페이지 이미지가 많아서, 화면이 아래로 밀려 내려감.
이런 상황이라 문제 해결을 위해 다음과 같은 방법을 사용하였습니다.
1. lazyload 사용 (https://sir.kr/g5_tip/14037) -> 그러나 썸네일만 적용되어 오히려 후기 이미지만 lazyload 되어버림.
문의 사항
- 전체 이미지가 lazyload 되게 할 수 있는 방법
- or lazyload 방식 말고도 이 문제를 해결할 수 있는 다른 방법
선배 고수님들 미리 감사합니다!
답변 2
해결 방법으로는 lazyload 방식을 사용하는 것이 가장 좋습니다. lazyload 방식을 사용하면 이미지가 로딩될 때까지 화면이 밀려나지 않고 로딩이 완료되면 바로 보여집니다. 또한 이미지를 미리 로딩하는 방법보다 더 빠르게 로딩할 수 있습니다. 또한, 다른 방법으로는 이미지를 미리 로딩하는 방법도 있습니다. 이미지를 미리 로딩하면 화면 밀려 내려가는 현상이 방지됩니다. 다만 이 방법은 이미지가 많아질 경우 로딩 시간이 느려질 수 있습니다. 따라서 lazyload 방식을 사용하는 것이 가장 좋습니다.
참고로 상품 상세이미지들은 smartedior2를 사용해서 올려서 받는 형식이라 이미지에 lazyload 가 걸리지 않습니다. 상품 상세 이미지 주소를 넣는 곳에서 lazylaod 클래스를 첨가하는 방법을 알면 좋을것같은데 어떻게 해야되는지 모르겠네요;