이미지 로드 후에 fancybox 띄우기 (이미지 사이즈)

뭐부터 적어야할까-_-;;

신나게 삽질한 탓에 혼란스럽기만 하다 ㅠㅠ

일단 나의 목표는 ㅡ

1. img 태그에 이미지를 로드한다

2. 해당 이미지의 가로, 세로사이즈를 얻어낸다

3. 해당 사이즈에 맞춰 fancybox를 띄운다.

ㅡ 이었다.

로드 후에 작업을 하기 위해서 .load()를 사용하였는데 ㅡ 기본적으로 jQuery 사용

내가 여기서 개념적으로 착각한 부분이

.load()를 loading 이라고 생각해버린 것이다. ㅡ loaded인데 lllorz

이게 첫번째 삽질이고 

두번째 삽질은 .load() 안에서 img 태그에 올려진 이미지의 사이즈를 알기 위해서 $("#img").width()를 호출한 것이다.

이 부분은 아직도 모르겠지만 아무튼 그로 인해 

load의 여부를 알기 위해서 구글링하고

.width() 호출해서 나오지 않는 값때문에 fancybox가 이미지를 로드하기도 전에 불려진다고 생각해서 callback 함수를 사용해야하나, iframe 방식으로 변경해야하나 엄청 골머리를 썩었다는 것이다.

결론적으로 

.load()함수는 이미지가 모두 로드된 상태에서 작동하게 되며

그 안에서 img의 사이즈를 알고 싶을 때는 this.width, this.height 를 사용하면 된다.