Sende Animationsprobleme in IE

Question

Ich habe schon früher damit zu tun, aber es scheint, als ob das Problem zurückkam. Lassen Sie mich erklären.

Ich habe eine Webseite, die es einem Benutzer ermöglicht, eine große Datei hochzuladen, nach der es auch einige Sekunden dauern kann, bis das serverseitige ASP.NET-Skript es verarbeitet. In der Zwischenzeit wollte ich eine Loader-/Spinner-Animation in einem Webbrowser anzeigen, um zu verhindern, dass Benutzer erneut auf die Senden-Schaltfläche klicken.

habe ich die folgende JQuery-Code:

$('#ButtonImportData').click(function() { 
    $('.importSubmitSpinner').css('display', 'inline'); 
} 

hier ist der HTML-Code für den Spinner Bild:

<img src="Graphics/spinner_big.gif" width="28" height="28" class="importSubmitSpinner" alt="Spinner" /> 

und hier ist CSS:

.importSubmitSpinner 
{ 
    margin: 0px 10px 0px 6px; 
    width: 28px; 
    height: 28px; 
    display: none; 
} 

spinner_big.gif ist ein einfaches GIF-Datei mit einer Animation, die einem Benutzer signalisiert, dass eine Seite geladen wird.

Der obige Ansatz funktioniert in fast allen Browsern, außer ... raten Sie welche? Ja, IE! Was passiert in IE ist, dass, nachdem ein Benutzer auf die Schaltfläche ButtonImportData der Spinner angezeigt wird, aber die Animation sofort stoppt, grundsätzlich geben Sie einen falschen Hinweis, dass eine Seite aufgelegt hat, die sie aufgefordert, erneut auf Senden - im Gegensatz zu dem, was ich wollte es machen.

Ich habe vor langer Zeit mit IE aufgehört, aber offensichtlich gibt es etwa die Hälfte der Internet-Community, die es immer noch verwendet. Mann, wie können Leute das Stück * & ^% benutzen? Wie auch immer, das ist keine Frage :) Die Frage ist, wie diese einfache Aufgabe im IE funktioniert und meine Animation tatsächlich abgespielt wird?

PS. Ich habe es mit IE 9 oder was auch immer testen, die aktuelle „Schönheit des Web“ für Windows 7.

EDIT:

Dank, ShadowScripter, ich habe eine Lösung gefunden. Hier ist, was für mich gearbeitet:

1 Fügen Sie den folgenden HTML, um zu bestimmen, ob wir auf IE laufen lassen (weil wir nicht brauchen, um dies zu tun „Hack“ für einen anderen Web-Browser):

<![if !IE]> 
<script type='text/javascript'> 
var bNotIE = 1; 
</script> 
<![endif]> 

2 Wir brauchen ID an das img-Element hinzuzufügen:

<img src="Graphics/spinner_big.gif" width="28" height="28" class="importSubmitSpinner" alt="Spinner" id="imgSpinnerImport" /> 

3 Dann die GIF-Animation anzuzeigen:

$('#ButtonImportData').click(function() { 
    //For "normal" browsers 
    $('.importSubmitSpinner').show(); 

    if (typeof (bNotIE) == 'undefined') { 
     //The following must be done only in case of IE 
     //NOTE: We need to load the same file but with a different name 
     // because if you don't change the file name it won't work! 
     setTimeout('document.images["imgSpinnerImport"].src = "Graphics/spinner_big_ie.gif"', 200); 
    } 
} 

Answer 1

Ich kann nicht scheinen, Ihr Problem in irgendeiner IE-Version zu replizieren.

Here's the live example Getestet habe ich es in.

Es kann viele verschiedene Gründe, warum Ihr nicht funktioniert.

• Andere Code könnte
• GIF-Bild stören fehlerhaft
• Client-Computer; Workload

Oh, auch,

können Sie .show() verwenden, anstatt die .css("display", "inline") Sache zu tun.
JQuery kann angeben, welcher Standardanzeigemodus das Element haben soll, wenn keines angegeben ist.

Answer 2

Try this es funktioniert super ...

setTimeout(function() { 
    ('.out').css("display","none");  
    $('#load').show();   
    return true; 
}, 100); 

Verzögerung von 100ms DeFore zeigt tatsächlich den Loader Bild.