jQuery Показать и скрыть функции в Chrome

Question

У меня есть Div, который я хочу сказать «Идет загрузка ...» во время выполнения запроса AJAX. Я использую движок реального времени под названием APE, поэтому, когда приходит событие, первое, что я делаю, это показываю Div, а затем устанавливаю HTML на «Загрузка ...», например:

$("#test").show();
$("#test").html("Loading...");

И затем внутри моей функции ajax я делаю это (я использую ExtJS, чтобы загрузить его в сетку):

    jsonfields = Ext.decode('[' + $.ajax({
    url: "ajax.php?getsensors="+raw.deviceId, 
    success: function(data) {

        $("#test").hide();

    },
    async: false
}).responseText + ']');    

Таким образом, в Firefox div загрузки отображается, пока не достигнет функции hide (), а затем исчезнет, ​​в Chrome div Loading ... вообще не появляется, и в консоли нет ошибок, есть идеи, почему ? Спасибо!

   <div id="test"></div>

Есть только один div с идентификатором теста, также я попробовал

    $("#test").html("Loading...");

А затем попытался очистить тест с помощью empty (), все еще работает в Firefox и таинственно не в Chrome. Я добавил в раздел Загрузка к тестовому элементу div, просто чтобы посмотреть, что происходит, при начальной загрузке он говорит «загрузка», а затем, когда первый AJAX-запрос завершает работу, он успешно очищает div, но он никогда не заполняется снова при загрузке.

Answer 1

У меня была такая же проблема. Анимация загрузки не была скрыта в успехе AJAX. Я только что добавил 1 миллисекунду в функции скрытия jQuery.

function test() {
    $('#loading').show();
    $.ajax({
        type: "POST",
        url: "functions.asp",
        cache: false,
        crossDomain: false,
        dataType: "text",
        data: { action: "getData" },
        success: function (data, textStatus) {
            $('#loading').hide(1); // Added a millisecond
            // Do some actions
        },
        error: function (xhr, aOptions, rError) {
            $('#loading').hide();
        }
    });
}

Answer 2

Это jQuery? Потому что у меня есть что-то похожее на Viajeros.com, настроить так:

 $("#loading_indicator").bind("ajaxSend", function(e){
    $(this).show();
 }).bind("ajaxComplete", function(){
    $(this).hide();
 }).bind("ajaxError", function(){
    $(this).hide();
 });

События "ajaxSend", "ajaxComplete" и "ajaxError" инициируются внутренним вызовом jQuery ajax. http://api.jquery.com/ajaxSend/

Answer 3

Просто сам сталкивался с этой проблемой. Мое решение ...

Чтобы обойти эту проблему в Chrome, используйте время ожидания вызова AJAX в одну миллисекунду.

* 1005 Е.Г. *

$("#mySpinningLoader").show();

var t = setTimeout(function () {
    $.ajax({
        url: rootPath + controllerNAction,
        async: false,
        type: "POST",
        data: JSON.stringify(lightweightObject),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data, textStatus, jqXHR) {
            $("#mySpinningLoader").hide();
        }
    });
}, 1);

Answer 4

У меня иногда возникали проблемы с показом и скрытием, если вы на самом деле не передавали параметры быстрого или медленного.

Итак:

$(this).show('slow);

или

$(this).hide('fast');

Answer 5

Пит,

пользователь загружает GIF для такого рода вещей,

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

это самая распространенная практика

см. Эту ссылку

http://jquery -howto.blogspot.com / 2009/04 / дисплей-погрузо-GIF-изображения, а-loading.html