, показывая 'loading content message'

Question

Я использую это, чтобы загружать события динамически без обновления страницы, но слишком много времени на загрузку, поэтому для лучшего UX я думал, что мы должны добавить «загружать события» или подобные, но мои попытки до сих пор были напрасны.

function calendarAjax() { 

    $('#month_nav a').live('click', function() { 
     $('#events_container').animate({ opacity: "0" }, 200).load($(this).attr('href')+' #events_content' , function(){ 
      $(this).animate({ opacity: "1" }, 600); 
     }); 
     return false; 
    }) 

}; 

Любая помощь очень ценится.

Спасибо.

Answer 1

Есть несколько способов, вот глобальная загрузка изображений/текста кода с использованием $ajaxStart и $.ajaxStop

$('#loadingDiv') 
    .hide() // hide it initially 
    .ajaxStart(function() { 
     $(this).show(); 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); 
    }); 

Предполагая, что идентификатор вашего загрузочного Div является loadingDiv, который содержит текст или изображение загрузки.

Обновление

$.load является JQuery Shorthand method который, как и несколько других например $.post, $.get, $getJSON, $.getScript использует функцию $.ajax под капотом.

$.ajaxStart способ зарегистрировать функцию обратного вызова будет выполняться при первом запуске запроса Ajax и $.ajaxStop используется таким же образом зарегистрировать функцию обратного вызова будет выполняться, когда все Ajax запрос завершает

Так что, если вы используете над кодом, чтобы показать и скрыть загрузочный div, он автоматически покажет, что загрузка текста/изображения, когда ваш ajax-запрос $.load запускается и скрывается, когда запрос ajax завершается, при условии, что у вас есть только один сокращенный метод на этой странице.

Answer 2

Jquery BlockUI plugin идеально подходит для ваших нужд.

Answer 3

Вам нужно 3 вещи:

Загрузчик:

<div id="loader"> 
I'm loading something 
</div> 

CSS для вашего загрузчика:

#loader { 
    /* some design */ 
} 

, то вам нужно сделать яваскрипта метод, который будет переключать его видимость:

var loader = { 
    show: function() { 
     $('#loader').show(); 
    }, 
    hide: function() { 
     $('#loader').hide(); 
    } 
}; 

Тогда вы можете просто сказать loader.show() всякий раз, когда вы хотите что-то быть loading, и loader.hide(), когда вы хотите отклонить это сообщение.