불여우서JS 이미지 리사이징후 화면 스크롤문제

[앤죠]

익스에선 문제없는데 파복에서 문제가 있네요

사이트 개발자로서 표준코드의 필요성을 느껴 다시 작업하고 있습니다.
JS는 솔직히 너무 어려운것 같습니다. 서버쪽 개발이 주업무이고
클라이언트 스크립트는 거의 들여다볼 이유?가 없다보니
눈에 쉽게 들어오질 않네요 ^^:

저의 회원들 미니홈피 사진게시판에서 싸이처럼 이미지가 클경우
JS로 자동으로 리사이징해 줍니다. 물론 리사이징 함수는 표준코드로 작성 했습니다.

문제는 이때 원래 크기였던
화면 크기를 기억해서 그런지 사진이 클경우 리사이징해도
화면 스크롤이 여전히 있습니다. 이미 본문 내용이 끝났는데도
본문 밑으로 쭉 길게 늘어져 있습니다.
이문제는 JS 로 해결가능한지 아니면 파복의 문제인지 알고싶네요

아래는 대표적인 회원 홈피 몇개를 나열해봅니다.
상단메뉴에서 "앨범" 클릭후 "펼침으로보기" 를 눌러보시고 익스랑 비교해보세요
(팝업을 허용해야 창이 뜹니다. 잠시 팝업허용해주세요 ^^;)

http://enpuppy.com/bluegrave
http://enpuppy.com/nanda

[hyeonseok]

이미지 리사이징의 타이밍을..

window.onload 로 하지 마시고 imgElement.onload 로 변경해 보면 되지 않을 까...싶습니다.

또는 image 를 둘러싸고 있는 container 를 td 로 하지 마시고 div 로 하시기를 권장해 드립니다.

[앤죠]

Code: Select all

이미지 리사이징의 타이밍을..

window.onload 로 하지 마시고 imgElement.onload 로 변경해 보면 되지 않을 까...싶습니다.

또는 image 를 둘러싸고 있는 container 를 td 로 하지 마시고 div 로 하시기를 권장해 드립니다.

window.onload 를 imgElement.onload 로 바꾸라고 하셨는데요
단순히 window.onload 를 imgElement.onload 로바꾸면 되나요?
imgElement 라는뜻이 img 테그의 id 를 말씀하는건가요?

일단 아래와 같이 바꾸었습니다.
//window.onload
imgElement.onload

------------------------------------------------------------------
또한 기존 img 태그를 아래처럼

Code: Select all

기존테그
<p align="center"><a href="..." border="0"><img src="...'></a></p>
바뀐테그
<div align="center"><a href="..." border="0"><img src="...'></a></div>

이렇게 바꾸었지만 이젠 리사이징이 안됩니다.
어떻게 해야 될지 모르겠네요 바쁘시더라도 답변 부탁드립니다.

[hyeonseok]

정신 없어서 글이 부실 했습니다. 죄송합니다. -_-

이미지를 id 로 참조 하셔도 되고 onload 이벤트 핸들러를 img 에 직접 주셔도 됩니다.

그리고 상위의 div 에 height 나 width 를 주어서 사이즈가 미리 늘어나는 것을 막아주는 것이 확실 할 것 같습니다. overflow: hidden 을 주어서 큰 이미지 로딩 과정에서 화면이 깨지는 것을 막아주는 것도 좋은 방법입니다.

<div style="width: 200px; height: 200px; overflow: hidden;"><a href="..." border="0"><img src="" id="bigimage" onload="imageResize()" /></a></div>
_________________________________________________

다른 방법으로 css min-height 속성을 써주셔도 됩니다. 단 IE 에서는 지원이 안됩니다. 하지만 min-height 속성을 미리 지정해 주면 로딩할때의 크기 자체가 작기 때문에 높이가 늘어나는 일은 없을 것입니다. IE 에서는 무시 되겠죠. 이건 그냥 참고 ^^;

[하늘다람쥐]

일단 제가 테스트를 해보니,

이미지 리사이징을 위해 width 속성값만 변경하시더군요. 그러면 자동으로 높이가 변하는 걸 염두에 두신 듯 한데.. 바로 이미지에 높이를 지정안한게 문제가 된 듯 싶습니다. 버그일지도 모르겠군요. 일반적으로 생각하기에는 자동으로 처리해줘야 할 듯 싶은데..

아무튼 해결책은 자바스크립트로 리사이징을 하실 때, 높이도 지정해주시면 문서 아래쪽의 공백이 안나올겁니다.

즉, img_resize() 함수 안 for loop내에

Code: Select all

img[i].height = img[i].clientHeight;

를 넣으시면 문서 아래쪽에 공백이 안생기는군요.

그럼 도움이 되셨길...

[앤죠]

두분다 감사드립니다. 해결했습니다.

좋은하루 되세요~~