이니스트 팀블로그 RSS FEED

일정한 사이즈의 공간에 ex.100x100 이미지의 비율을 맞추어서 사진을 출력하려면
이미지를 불러온다음 자바스크립트로 비율을 조정합니다.
하지만 이미지 사이즈가 클경우 로딩중에는 이미지의 원본 사이즈가 그대로 남아있어서
로딩중 화면이 깨지고 큰이미지가 잠깐동안 보이는 문제가 있습니다.

해결방법은.

1. 이미지가 속해있는 부분을 div로 감싼다음 display:none 으로 로딩
2. 이미지 로딩후 자바스크립트로 display:none 해제
3. <IMG> 태그부분을 읽어와서 이미지 리사이즈

이렇게하면 리사이즈 과정이 보이지않으므로 순간적으로 프레임이 깨지는등의 문제가
발생하지 않음.
로딩까지의 시간이 길다면 미리 "이미지 로딩중 입니다." 라는 메세지를 보여주고 로딩후 숨기면 됨.

HTML부 ----->
<script type="text/javascript"> //페이지 로드후 스크립트 함수를 실행하기 위함
window.onload = function(){
  ImageRatio(100,100);
}
</script>

<div id="loading">
    이미지 로딩중입니다.
</div>
<div id="imagelist" style="display:none;">
    <img src="aaaa.jpg" />
    <img src="bbbb.jpg" />
</div>

//HTML부 ----->

자바스크립트부 ----->
<script type="text/javascript">
function ImageRatio(wid, hei){
   document.getElementById('loading').style.display = "none"; //로딩중 숨기기     
   document.getElementById('imagelist').style.display = ""; //사진이 영역을 display
   var images = document.getElementById('imagelist').getElementsByTagName('IMG'); //이미지를 가져옴 (재현이형이 알려줌)
    for ( var i = 0; i < images.length; i++) {  //이미지의 갯수만큼
        if (images[i].height > images[i].width) { //너비가 큰사진일경우
            images[i].height = hei;
        } else {
            images[i].width = wid; //높이가 긴사진일경우
        }
    }
}
//정사각형에 가까운이미지이며, 표시될 영역이 직사각형이라면 리사이즈 후에도 지정한 영역보다 크기가 클수가 있으므로 리사이즈된 크기를 참고해서 다시 리사이즈를 해준다.
(지은선배가 알려준거임)
</script>
//자바스크립트부 ----->

파폭, 크롬에서는 리사이즈된 이미지가 나름 디더링되어서 깔끔하게 보이는데;;
익스는 그런거 안하는듯..;;ㅡㅡ