<td>
 <label>이름 <input type="text" id="sh_u_id" name="sh_u_id" value="<?=$sh_user_id?>"></label>
 <button type="button" onclick="load_list('loading');">조회</button>  // 여기가 start 입니다!!
</td>
 
		<table cellspacing="0"width="100%" style="margin-left: 10px; width: 100%;">
			<thead>
				<th>번호</th>
				<th>이름</th>
				<th>제목</th>
			</thead>
			<tbody id="list_datas"></tbody>
 
</talbe>
<div id="loading_html"></div> 
<script>
$(document).ready(function(){
  var loading = $('<div id="loading" class="loading" style="display:none"><img id="loading_img" alt="loading" src="./img/loading.gif"/ > </div>'); 
  $('#loading_html').append(loading);  // 로딩 이미지 append 하기
 
});
 
 
function load_list(loading){
if(loading) $('#loading').show(); // 검색 통해 ajax 실행되는거면 로딩 이미지 show하기
var sh_u_id = $('#sh_u_id').val();
 $.ajax({
            url: 링크주소.
             data: {"sh_u_id":sh_u_id },
            async: false,
            dataType: "jsonp",
            jsonp: "callback",
            type:"get",
            success: function (response) {
                outputdebugstring(response);
                if (is_success(response)) {  //성공시!!!!!!!
                   
for(var i=0; i<response.lenght; i++){
  
   var html = '<tr>';
html += '<td>'+번호+'</td>';
html += '<td>'+이름+'</td>'; 
html += '<td>'+제목+'</td>';
}
$(#list_datas).append(html); // 게시판 데이터 append 하기
//$('#loading').hide(); // 게시판 데이터 hide 처리 
 
 
                } else {
                    outputdebugstring(response);
                }
            },
            error: function (response) {
                outputdebugstring("load_user_info 호출이 실패 하였습니다.");
                outputdebugstring(response);
            },
            timeout: 30000
 
        });
 
}
</script>

해당 검색해야 되는 이름 적고 "조회"버튼 눌으면 자바스크립트 load_list 함수로  호출하게되는데

여기서 로딩 이미지는 나타나지만 ajax 성공 후 이미지가 이제서야 나옵니다.

순서상으로는 ajax 보다 if(loading) $('#loading').show();

앞에 있기때문에 이렇게 소스 작성했는데요.

왜 반응이 늦게 나오나요??