Image 로딩 확인 후 Height값 구하기

화면크기가  다양한 모바일기기에서 동적인 웹서비스를 위해 Width값 100%로 지정되어 있는 이미지의 높이값을 

구하는 로직이 있었으나 Height 값이 0으로 리턴되는 문제가 발생하였다.

이미지가 로딩되기 전에 Height값을 가져오는 것이 문제였으며,  아래의 글을 참고하여  이미지 로딩이 완료 된 후 Height값을 가져오도록 변경하여 해결하였다.

참고로 $(document).ready()  함수를 이용해 이미지의 높이 값을 가져오지 않도록 주의하여야 한다.

ready() 함수가 실행되는 시점은 DOM이 완전히 로드된 시점을 의미하는 것이지 렌더링이 완료된 시점을

의미하지 않는다.

$(window).load() 함수는 렌더링이 완료된 시점에 실행되는 함수이다. 

ready()와 load() 함수를 혼동하여 사용하지 않도록 주의해야 한다.

---

jquery를 이용하여 html 템플릿을 동적으로 생성하게 되면 resource 태그(img)들이 비동기적으로 로드된다.

jquery 코드 블럭이 수행되면서 동적으로 태그가 생성되기 때문에 $.ready나 $.onload의 결과는 차이가 없다.

$.onload는 정적인 태그에 대한 처리가 완료되고 jquery 코드 블럭이 수행되지만 jquery에 의해 동적으로

생성되는 태그는 아직 알지도 못하기 때문이다.

단순히 img 태그에서 화면이 보여지는지 여부 역시 상관이 없다. 어짜피 브라우저는 약간의 지연이 생기더라고

이미지를 랜더링할 것이기 때문이다.

문제는 동적으로 태그를 생성하는 시점에 img 사이즈를 알고 싶을 때이다.

예를 들어 아래의 코드 블럭이 비동기적으로 수행된다고 하면,

$(function () {

var fullTag = ...

...

var imgTag = '<img src="www.naver.com/dummy.jpg">';

fullTag += imaTag;

...

var height = $('... img').height();

});

위의 dummy.jpg의 height는 값을 가지고 있을까?

확실한 것은 '값을 가지고 있을지 확신할 수 없다'는 것이다.

모든 태그는 onload 이벤트 프로퍼티를 가지고 있다. 또한 img 태그는 특별하게

complete이라는 boolean 프로퍼티를 가지고 있으며 이미지 로드의 완료 여부에 따라

true/false의 값을 가진다.

이를 이용해서 위의 코드를 수정하면 아래와 같다.

var imgTag = $('...img');

if (imgTag.length === 1) { //length 프로퍼티는 해당 태그가 존재하면 1, 없으면 0을 리턴한다.

if (imgTag.complete === false) {

console.log('이미지가 완전히 로딩되지 않음');

imgTag.load(function () {

var height = $('... img').height();

...

console.log('이미지 로딩이 완료됨.');

});

}

}

비동기적으로 로딩되는 resource에 대한 처리를 이런식으로 해야 할 것 같다.

출처 : http://cloudstick.tistory.com/entry/jquery-image-로딩-확인