Как показать загрузочный счетчик в jQuery?
Решено следующее: 1- Объявить флаг, указывающий, что анимация завершена или нет:
BOOL pageAnimationFinished;
2- Установите для этого флага значение true в viewDidLoad:
pageAnimationFinished = YES;
3- Отключить tapGesture для pageViewController и назначить 'self' делегату panGestureRecognizer:
for (UIGestureRecognizer * gesRecog in self.pageViewController.gestureRecognizers)
{
if ([gesRecog isKindOfClass:[UITapGestureRecognizer class]])
gesRecog.enabled = NO;
else if ([gesRecog isKindOfClass:[UIPanGestureRecognizer class]])
gesRecog.delegate = self;
}
4- Разрешить / Запретить panGestureRecognizer через следующий метод делегирования распознавателя жестов:
-(BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer
{
if ([gestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]] && ([gestureRecognizer.view isEqual:self.view] || [gestureRecognizer.view isEqual:self.pageViewController.view]))
{
UIPanGestureRecognizer * panGes = (UIPanGestureRecognizer *)gestureRecognizer;
if(!pageAnimationFinished || (currentPage < minimumPage && [panGes velocityInView:self.view].x < 0) || (currentPage > maximumPage && [panGes velocityInView:self.view].x > 0))
return NO;
pageAnimationFinished = NO;
}
return YES;
}
5- Добавьте следующий метод делегатаViewController:
- (void)pageViewController:(UIPageViewController *)pageViewController didFinishAnimating:(BOOL)finished previousViewControllers:(NSArray *)previousViewControllers transitionCompleted:(BOOL)completed
{
pageAnimationFinished = YES;
}
6 ответов
Существует несколько путей. Мой предпочтительный путь состоит в том, чтобы присоединить функцию к ajaxStart/Stop событиям на самом элементе.
$('#loadingDiv')
.hide() // Hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
функции ajaxStart/Stop будут стрелять каждый раз, когда Вы делаете любые вызовы Ajax.
Обновление : С jQuery 1.8 документация указывает, что .ajaxStart/Stop должен только быть присоединен document. Это преобразовало бы вышеупомянутый отрывок к:
var $loading = $('#loadingDiv').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
-
1@sbi и @mister, какой смысл того, чтобы разделить строку на строки как этот? это хорошо работает, когда все находится в первом объекте в массиве. – Rookie 18 May 2011 в 18:29
Можно вставить изображение с анимацией в право DOM перед вызовом Ajax и сделать подставляемую функцию для удаления его...
$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
$("#myDiv").html('');
});
Это удостоверится Ваши запуски анимации в том же кадре по последующим запросам (если это будет иметь значение). Обратите внимание, что старые версии IE могли бы испытывать трудности с анимацией.
Удачи!
$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();
function showResponse() {
hideLoad();
...
}
CSS #loading { background: url(/image/loading.gif) no-repeat center; }
JavaScript
$.listen('click', '#captcha', function() {
$('#captcha-block').html('<div id="loading" style="width: 70px; height: 40px; display: inline-block;" />');
$.get("/captcha/new", null, function(data) {
$('#captcha-block').html(data);
});
return false;
});
#loading { background: url(/image/loading.gif) no-repeat center; }
$.listen('click', '#captcha', function() {
$('#captcha-block').html('<div id="loading" style="width: 70px; height: 40px; display: inline-block;" />');
$.get("/captcha/new", null, function(data) {
$('#captcha-block').html(data);
});
return false;
});
-
1@Rob: Обратите внимание, что
const char* c_str;определение , не объявление. – sbi 18 May 2011 в 16:18
Используйте плагин загрузки: http://plugins.jquery.com/project/loading
$.loading.onAjax({img:'loading.gif'});
Для jQuery я использую
jQuery.ajaxSetup({
beforeSend: function() {
$('#loader').show();
},
complete: function(){
$('#loader').hide();
},
success: function() {}
});