|
작성일 : 11-03-18 10:00
|
글쓴이 :
관리자 (124.♡.25.162)
 조회 : 2,524
|
 http://charism.tistory.com/44 [1352] |
웹페이지를 구성하다 보면 이미지 크기를 강제로 조정해야 되는경우가 많이 발생한다.
물론 큰 사이즈의 이미지를 강제로 크기를 작게하게되면 화면에 표시되는 이미지가 많아진다면 네트웍 리소스를 많이 차지하게 되므로, 대부분은 이미지 등록시에 thumbnail을 생성해 둔다.
하지만, 웹서비스는 리뉴얼이 자주 이루어지다보면 그때마다 thumbnail 크기를 조정할수 없으니, 특정크기별로 몇개정도 생성해 두는것이 보통이다.
어떻든 이미지의 크기가 다른경우 이를 로딩해서 화면에 출력할려면 보통은 "<img" 에 width와 height를 강제로 조정할 수 있는데, 이렇게 되면 이미지의 비율이 깨지게 되는 단점이 있다.
그래서 이전에 javascript를 이용해서 해당 이미지의 크기를 비율로 조정했는데, 이렇게 되면 이미지가 로딩된후에 크기가 변경되어, 사용자는 뭔가 깜박거리는걸 느낄수 있는 불편함이 있게된다.
아래는 이미지를 로딩한후에 이미지를 resize하여 보여주는 예제이다.
순서인즉,
- HTML "<img" 태그에서는 이미지를 보여주지 않는다.
- 이미지가 Onload되면 JavaScript에서는 해당 이미지의 계산하여 이미지를 크기를 조정하고, display를 on시킨다.
1. HTML내 소스
<img src="조회할 이미지URL" onload="javascript:fitImageSize(this, '조회할 이미지URL', 60, 60);" style="display:none" >
2. JavaScript
function fitImageSize(obj, href, maxWidth, maxHeight) {
var image = new Image();
image.onload = function(){
var width = image.width;
var height = image.height;
var scalex = maxWidth / width;
var scaley = maxHeight / height;
var scale = (scalex < scaley) ? scalex : scaley;
if (scale > 1)
scale = 1;
obj.width = scale * width;
obj.height = scale * height;
obj.style.display = "";
}
image.src = href;
}
|
|
|
