Tạo màn hình Loading khi call Ajax thật đơn giản
Có thể để ý thấy nhiều bạn trẻ khi develop 1 chức năng nào đấy cần gọi API bằng AJAX với Jquery thì rất hay để lỗi không tạo màn hình Loading để khoá action từ người dùng lại, điều này có thể dẫn đến 1 số tác hại như sau:
- API luôn có độ trễ xử lý, enduser không hiểu chuyện gì xảy ra, ko thấy hồi đáp sẽ bấm nút submit liên tục, dẫn đến lỗi hệ thống và dữ liệu.
- Tạo cảm giác ứng dụng chạy ì ạch nặng nề, không thích thú sử dụng dẫn đến rời bỏ ứng dụng
Việc tạo màn hình Loading cũng không đến nỗi phức tạp với HTML&CSS&JQuery nên việc tạo 1 màn hình Loading khi gọi API thì sẽ đảm bảo UX tốt hơn, hạn chế lỗi và nâng cao chất lượng hệ thống hơn.
Loading image
Kiếm 1 cái ảnh gif hiệu ứng loading, VD như này, tool generator online cũng nhiều.
HTML
Tạo 1 div trong body
<body>
<div id="loading" style="display:none">
<img src="./your-image-path/ajax-loader.gif" alt="Loading..."/>
</div>
<!-- ... MAIN HERE ... -->
</body>
CSS
#loading {
background-color:white;
position: fixed;
display: block;
top: 0;
bottom: 0;
z-index: 1000000;
opacity: 0.5;
width: 100%;
height: 100%;
text-align: center;
}
#loading img {
margin: auto;
display: block;
top: calc(50% - 100px);
left: calc(50% - 10px);
position: absolute;
z-index: 999999;
}
JQUERY
Thêm đoạn xử lý callback khi call AJAX
$(document).ready(function(){
$(document).ajaxStart(function() {
$("#loading").show();
});
$(document).ajaxStop(function() {
$("#loading").hide();
});
});