JQTOUCH - Каждый раз, когда происходит загрузка, добавлять класс загрузки?
-
26-09-2019 - |
Вопрос
Я использую JQTOUCH, и в JQTOUCH несколько ссылок загружаются через AJAX, а затем вставляются.Проблема в том, что пользователям не предоставляется индикация загрузки.
Я хотел бы иметь способ добавить класс загрузки с помощью AJAX-счетчика, когда когда-либо загружается вызов ajax, и удалить класс, когда загрузка будет завершена, и страница будет отображена.
Есть какие-нибудь идеи?
Решение
Это основное поведение, если ваши ссылки являются элементами Li Class = «стрелка». Как вы отображаете свои ссылки и где вы хотите загрузить Spinner для отображения?
Другие советы
Ответ ShowpageByhref () частично правильный.
Но вместо
$('body').append('<div id="loadinginprogress">Loading...</div>');
Тебе нужно
$('.current').append('<div id="loadinginprogress">Loading...</div>');
Тело слишком общее для jqtouch, надо быть специфичным для текущей отображаемой данной страницы
Функция showPageByHref() в jqtouch js - хорошее начало.я добавил это прямо в вызов ajax, поэтому, пожалуйста, подождите, не будет мигать, когда вы нажимаете на ссылку, которая уже загружена и т.д.
Короче говоря - добавьте загрузочный div (id loadinginprogress в exmaple) непосредственно перед вызовом ajax и удалите позже "success" или "error".раздел вызова 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; }
Спасибо за ваши разные посты. Они помогли мне много.
У меня есть решение, чтобы предложить, не исправляя код JQTouch, на котором зависит jqtouch. Он использует возможности jQuery ajax.
$(document).ready(function() {
...
$('#jqt').ajaxStart(function() {
console.log("ajaxStart");
...
}).ajaxSuccess(function() {
console.log("ajaxSuccess");
...
}).ajaxError(function() {
console.log("ajaxError");
....
});
....
});
Дополнительные детали доступны в эта страница jquery doc.
Вы можете добавить пользовательский обработчик событий и вызвать загрузку .gif каждый раз, когда вы получили клик на определенном элементе.
Я только что ответил Дарин Паркер вопрос. Отказ Просто проверьте это, это может помочь вам.