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 파일을 하나 넣어주면 끝-