테스트 사이트 - 개발 중인 베타 버전입니다

ajax 통해 게시판 데이터 불러오기 전까지 로딩 이미지 첨부 기능 구현할려고합니다. 채택완료

amkorjquery 9년 전 조회 12,543

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

 

 

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

 

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

 

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

 

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

 

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

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

잉끼s
9년 전

어떤 브라우져인지는모르겠지만 show() 호출 이후 이미지를 로딩을 시작하며, 이미지 로딩이 좀 길어진 것 같습니다.

로딩 오브젝트를 굳이 append()로 넣어야 하는 이유가 있나요?

그냥 html로 하드코딩하시면 안되나요?

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인