JQTouch - A qualquer momento, o carregamento ocorre, adicione uma classe de carregamento?

Question

Estou usando o JQTouch e, no JQTouch, vários dos links estão sendo carregados via Ajax e depois deslizando. O problema é que não há indicação de carregamento fornecida aos usuários.

Eu gostaria de uma maneira de adicionar uma classe de carregamento com um spinner de Ajax, sempre que a chamada Ajax estiver carregando, e remover a classe quando o carregamento estiver pronto e a página é exibida.

Alguma ideia?

Answer 1

Este é o comportamento básico se seus links forem elementos li class = "seta". Como você está exibindo seus links e onde deseja que o girador de carregamento seja exibido?

Answer 2

A resposta do showPageByHref () está parcialmente correta.

Mas, em vez de

$('body').append('<div id="loadinginprogress">Loading...</div>');

Você precisa

$('.current').append('<div id="loadinginprogress">Loading...</div>');

O corpo é geral demais para o JQTouch, precisa ser específico para o Div-Page atualmente exibido

Answer 3

ShowPageByHref () Função no JQTouch JS é um bom começo. Eu o adicionei diretamente na chamada do Ajax, para que a espera não piscará quando você clicar no link que já está carregado etc.

Em resumo - adicione o carregamento Div (ID carregando oProgress em exmaple) logo antes da chamada do Ajax e remova posteriormente o "sucesso" ou "erro". A seção de chamadas do Ajax seria algo assim (reduziu -a):

function showPageByHref(href, options) {
...
if (href != '#'){
    $('body').append('<div id="loadinginprogress">Loading...</div>');
    $.ajax({
        url: href,
        data: settings.data,
        type: settings.method,
        success: function (data, textStatus) {
            $('#loadinginprogress').remove()
            var firstPage = insertPages(data, settings.animation);
            if (firstPage)
            {
                if (settings.method == 'GET' && jQTSettings.cacheGetRequests && settings.$referrer)
                {
                    settings.$referrer.attr('href', '#' + firstPage.attr('id'));
                }
                if (settings.callback) {
                    settings.callback(true);
                }
            }
        },
        error: function (data) {
            $('#loadinginprogress').remove()
            if (settings.$referrer) settings.$referrer.unselect();
            if (settings.callback) {
                settings.callback(false);
            }
        }
    });
}
...
}

CSS para carregar Div seria algo como:

#loadinginprogress {
    -webkit-border-radius: 10px;
    background-color: rgba(0,0,0,.5);
    color: white;
    font-size: 18px;
    font-weight: bold;
    height: 80px;
    left: 60px;
    line-height: 80px;
    margin: 0 auto;
    position: absolute;
    text-align: center;
    top: 120px;
    width: 200px;
    z-index: 5000;
}

Answer 4

Obrigado por suas postagens diferentes. Eles me ajudaram muito.

Eu tenho uma solução para propor sem corrigir o código JQTouch no qual o JQTouch confia. Ele usa recursos do JQuery Ajax.

$(document).ready(function() {
...
  $('#jqt').ajaxStart(function() {
    console.log("ajaxStart");
    ...
  }).ajaxSuccess(function() {
    console.log("ajaxSuccess");
    ... 
  }).ajaxError(function() {
    console.log("ajaxError");
    .... 
  });
....
});

Mais detalhes disponíveis em esta página do documento jQuery.

Answer 5

Você pode adicionar um manipulador de eventos personalizado e acionar o carregamento.gif sempre que o clique no elemento específico era feito.

Answer 6

Acabei de responder de Darin Parker pergunta. Basta dar uma olhada que pode ajudá -lo.