'Ajax 로딩'에 해당되는 글 1건

Ajax beforeSend, 로딩 시 화면

2014. 8. 22. 17:52 Html/CSS/Javascript

Ajax로 많은 양의 데이터를 불러오다보면 가끔 페이지 로딩은 끝났는데,

데이터가 안보일 때가 있다- (물론, 뒤늦게 데이터가 모두 출력된다-)


로딩 중 화면이 보인다면, 페이지 로딩이 끝나지 않았음을 알 수 있을 것이다-


다른 방법도 있었지만, 

이번엔 beforeSend 라는 것이 나를 도와주었다-


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

function createNoticeTable(page_num) { $.ajax({ type : "GET", url : "/notices", async : true, data : { page_num : page_num }, dataType : "json", beforeSend : function(){ $("#noticeBody").html("<img src='/resources/img/getdata.gif'/>"); }, success : function(data) { var html = "<h4>Notice</h4>"; $.each(data.notice_list, function(entryIndex, notice) { var date = notice.create_date; var use_date = date.split("/"); var month = use_date[0]; var day = use_date[1]; var year = use_date[2]; html += '<div id="noticeRow'+ notice.notice_seq +'">'; html += " <div class='col-sm-12'><strong><a class='ajax-link' href='#' onclick='noticeView(" + notice.notice_seq + ")'>" + notice.notice_title + "</a></strong></div>"; html += ' <div class="col-sm-12 push10">' + year + '년' + month + '월' + day + '일' + '</div>'; html += '</div>'; }); $("#noticeBody").html(html); }, error : function(xhr) { alert("ERROR : " + xhr); } }); }


쓸 데 없는 내용이 많이 포함되었지만,

여튼 핵심은 success 이후에 데이터가 들어갈 자리에 로딩 화면 gif 파일을 하나 넣어주면 끝-


'Html/CSS/Javascript' 카테고리의 다른 글

Javascript, Excel Export  (0) 2015.05.04
구글 지도 API  (0) 2014.08.13
PPT, PDF preview, gdocsViewer  (0) 2014.08.10
WYSIWYG 에디터, summernote  (0) 2014.08.10

Recent Posts

Recent Comments

Recent Trackbacks