Утро доброе.
При разработке приложения возникла одна интересная проблема.
На странице есть много(~15) ajax скриптов, которые подгружают данные, один ajax запрос выполняется около секунды, и страница в это время выглядит довольно скверно. Кажется логичным сделать прелоадер, с надписью, что в данный момент что-то грузится.
В начало страницы я добавил вот такой скрипт
<script>
$('body').append('<div class="report-preloader"><img class="preloader-gif" src="/img/preloader.svg"/><span class="title"><span></div>');
</script>
Далее выполняются скрипты, подобные на скрипт, ниже
$.ajax({
type: "POST",
url: ApiSource1,
dataType: "jsonp",
data: data,
async: false,
jsonp: "callback",
jsonpCallback: 'jsonCallback2',
beforeSend : function(a){
console.log('Выполняется загрузка 1 блока');
$('.title').text('Выполняется загрузка 1 блока');
},
});
Проблема в том, что при загрузке таких скриптов прелоадер виснет, а информация о текущем выполнении скрипта не добавляется. А потом резко всё появляется. А в консоли, при console.log наглядно можно увидеть, что в данный момент грузится.
Как можно решить данную проблему, заранее спасибо.
