jQuery show "laden" während der langsamen Bedienung

Ich habe alles versucht und ich habe Schluss zu, als diese das Produkt von einem browser brainfart.

1. jQuery sagt der browser zum anzeigen/verbergen der laden div
2. jQuery teilt dem browser hinzufügen/entfernen der hidden-Klasse aus den Reihen
3. jQuery sagt der browser zum anzeigen/verbergen der laden div
4. Der browser keine der oben genannten Schritte in der falschen Reihenfolge (2 an Erster Stelle)

'setTimeout' in meinem letzten update zwingt den browser tho führen Sie alle Schritte in der richtigen Reihenfolge.
Es nervt, ist nicht elegant, aber zumindest funktioniert es...

Update: die setTimeout ist notwendig, da jquery "vereinfacht" die Kette der Befehle. Wenn ich sage, es zu verbergen element und die zeigen es wieder, es wird einfach ignoriert den Befehl, weil das endgültige Resultat ist das gleiche, wie nichts zu tun...

Legen Sie ein div-Element auf Ihrer Seite irgendwo wie so:

<div id="spinner" class="spinner" style="display:none;">
    <img id="img-spinner" src="@Url.Content("~/images/loading.gif")" alt="Loading"/>
</div>

Dann Haken Sie das ein-und ausblenden zu ajaxStart, ajaxStop, und ajaxError Ereignisse wie folgt:

$("#spinner").bind("ajaxSend", function() { $(this).show(); })
$("#spinner").bind("ajaxStop", function() { $(this).hide(); })
$("#spinner").bind("ajaxError", function() { $(this).hide(); });

Haben Sie versucht, mit ajaxStart zum ausführen von update-Funktion?

Habe ich gesehen, dass dieses Verhalten auch, und es hängt vom verwendeten browser. Der IE ist am meisten betroffen. Der Grund ist nicht, dass jQuery ist langsam, obwohl der JavaScript läuft langsamer als IE, aber mehr wegen dem rendering des neuen HTML. Der Grund dafür setTimeout() hilft ist, weil es die erste Aktion und nur, wenn der browser fertig ist die neue HTML-rendering-der zweite Teil ist getan. Der ganze Vorgang ist tatsächlich langsamer, aber das feedback macht es schöner.

Einen Weg zu zeigen, dies ist durch das verstecken des langen Tisches und läuft der gleiche code. Es wird das gleiche tun, aber wie die Tabelle unsichtbar ist und nicht wiedergegeben wird die ganze Aktion ist viel schneller.

Gibt es ein paar Möglichkeiten, dies zu umgehen.

1. Versuchen zu vermeiden, Tabellen und gehen für ein DIV layout statt. Tabellen Rendern langsam und je nach browser die Tabelle kann nur dann sichtbar werden, dann komplett gerendert.
2. Wenn Sie müssen, verwenden Sie die Tabelle betrachten Sie die Verwendung mehrerer Tabellen von sagen wir 100 Zeilen geklebt. So, die Seite beginnt zu Rendern, sobald der erste Tisch wurde neu formatiert werden.
3. Wenn eine große Tabelle ist der einzige Weg zu gehen, und Sie wissen, kann der Benutzer nur die obersten Zeilen, die Sie tun können, die Aktion zweimal, das erste mal auf der oberen Reihen und das zweite mal auf alle Zeilen. Dies ist die langsamste und am wenigsten optimale Lösung, kann aber sehr leicht zu implementieren, indem ein jQuery-filter zu der Aktion.

Versuchen, verwenden Sie die callback "complete" von der show-Methode, js ist meist in asynchronen Ereignisse, und diese drei Zeilen:

jQuery("#loading").show(); //not showing
jQuery("#listadoArticulos tr.r").removeClass("hidden");
jQuery("#loading").hide();

ausgeführt werden, ohne zu warten,, so, Ihr zeigen, hinzufügen-Klasse und versteckt sich sofort das div, das ist, warum Sie nicht sehen können, die div, Sie sind es versteckt, ohne zu warten, gezeigt zu werden und es erscheint und verschwindet sehr schnell, oder sogar kann es nie zeigen, bis (weiß nicht, über die Optimierung der Art).

Wenn Sie hinzufügen, die beiden letzten innerhalb der vollständige Rückrufe wird es funktionieren, mehr http://api.jquery.com/show/:

jQuery("#loading").show(400, function (){
    jQuery("#listadoArticulos tr.r").removeClass("hidden");
    jQuery("#loading").hide();
});

In jedem Fall auch der richtige Weg, dies zu tun für die ajax-Anfrage (ich Stelle mir Los ist, um nützlich zu sein für jemanden) ist mit ajaxStart und ajaxStop wie diese:

$(document).ajaxStart(function() {
   $( "#loading" ).show();
}).ajaxStop(function() {
  $( "#loading" ).hide();
});

Ergänzung für removeClass Abwesenheit Rückruf:

Vielleicht ist Ihr problem lag an der Tatsache, dass es keinen Rückruf für removeClass, aber Sie können das nächste:

jQuery("#loading").show(400, function (){
    var els = jQuery("#listadoArticulos tr.r");
    els.each(function(i, el) {
        el.removeClass("hidden");
        if (els.length == i +1) jQuery("#loading").hide();
    });
});

versuchen Sie auch dies:

var els = jQuery("#listadoArticulos tr.r");
els.each(function(i, el) {
  if (i == 0) jQuery("#loading").show();
  el.removeClass("hidden");
  if (els.length == i +1) jQuery("#loading").hide();
});

Können Sie das problem, dass wenn Sie Bilder oder irgendwelche extra-code, der aktiviert wird, sobald Sie entfernen die Klasse, es gibt keine native Möglichkeit zu warten, für Sie zum ausblenden der be-div, also vielleicht, auch wenn Sie die Klasse versteckt, es gibt keine einfache Möglichkeit zu warten, bis die Objekte sichtbar sind.

Ich nur feststellen, dass das war vor 2 Jahren, vielleicht braucht es diese nicht mehr.