Loader funktioniert nicht während der synchronen ajax-Aufruf in chrome

Loader funktioniert nicht während eines synchron(Async:false) ajax-Aufruf in google chrome. Funktioniert Prima in Firefox & IE. Während meiner Debuggen, testen, Loader zeigt, bis ajax-request starten. immer abgeschlagen oder verschwindet, wenn die Anfrage an den server, wo ich gehalten, einen debug-Punkt. Ich habe versucht, andere Lösungen wie die Nutzung von ajaxStart, beforeSend & ajax loader ect., Aber keine Verwendung. Bitte geben Sie gültige Lösung

 <div id="LoaderDiv" style="display: none">
    <img id="ImageLoader" src="Images/loading.gif" />
 </div>
            $('#LoaderDiv').show();
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: servicePath,
                async: false,
                success: function (data) {
                    console.log(data.d);
                    $('#LoaderDiv').hide();
                }
            });
Vielleicht setzen die ajax-Aufruf innerhalb einer anderen Funktion und Nutzung setTimeout aufrufen, es nach 100 mss oder etwas kleines?
Es bedeutet, dass die animation von GIF-zwischen geklebt. richtig?
Siehe stackoverflow.com/questions/26906278/...
artm: Versucht aber keine Verwendung;
Gupta: ja, aber das wird nur geschehen, wenn die developer-tools geöffnet, wenn nicht, loader gar nicht sichtbar.

InformationsquelleAutor John Wink | 2014-11-13

  1. 3

    War ich auch vor demselben problem aus dem letzten 1 Jahr Auch mit async: false. Endlich die beste Lösung, aber nicht sicher, dass es funktionieren wird, in Ihr case, es arbeitete mir 101%.

    Unten ist der code:-

        $.ajax({ 
                .. , 
             beforeSend: function () { showLoader(); },

             success: function (data) { hideLoader(); } 
    });


function showLoader() {
    $("#progressbar").css("display", "");
}

function hideLoader() {
    setTimeout(function () {
        $("#progressbar").css("display", "none");
    }, 1000);
}

    können Sie diese Funktion zwei gemeinsame in allen gängigen javascript-Datei. So, dass Sie rufen diese Funktion mehrere Orte oder js-Dateien.

    Html ist :

    <div class="spinnermodal" id="progressbar" style="display: none; z-index: 10001">
  <div style="position: fixed; z-index: 10001; top: 50%; left: 50%; height:65px">
      <img src="~/Images/loading.gif" alt="Loading..." />
    </div>
</div>

    Css ist:

    .spinnermodal {
        background-color: #FFFFFF;
        height: 100%;
        left: 0;
        opacity: 0.5;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 100000;
    }

    Versuchen. Ich hoffe, es wird für Sie arbeiten. Viel Spaß beim Programmieren 🙂

    dein code nicht funktioniert.
    stellen Sie sicher, dass der gesamte code ordnungsgemäß verwaltet. @RonakRathod
    hinzufügen Sie können eine funktionierende Geige für die demo?

    InformationsquelleAutor Sunny_Sid

  2. 2

    Setzen setTimeout, bevor der ajax-request. Ich habe versucht, viele Lösungen, aber diese funktioniert auf jeden Fall.

    $("#loader").show();
setTimeout(function () {
  //AJAX REQUEST CODE
  $("#loader").hide();
},10);

    InformationsquelleAutor chirag

  3. 0

    Versuchte ich es in google-chrome es funktioniert. Können Sie überprüfen, wenn Sie irgendwelche anderen Fehler oder versuchen, nach mehr code, wenn Sie verlassen ein bisschen code auf Ihre Frage.

    überprüfen Sie Ihren code auf jsfiddle, es funktioniert.

    Ich nur Hinzugefügt, das zu Ihrem code: 

    error: function(data){
                       $('#LoaderDiv').hide(); 
               }

    Aber merke ich, hat die Fehler handle-Funktion weil, es das Bild ( Ihr gif ) zeigen, für immer, wenn Fehler passiert. ( Wenn Sie waren immer alle Fehler Antwort vom server, dann wird eine Lösung)

    InformationsquelleAutor dsharew

  4. 0

    Oder einfach 

    $.ajax({ 
                    .. , 
                 beforeSend: function () { $('#LoaderDiv').show(); },

                 success: function (data) { $('#LoaderDiv').hide(); } 
        });

    wird es etwas mehr schnelle

    InformationsquelleAutor Binoy Kumar

  5. 0
    Don't use async: false, Solution is this:-

var requestStatus = 1;
$('#LoaderDiv').show();
if( requestStatus != 0) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: servicePath,
                beforeSend: function() {
                   requestStatus = 0;
                },
                success: function (data) {
                    console.log(data.d);
                    $('#LoaderDiv').hide();
                    requestStatus = 1;
                }
            });
}

    InformationsquelleAutor Naveen dev

Schreibe einen Kommentar