사이트 이미지 로딩처리
- 둥지
- Concept
- 분류
- Programing
- 등록일
사이트를 작업하다가 문득 아이디어를 떠올렸다.
- 출력되는 페이지에서 이미지 파일들을 전부 배열화 시킨다.
소스를 분석해서 이미지를 긁어오던지 직접 배열을 만들던지 알아서.. - 배열로 만들어진 이미지들을 하나씩 for문을 돌린다. 그것보다 배열을 큐로 만들어서 로딩 하나 끝나면 다음꺼로 로딩하는게 좋을듯...
- 하나의 큐에서 로딩 시작하면 이미지 dom객체를 만들어서 src에 이미지 주소를 넣고 온로드 이벤트로 완료 체크한다.
온로드 콜백 들어오면 다음 큐로 로딩 시작... - 하나의 큐가 로딩이 끝났으면 다음 큐로 반복적으로 로딩을 실행한다. 이걸로 로딩된 갯수를 파악할 수 있기 때문에 퍼센테이지도 가라로 만들 수 있음.
- 모든 큐가 로딩이 끝났다면 모든 이미지 로드 완료 콜백을 날린다.
- 외부에서 로딩완료 콜백 받으면 다음 일을 한다.
대략적으로 설명하자면 메모리에서 dom을 만들어 이미지들을 로딩하고 체크하는것이다.
체크해봐야할 사항은 실질적인 dom에 있은 이미지와 가상 이미지 두개가 따로 로딩하는지 체크해보고 판단해봐야함
2개의 댓글
이 처리의 장점은 안전하게 이미지를 표시할 수 있다.
필요할때 이미지를 갑작스럽게 불러오면 인터랙션이 자연스럽지 못할수도 있다. 그걸 고민하다가 이렇게 떠올리게 되었다.
우연히 네이버 오픈소스 프로젝트들을 뒤져보다가 알게 되었는데 여기에서 구상해둔게 이렇게 나와 있었다. ㅎㅎ
https://github.com/naver/egjs-imready