Image Object
Last updated
Last updated
패션이미지 추천서비스를 구현할 당시 이미지 로딩이 완료된 후에 해당 이미지의 해상도를 구해야하는 경우가 있었다.
처음엔 단순히 아래와 같이 load
이벤트를 bind해서 처리했다.
이 경우에는 이미지가 로딩되지 않고 이벤트가 처리되는 경우가 발생했다. 그 이유는 Resource와 상관 없이 DOM만 생성되어도 이벤트가 호출되기 때문이다. 즉, 이미지와 같이 resource를 요구하는 페이지일 경우 이미지 로딩 완료와 상관없이 진행된다.
그래서 다음과 같이 리소스 호출이 완료된 후에 호출하는 .onload
로 시도해봤다.
.onload()
는 이미지가 브라우저 캐시에 저장된 경우에는 이벤트가 발생하지 않아 이 방법도 불가능했다.
결국 Image Object로 해결할 수 있었다. Image()
객체는 이미지를 동적으로 생성할 때 사용한다. .onload
이벤트는 이미지가 로딩이 완료되면 실행되는 함수이다.
다음과 같이 Image()
객체를 생성해 .onload()
이벤트로 이미지 크기를 정확이 구할 수 있었다.