jQuery::이미지 크기 동적으로 변경

아래와 같이 이미지를 표현하고 난 후,

<img src='yes.jpg'>

상황에 따라 이미지 사이즈를 동적으로 변경해야 하는 경우가 종종 발생한다.
한 예로, 이미지의 가로와 세로의 길이를 비교해서 긴 쪽 이미지를 100px 로 바꾸는 경우를 jQuery 를 이용하면 어떻게 될까.

var img=$('img');
if( img.width()  > img.height() ) {
   img.width('100px');
}else{
  img.height('100px');
}

작동해야 할 것 같은 이 코드는 원하는 대로 작동하지 않는다.
원인은 이미지가 완전히 로딩되지 않은 상태에서 이미지의 가로, 세로 길이를 비교했기 때문이다. alert 를 이용해 img.width() 와 img.height() 를 찍어보면 값은 0으로 나온다.

따라서 위의 코드를 이미지가 완전히 로딩되고 난 이후에 동작하도록 고쳐야 한다.
load 함수를 이용해 이를 고려한, 완전히 동작하는  코드는 아래와 같다.

var img=$('img');

img.load( function() {
   if( img.width()  > img.height() ) {
     img.width('100px');
   }else{
     img.height('100px');
   }
}

PS::
위의 코드를 이용한 이미지 사이즈 변경은 한가지 문제점을 가지고 있는데,
.load 함수의 실행은 이미지가 완전히 로딩된 후에 일어난다는 사실이다.

즉, 큰 이미지가 로딩되어 화면에 표시된 후( 네트웍 속도가 느릴 수록 이 효과는 극대화),
load 함수에 따라 이미지 리사이징이 일어난다.
문제 해결은간단한데, .load 함수 이전에 이미지 표시를 막으면 된다.

1. css 파일에 이미지 표시를 하지 않는 것으로 default 설정을 한다.

img{
  visibility:hidden;
} 

2. .load 함수에서 이미지 표시 제한을 풀어준다.

img.load( function() {
   if( img.width()  > img.height() ) {
     img.width('100px');
   }else{
     img.height('100px');
   }
   img.css('visibility','visible');

}