사이트를 작업하다가 문득 아이디어를 떠올렸다.

  • 출력되는 페이지에서 이미지 파일들을 전부 배열화 시킨다.
    소스를 분석해서 이미지를 긁어오던지 직접 배열을 만들던지 알아서..
  • 배열로 만들어진 이미지들을 하나씩 for문을 돌린다. 그것보다 배열을 큐로 만들어서 로딩 하나 끝나면 다음꺼로 로딩하는게 좋을듯...
  • 하나의 큐에서 로딩 시작하면 이미지 dom객체를 만들어서 src에 이미지 주소를 넣고 온로드 이벤트로 완료 체크한다.
    온로드 콜백 들어오면 다음 큐로 로딩 시작...
  • 하나의 큐가 로딩이 끝났으면 다음 큐로 반복적으로 로딩을 실행한다. 이걸로 로딩된 갯수를 파악할 수 있기 때문에 퍼센테이지도 가라로 만들 수 있음.
  • 모든 큐가 로딩이 끝났다면 모든 이미지 로드 완료 콜백을 날린다.
  • 외부에서 로딩완료 콜백 받으면 다음 일을 한다.

대략적으로 설명하자면 메모리에서 dom을 만들어 이미지들을 로딩하고 체크하는것이다.

체크해봐야할 사항은 실질적인 dom에 있은 이미지와 가상 이미지 두개가 따로 로딩하는지 체크해보고 판단해봐야함

메타데이터

조회수
694
좋아요
0

2개의 댓글

이 처리의 장점은 안전하게 이미지를 표시할 수 있다.
필요할때 이미지를 갑작스럽게 불러오면 인터랙션이 자연스럽지 못할수도 있다. 그걸 고민하다가 이렇게 떠올리게 되었다.

우연히 네이버 오픈소스 프로젝트들을 뒤져보다가 알게 되었는데 여기에서 구상해둔게 이렇게 나와 있었다. ㅎㅎ
https://github.com/naver/egjs-imready