Pourquoi mon spif GIF s’arrête-t-il pendant un appel jQuery ajax en cours?

Question

Je viens juste de commencer à sevrer moi-même à partir de ASP.NET UpdatePanels. Je suis à l'aide de jQuery et jTemplates de lier les résultats d'un service web pour une grille, et tout fonctionne bien.

Voici la chose: je suis en train de montrer un spinner GIF tandis que la table est en cours d'actualisation (à la UpdateProgress dans ASP.NET j'en ai tout fonctionne, sauf que le compteur est bloqué. Pour voir ce qu'il se passe, j'ai essayé de déplacer le compteur de la mise à jour des progrès div et sur la page où je peux le voir tout le temps. Il tourne et tourne jusqu'à ce que le démarrage de l'actualisation, et reste figé jusqu'à ce que l'actualisation est effectuée, puis commence à tourner à nouveau. Pas vraiment ce que vous voulez à partir d'un "please wait" spinner!

C'est dans IE7 - n'ont pas eu la chance de tester dans d'autres navigateurs encore. Toutes les pensées? Ajax est l'appel ou le côté client de la liaison de données tellement de ressources que le navigateur est incapable de s'occuper de ses GIFs animés?

Mise à jour

Voici le code qui actualise la grille. Pas sûr si cela est synchrone ou asynchrone.

updateConcessions = function(e) {
    $.ajax({
        type: "POST",
        url: "Concessions.aspx/GetConcessions",
        data: "{'Countries':'ga'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            applyTemplate(msg);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
        }
    });
}

applyTemplate = function(msg) {
    $('div#TemplateTarget').setTemplate($('div#TemplateSource').html());
    $('div#TemplateTarget').processTemplate(msg);
}

Mise à jour 2

Je viens de vérifier le jQuery documentation et de l' $.ajax() méthode est asynchrone par défaut. Juste pour le plaisir, j'ai ajouté cette

$.ajax({
    async: true,
    ...

et il n'a fait aucune différence.

Answer 1

Ce n'est pas l'appel Ajax qui bloque le navigateur. C'est le gestionnaire de succès (applyTemplate). L'insertion de HTML dans un document comme celui-ci peut bloquer Internet Explorer, selon la quantité de HTML utilisée. C'est parce que l'interface utilisateur IE est à thread unique; si vous remarquez que les menus IE actuels sont gelés pendant que cela se produit.

Comme test, essayez:

 applyTemplate = function(msg) {
   return;
}
 

Answer 2

Je sais qu'il s'agit d'un article plus ancien, mais je viens de mettre en œuvre le JS à partir de http://fgnass.github.com/spin.js/ . Il fonctionne à merveille et est totalement compatible avec les versions antérieures.

Answer 3

Je ne me souviens pas précisément de ce qu'elle fait, mais nous avons eu un problème similaire avec IE6 dans une longue boîte et nous l'avons réparé avec cette incroyable hack dans le code Javascript:

setTimeout("document.images['BusyImage'].src=document.images['BusyImage'].src",10);

Que juste définit la source de l'image pour ce qu'elle était avant, mais c'est apparemment suffisant pour bousculer IE de la sortir de sa torpeur.

edit: je pense que je me souviens de ce qui a été à l'origine de ce: Nous étions de chargement de l'animation dans un div avec un display: none. IE charge et de ne pas commencer l'animation, parce que c'est caché. Malheureusement, il n'est pas le début de l'animation lorsque vous définissez le bloc contenant de display: block, nous avons donc utilisé l'-dessus de la ligne de code pour l'astuce de l'IE dans le rechargement de l'image.

Answer 4

L'image se fige car, même si elle est masquée, l'animation est désactivée par IE.

Pour résoudre ce problème, ajoutez l’image de chargement au lieu de la masquer:

 function showLoader(callback){
    $('#wherever').append(
        '<img class="waiting" src="/path/to/gif.gif" />'
    );

    callback();
}

function finishForm(){
    var passed = formValidate(document.forms.clientSupportReq);

    if(passed)
    {
        $('input#subm')
            .val('Uploading...')
            .attr('disabled','disabled');
        $('input#res').hide();
    }

    return passed;
}
$(function(){
    // on submit
    $('form#formid').submit(function(){
        var l = showLoader( function(){
                         finishForm() 
                    });

        if(!l){
            $('.waiting').remove();
        }

        return l;
    });
});
 

Answer 5

Êtes-vous sûr que pendant l'appel AJAX, le GIF ne tourne pas?

Dans votre concession.aspx, placez cette ligne quelque part dans le traitement de GetConcessions: -

 System.Threading.Thread.Sleep(5000);
 

Je soupçonne que le gif tourne pendant 5 secondes, puis se fige pendant que IE rend et peint le résultat.