JQTOUCH — добавлять класс загрузки каждый раз, когда происходит загрузка?

Я использую JQTOUCH, и в JQTOUCH несколько ссылок загружаются через AJAX, а затем вставляются. Проблема в том, что пользователям не предоставляется индикация загрузки.

Мне нужен способ добавить класс загрузки с помощью счетчика AJAX, когда когда-либо загружается вызов ajax, и удалить класс, когда загрузка завершена, и страница отображается.

Любые идеи?


iphone web-applications jqtouch
person AnApprentice    schedule 14.04.2010    source источник

Ответы (6)


arrow_upward
1
arrow_downward

Это основное поведение, если ваши ссылки являются элементами li class="arrow". как вы показываете свои ссылки и где вы хотите, чтобы отображался счетчик загрузки?

person Volmar    schedule 17.04.2010

arrow_upward
3
arrow_downward

ответ showPageByHref() частично правильный.

Но, вместо

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

Тебе нужно

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

Тело слишком общее для jqtouch, оно должно быть специфичным для отображаемой в данный момент DIV-страницы.

person Rob Porter    schedule 19.10.2010

arrow_upward
2
arrow_downward

Функция showPageByHref() в jqtouch js — хорошее начало. я добавил его прямо в вызов ajax, поэтому подождите, пожалуйста, не будет мерцать, когда вы нажимаете на ссылку, которая уже загружена и т. д.

Короче говоря, добавьте загрузочный div (id loadinginprogress в exmaple) прямо перед вызовом ajax и удалите позже «успех» или «ошибку». раздел вызова ajax будет выглядеть примерно так (сокращенно):

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 для загрузки div будет выглядеть примерно так:

#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;
}
person dsomnus    schedule 23.08.2010

arrow_upward
1
arrow_downward

Спасибо за ваши разные посты. Они мне очень помогли.

У меня есть решение, которое я могу предложить без исправления кода jQtouch, на который опирается jQTouch. Он использует возможности jQuery ajax.


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

дополнительные сведения доступны на этой странице документа jQuery.

person TNM Technologies    schedule 25.02.2012

arrow_upward
0
arrow_downward

Вы можете добавить пользовательский обработчик событий и запускать загрузку.gif каждый раз, когда выполняется щелчок по определенному элементу.

person vertic4l    schedule 24.08.2010

arrow_upward
0
arrow_downward

Я только что ответил на вопрос Дарина Паркера. Просто проверьте это, это может вам помочь.

person Vikas    schedule 15.11.2010