개발 Q&A

제목 jquery에서 페이지가 로딩되기전에 구문이 실행되는 거 같은데요.
글쓴이 닥스훈트 작성시각 2012/09/04 18:48:50
댓글 : 5 추천 : 0 스크랩 : 0 조회수 : 28302   RSS
function call_viewer(id){ //사진 뷰어 불러오기
        $('#photo_view').load('/index.php/pboard/viewer/'+id, function(){ //사진페이지가 로드가 안전히 되면 브라우저 화면 가운데로 띄우기                  
                var obj = $('#photo_view');
                var photo_view_height = ($(window).scrollTop() + ($(window).height() - obj.height())/2);
                var photo_view_width = ($(window).scrollLeft() + ($(window).width() - obj.width())/2);
                                        
                obj.css({
                        position: 'absolute',
                        display : 'block',
                        top : photo_view_height,
                        left : photo_view_width
                });
                        
                set_coverup();
                $('#photo_view').fadeIn();
        });
}




<a href="[removed]call_viewer('<?= $photo['id']; ?>');"><h2><?= $photo['subject']; ?></h2></a> 

이걸 누르면 위의 자바스크립트 함수가 호출되는 그런 형태인데요...

링크 걸린 저기를 최초 눌렀을때 제대로 var photo_view_height 가 나오질 않는 것 같습니다.

아마 load 가 제대로 안된거 같아서 이벤트 미완으로 그런거 같은데요.

두번째 부터는 제대로 var photo_view_height 가 계산되는것 같습니다.


이거 혹시 로컬호스트에서 실행해서

너무 빨리 페이지가 로딩이 되어서 그런 현상이 일어나는걸까요?
 다음글 MAC OS에서 XAMPP셋팅문제 (4)
 이전글 Controller 안에서 controller를 부를수... (2)

댓글

변종원(웅파) / 2012/09/04 22:03:01 / 추천 0
4라인과 5라인 사이에 alert(photo_view_height); 해보시면 답이 나올거 같은데요?

그리고 파이어폭스-파이어버그의 NET 탭에서 보면 데이터 응답순서, 시간 등을
확인할 수 있습니다.

load로 읽어온 html 내용을 photo_view에 할당을 하는데 찾아보니 load는 비동기적으로
페이지를 로딩합니다. 그래서 로딩이 완전히 끝나기전에 아래 라인이 실행이 먼저 됩니다.

문서 참고 http://www.partner114.com/bbs/board.php?bo_table=B217&wr_id=10

높이 구하기전에 잠시 대기했다가 높이를 구하도록 해야할 것 같습니다.
한대승(불의회상) / 2012/09/05 09:39:56 / 추천 0
약간의 첨언을 하자면...

비동기라는 말은 요청한 데이터 응답 여부에 상관없이 다음 라인을 실행 한다는 뜻입니다.

kirrie / 2012/09/06 09:41:19 / 추천 0
 저 코드 상으로는 문제가 없어보입니다. callback은 .load가 oncomplete된 상태에서만 수행되니까요.

전 좀 다른걸 여쭙고 싶은데, 혹시 로딩되는 html이 display:none이나 visibility:hidden 같은 style 속성을
갖고 있나요? dom에 삽입 완료된 엘리먼트들도 display 속성이 저렇게 되어 있으면 높이값을 가져올 수 없거든요.

개떡 / 2012/10/15 18:41:22 / 추천 0
음 저 callback함수는 load가 완료 되었을때 호출되는 부분이라고 나와있는데 그렇담
비동기고 아니고와는 상관이 없어보여요
저 높이 구할때 쓰는 함수들이 jquery에서 제공하는 함수들인가요?
milosz / 2012/10/16 06:26:03 / 추천 0
onComplete된 상황은 해당 경로에서 html을 받아오는 것까지라
obj로 선언한 이미지의 사이즈를 받아오지 못합니다.
 
즉 사이즈를 계산하고 하는 부분은 html을 받아오고 나서
이미지까지 모두 불러온 이후에 사이즈를 계산할 수 있다는 얘기죠.
 
setTimeout으로 값을 불러오는 시간을 조절하시거나
해당 obj에 event onload를 체크하셔서 해당 기능이 동작하게 하시면 될겁니다.