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

Question

Я использую Jquery для функциональности Ajax и использую значок загрузчика, чтобы указать пользователю, что данные извлекаются. Однако я хочу, чтобы пользователь видел значок загрузчика не менее 1 с, даже если для извлечения данных требуется менее 1 с (если требуется более 1 с, значок загрузчика должен оставаться в течение всей продолжительности.

Вот код для загрузчика HTML

<img id="loader" src="example.com/images/ loader.gif" style="vertical-align: middle; display: none" />

Я использую функцию Jquery .Ajax для обработки данных.

Answer 1

Я бы использовал счетчик, который начинается с 2 и уменьшается через 1 секунду и когда приходит ответ ajax. Что-то вроде этого:

var counter = 2;
function decrement() {
  if (--counter == 0) {
    $('#loader').hide();
  }
}
setTimeout(decrement, 1000);
$.ajax(..., complete: decrement);

Answer 2

Вот, пожалуйста. Смотрите это в действии на http://jsfiddle.net/B4Cge/

var loader = '<img id="loader" src="http://tools.patentcalls.com/images/spinner.gif"/>';

    $(loader).appendTo('#container').load(function() {
        $('#container').find('#loader').delay(3000).fadeOut(function() {
            $('#container').append('your ajax content')
        })
    });

Answer 3

Сначала покажите изображение загрузчика.Затем используйте setTimeout() для запуска таймера.Когда таймер завершит работу, проверьте, завершился ли AJAX, уничтожил ли он образ загрузчика, но если нет, то ничего не сделал с образом загрузчика и установил флаг.Когда вызывается обработчик успеха AJAX, проверьте флаг;если флаг установлен, таймер завершил работу, и обработчик успеха может удалить изображение загрузчика;если флаг не установлен, то обработчик успеха может позволить таймеру уничтожить образ загрузчика.

По сути, у вас запущены две асинхронные задачи (тайм-аут и AJAX).Последний из них убивает изображение загрузчика.