붉은거위 노트 (redgoose note)

사이트 이미지 로딩처리

Nest
Concept
Category
Programing
Hit
532
Star
0

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

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

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

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

Comments