개발 Q&A

제목 jquery mobile 함수관련 재질문입니다.
글쓴이 토끼와거북 작성시각 2014/07/01 14:00:07
댓글 : 6 추천 : 0 스크랩 : 0 조회수 : 15893   RSS
<script>
$(function(){
	init(60);
});

function init(init_width){
	$("#exam_paper .exam_block").eq(0).show();
	check_ti_block(init_width);
}

function check_ti_block(init_width){
	$.each($(".ti_block"), function(key){
		block_width = Number($(this).css("width").slice(0,-2));
		left_width = Number($(this).children().eq(0).css("width").slice(0,-2))+init_width;
		right_width = block_width - left_width-10;
		
		$(this).children().eq(0).css("width", left_width);
		$(this).children().eq(1).css("width", right_width);
	});
}
</script>
위와 같이 스크립트가 있습니다. 
PC버전에서 실행시키면 check_ti_block 합수에서 block_width 가 정상적인 값으로 출력됩니다.
그런데 모바일에서 실행시키면 아직 document 가 아직 로딩되기 전의 값으로 인식해서 10으로 출력됩니다. 
$(function(){
	init(60);
});

을 실행시키는 것과

!function(){
init(60);
}();

이런식으로 실행시키는 것은 결과값이 똑같습니다. 
 다음글 회사에서 진행한 프로젝트로 개발된 사이트의 저작권은 누... (5)
 이전글 hostname이 있는 경우 index.php 지우기 (6)

댓글

kaido / 2014/07/01 16:49:37 / 추천 0
<script>


function init(init_width){
 $("#exam_paper .exam_block").eq(0).show();
 check_ti_block(init_width);
}

function check_ti_block(init_width){
 $.each($(".ti_block"), function(key){
  block_width = Number($(this).css("width").slice(0,-2));
  left_width = Number($(this).children().eq(0).css("width").slice(0,-2))+init_width;
  right_width = block_width - left_width-10;
  
  $(this).children().eq(0).css("width", left_width);
  $(this).children().eq(1).css("width", right_width);
 });
}

$(function(){
 init(60);
});
</script>

이렇게 해도 안되시나요?
토끼와거북 / 2014/07/01 19:52:34 / 추천 0
위에처럼도 해 보고 스크립트를 문서 맨 하단에도 넣어 보았는데요.
모바일의 경우 스크립트의 위치에 상관없이 도큐멘트가 로딩되기 이전에 먼저 스크립트를 실행시키고 그 다음에 도큐멘트가 로딩 완료됩니다. 
 
darkninja / 2014/07/01 20:58:43 / 추천 0
로마에가면 로마법을 따르심이...

http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=73490&sca=%B9%AE%B9%FD

http://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events
 
$(document).on('pageinit') vs $(document).ready()
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate. Because of this $(document).ready() will trigger before your first page is loaded and every code intended for page manipulation will be executed after a page refresh. This can be a very subtle bug. On some systems it may appear that it works fine, but on others it may cause erratic, difficult to repeat weirdness to occur.

Classic jQuery syntax:

$(document).ready(function() { 

});
To solve this problem (and trust me this is a problem) jQuery Mobile developers created page events. In a nutshell page events are events triggered in a particular point of page execution. One of those page events is a pageinit event and we can use it like this:

$(document).on('pageinit', function() {

});

 
토끼와거북 / 2014/07/01 21:30:41 / 추천 0
pageshow 이벤트를 잡아서 해결했습니다.

$(document).on('pageshow', function() {
    init(10);
});

그런데 이렇게 하니까 약간의 딜레이가 발생하는데 이건 왜 그럴까요?
토끼와거북 / 2014/07/01 21:47:06 / 추천 0
해결했습니다. 감사합니다.^^
darkninja / 2014/07/01 21:49:25 / 추천 0
jquerymobile 이 크기가 작다고 해도
코드에서 보면 여러단계를 거쳐 부르고 있네요
단계를 줄이시던가 자바스크립트로만 돔을 처리하신다면 
조금더 빨라질수 있겠죠
이론적인 생각입니다... 경험이 없어서...