CSS 동적 로딩 후, 완료되었는지 확인하기

발생일: 2012.03.26

문제:
모바일에서 css 파일을 동적 로딩하고, 로드가 완료되면 특정 작업을 진행하려고 한다.

일전에 동적 로딩 모듈을 만들어봤던 기억으로는,
웹킷 계열은 <link> 태그에 onload를 지원하지 않아서 단순히 특정 시간 후에 load 이벤트가 발생하게 작성했었다.
다른 몇몇 라이브러리도 그렇게 했던 걸로 기억하고....

뭔가 더 좋은 방법이 없을까?


해결책:
좀 검색해보니 웹킷 계열일 경우,
타이머로 document.styleSheets의 length를 체크하는 방법으로 로드 여부를 확인하고 있다.

하지만, 페이지 내 다른 모듈에서 css 파일을 동적 로드하는 경우도 발생할 수 있으니,
length 체크만으론 부족해보인다.
좀 더 꼼꼼하게 처리하자면, styleSheets 객체 내 href 속성값까지 확인해야 정확하겠다.
(여기까진 http://www.zachleat.com/web/load-css-dynamically/ 참고)

 
그러다, 더 좋은 꼼수를 찾게 됐는데, 요고 아이디어가 기발하다.

link 태그를 추가하면서 동시에 같은 URL로 img 태그를 호출하고, 
img 태그의 onerror 핸들러를 체크하는 거다.
이미지로 호출된 css 파일이 로드되면 파싱하는 과정에서 에러가 발생하는 것으로 로드가 완료됐음을 파악하자는 아이디어다.
(자세한 내용은 http://www.backalleycoder.com/2011/03/20/link-tag-css-stylesheet-load-event/  참고)

 
load 시점을 확실히 파악할 수 있지만, 두 가지 단점이 있다.
  1. 같은 리소스에 대한 요청을 2번 보내게 된다.
  2. css 파일이 존재하지 않는 경우(404)에도 동일하게 onerror 핸들러가 호출된다.


스크립트에서 타이머를 돌면서 체크하는 것이 나을 지,
요청을 두 번 날리는 게 나을 지에 대한 성능은 좀 더 고려해봐야겠지만,
아이디어가 기발한 것만은 사실이다.^^

----
덧) 안드로이드(2.2, 2.3)에서 테스트해보니, image 파일이 아닌 경우 다운로드가 완료돼도 파싱 에러를 발생하지 않는다.
모바일에서 사용하기엔 적합하지 않은 방법이라 생각한다.