Коли ajax-запит триває довго, виникає не зрозуміла ситуація. Чи запит уже закінчив роботу, чи ще ні. Для цього не погано було б організувати анімацію, яка б запускалась перед ajax-запитом, та виключалась після його виконання.
Даний метод є дуже простий і зручний, оскільки він буде задіяний на усі існуючі в проекті ajax-запити, без будь-якого додаткового прописування ідентифікаторів об'єктів. Оскільки ми біндимо функцію анімації на саму подію початку та кінця Ajax-запиту
index.html
|
|
... <div id="divLoading"> </div> |
applocation.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#divLoading { display : none; } #divLoading.show { //display : block; position : fixed; z-index: 100; background-image : asset-url('load.gif'); background-color:#666; opacity : 0.4; background-repeat : no-repeat; background-position : center; left : 0; bottom : 0; right : 0; top : 0; } |
application.js
|
|
$(document).on("ready page:load",function() { $(document).on("ajax:before", function() { $("div#divLoading").addClass('show'); }); $(document).ajaxComplete(function() { $("div#divLoading").removeClass('show'); }); }); |
