Loading gif-Bild wird nicht angezeigt in IE und chrome

Bin ich mithilfe von JQuery-ajax-call für das senden von synchronisierten Aufruf von server-und anzeigen wollen, ein be-Bild für diese Zeit.

Aber be-Bild sichtbar ist, in Firefox aber nicht in IE und chrome. Wenn ich Debuggen, habe ich festgestellt, dass im IE beim aufrufen von java-Skript, zum beenden der Anzeige von änderungen im browser, wie es Stoppt die DOM-und wenn das Gespräch beendet ist, es zeigt dann alle änderungen. Da zeigt ich dem laden-Bild auf ajax call mit und entfernen Sie es nach Abschluss des Anrufs wird die doe IE nicht alle Bilder angezeigt.

Aber wenn ich mit alert-box,es zeigt das lade Bild im IE, wie es halt der thread, bis wir darauf reagieren.

Gibt es eine Methode zum stoppen des java-script-Ausführung für eine Millisekunde, so dass IE Ausführung der halte-und be-Bild angezeigt.

Ich habe bereits versucht ajaxSend, ajaxComplete, ajaxStart, ajaxStop von JQuery und timer-Ereignis von java script, aber bekommt keine Lösung.

Jede Hilfe ist wertvoll, vielen Dank im Voraus.

  • Ich habe mich um dieses problem im IE in der Vergangenheit, indem die Ajax-Aufruf in einer setTimeout() mit 1ms Verzögerung. In der Regel dann der IE die Seite aktualisieren, bevor Sie die timeout-callback, die startet die Ajax-Anfrage. Beachten Sie, dass, wenn die be-Bild nicht bereits im browser-cache kann es nicht geladen, in der Zeit angezeigt, bevor der Ajax-response zurück kommt.
  • Ich habe versucht, setTimeout (), aber es funktioniert nicht.
  • Zeigen Sie Ihren code.
  • Zeig den relevanten code..
  • Nur so viel, wie das problem repliziert werden können. Sie nicht haben, um jeder Logik.
InformationsquelleAutor Mohit Pandey | 2012-08-14
  1. 10

    Im Zusammenhang mit XHR, synchron bedeutet nur, dass der browser einfriert, bis die Anforderung abgeschlossen ist. Wenn das, was Sie wollen, ist, um sicherzustellen, dass nur eine Anfrage ausgeführt wird, zu einem bestimmten Zeitpunkt, dann verwenden Sie Ihre eigene Flagge, um anzuzeigen, dass eine Anforderung in Bearbeitung ist.

    Per definition die synchrone Flagge einer Anfrage bedeutet, dass jede andere Tätigkeit muss aufhören. Ich bin überrascht, dass es sogar funktioniert im Firefox, beim letzten mal habe ich versucht, dass es nicht funktioniert, aber das war vor langer Zeit. Also vergiss es, es gibt keine Möglichkeit, damit es funktioniert in allen Browsern. Sogar, wenn Sie die Verzögerung der Anforderung mit einem setTimeout, am besten du bekommst eine gefrorene browser mit einem nicht-animierte gif-Datei. Und die Nutzer mögen es nicht, wenn Sie frieren Ihren browser, vor allem, wenn die Anfrage vielleicht mehr als ein Bruchteil einer Sekunde.

    Nicht immer hängt der browser für die Sicherheit oder korrekte Funktionsweise bezogene Funktionen. Wenn Ihre Anwendung bekommen könnte gebrochen werden, wenn ein client nicht zwei Anträge parallel, dann haben Sie einen Fehler auf der server-Seite. Es gibt nichts, das verhindert, dass ein böswilliger Nutzer von parallelen Anfragen, die mit anderen tools als die normale Benutzeroberfläche.

    • setTimeout ist eine Behelfslösung, die zumindest erlaubt Sie eine Meldung. Wenn dabei Anrufe zu einigen AJAX-API, und Sie müssen Sie in einer bestimmten Reihenfolge synchrone Aufrufe sind die einfach Weg. Mit komplexen Rückrufe ist auch eine option, aber es kann chaotisch.
    InformationsquelleAutor Sergiu Dumitriu
  2. 4

    Problem ist wahrscheinlich das "synchronisiert" Teil in deinem Eröffnungsbeitrag.

    Öffnen Sie die Verbindung asynchron. Das hält den browser zu sperren, und es wird so funktionieren wie Sie es erwarten. (set async = true auf Ihre XmlHttpRequest - /activex-Objekt)

    InformationsquelleAutor SchizoDuckie
  3. 1

    versuchen, zeigt das lade Bild am Anfang des ajax-jquery-Aufruf und verstecken Sie auf Erfolg-Ereignis

    oder

    können Sie verwenden Auszeit auch

    InformationsquelleAutor rahul
  4. 1

    Ich auch vor ähnlichen problem bei der Arbeit mit ajax, wie ich einige styles und UI während ajax-Aufruf, aber diese werden nicht angewendet UI und gleich als Sie sagte, dass, wenn wir setzen einige alert-es wird funktionieren, wie erwartet, bis OK nicht angeklickt für die alert -

    Ich nicht erraten können, warum es passiert, aber Sie können die JQuery verwenden, um ein-oder Ausblenden, dass das Laden.... div
    Hoffe, es wird funktionieren....

    InformationsquelleAutor Kamal Pundir
  5. 1

    Ich hatte ein ähnliches problem und dann habe ich es aussortiert, mit dem Update-Panel in ASP.NET. Wenn Sie mit PHP oder eine andere Technologie haben, dann müssen Sie die Verwendung ajax-call. Wenn Sie nicht synchronisiert rufen Sie dann das lade Bild wird nicht angezeigt.

    • Ich bin mit synchronen aufrufen und notwendig. Wie über die web-worker. Gibt es eine Möglichkeit, dies zu lösen, mit web-worker.
    • Sie können alles verwenden, was du möchtest, aber wenn die Seite erneut geladen wird, während der Verarbeitung der Anfrage dann die .gif-Bild wird nicht angezeigt, im IE und chrome. Aber stattdessen kann man zeigen, be-text sollte es funktionieren.
    • Ganze Seite nicht neu laden, in meinem Fall. Ich bin nur dann ändern, div Inhalt, aber auch die Belastung, Bild wird nicht angezeigt während der synchronen Ajax-call.
    InformationsquelleAutor Anshuman Jasrotia
  6. 1

    Ich habe ähnliche situation zu bewältigen, wenn Sie haben, um den synchronen Aufruf, den browser setzen die DOM-manipulation. Also wenn es absolut notwendig ist, halten mit der asynchronen Aufrufe.

    Gibt es einen workaround für die Manipulation des DOM und zeigen ein element, bevor der ajax-Aufruf. Unter Verwendung der jQuery-animate(), und stellen Sie den ajax-Aufruf in der callback-für die animation komplett. Folgender code funktioniert bei mir:

    //show the loading animation div
$('#loading').show();

//call dummy animate on element, call ajax on finish handler
$('#loading').animate({
    opacity: 1
  }, 500, function() {
        //call ajax here
        var dataString = getDataString() + p + '&al=1';
        $.ajax(
        {
            type: 'GET',
            async: false,
            url: 'uldateList.php',
            data: dataString,
            dataType: 'json',
            success: function(result){
                //Do something with result
                ...
                //hide loading animation
                $('#loading').hide();
            }
        });
  });
    • Ich habe es versucht, es hilft aber nicht in meinem Fall.Da, meine web-Anwendung ist rein basierend auf JQuery, wenn ich animate-Funktion, dann überspringt ajax-Aufruf, bis animieren abgeschlossen ist, aber nicht stoppen JavaScript die Ausführung des Threads, das problem in anderer Funktion.
    • Wenn Sie möchten, dass die dom-manipulation zu geschehen synchron, können Sie eine option .animate-Aufruf und legen Warteschlange auf false. Dies zwingt die animation zu beginnen, in dem Sie das Bild anzuzeigen, und füllen können, dann stellen Sie ajax-call. Sie können wählen Sie die animation mal kleiner als 1. mehr details über die .animieren Dokumentation: api.jquery.com/animate Aber, ich ernsthaft empfehlen die überprüfung der Entwurf der Anwendung und machen es asynchron für saubereren code.
    • Ich werde es versuchen und dann lassen Sie wissen.
    InformationsquelleAutor Rohit
  7. 1

    Können Sie versuchen, führen Sie die ajax-synchron-Aufruf in den image-load-callback.

    Etwas wie:

    var img = new Image();
img.src = "loading.gif";
img.onload = function() {
    /* ajax synch call */
}

    Dann fügen img DOM.

    • Da, meine web-Anwendung ist rein basierend auf JQuery, wenn ich die Funktion onload, dann überspringt ajax-Aufruf, bis das Bild geladen, aber nicht stoppen JavaScript die Ausführung des Threads, das problem in anderer Funktion.
    • Mussten Sie versuchen, zu verwenden 'beforeSend' callback zu zeigen, laden Bild?
    • Dies ist ein Beispiel: jsfiddle.net/ungarida/WvcDQ
    • Ja, ich habe es schon versucht, aber es funktioniert nicht bei mir .gif-Bild.
    • Hast du haben vorinstallierte das gif-Bild?
    • ja, Bild ist vorhanden in cache.

    InformationsquelleAutor Davide Ungari
  8. 0

    Hallo zu ändern versuchen ajax-Aufruf wie dieser seine Werke für mich

        xmlHttp.open('POST', url, true);
xmlHttp.onreadystatechange = myHandlerFunction;
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.setRequestHeader("Accept-Charset", "charset=UTF-8");
xmlHttp.send(query);
    • Ich bin mit jquery $.ajax () - Funktion.
    • sehen Sie, wie Sie hinzufügen können ("Accept-Charset", "charset=UTF-8") und ("Accept-Charset", "charset=UTF-8) zu Ihrem Aufruf nur diese Aussagen differencxe für mich
    • Ich habe es versucht.aber es hat nicht geholfen.
    • ok.........................
    InformationsquelleAutor Kamal Pundir
  9. 0

    Ich verwendet, Sergiu Dumitriu als Basis. Ich async auf true und Hinzugefügt 

      beforeSend: function() {
    $('#Waiting').jqmShow();
  },
  complete: function() {
    $('#Waiting').jqmHide();
  }

    Und es funktionierte für mich. Im Grunde habe ich meinen eigenen async:false " - Attribut.

    InformationsquelleAutor Caner Akdeniz
  10. 0

    In $.ajax-Aufruf müssen Sie hinzufügen, async: true. Folgender code funktioniert bei mir:

    $.ajax({
    url: 'ajax_url',
    data: 'sending_data',
    type: 'POST',
    cache : false,
    async: true,
    beforeSend: function() {
        $('#id_of_element_where_loading_needed').html('html_of_loading_gif');
    },
    success: function(data) {
        $('#id_of_element_where_result_will_be_shown').html(data.body);           
    }
});
    InformationsquelleAutor Oleg Sapishchuk
Schreibe einen Kommentar