4

これは何度も尋ねられてきました。しかし、IEとChromeではどのソリューションも機能していません。

基本的に、ajax呼び出しが行われている間に読み込み中の画像を表示したいと思います。

以下は私が試していることです。

function ws(){
    showL();
    var res=$.ajax({url:'webservice.asp?service=LoadingTestSRV',async:false,cache:false}).responseText;
    $('#dv').html(res);
    hideL();
    $('#complete').html('Done');
}
function showL()
{
    $('#loading').show();
}
function hideL()
{
    $('#loading').hide();
}

以下はHTMLです

<table cellspacing="1" cellpadding="1" border="1">
  <tr><td>
        <input type="button" value="ckick" id="btn" onClick="ws();">
        <input type="button" value="clear" onClick="$('#dv,#complete').html('');">
    </td><td>
        <div id="dv"></div>
    </td></tr><tr>
    <td>Here<div id="loading" style="display:none" >Loading.................</div></td>
    <td>final<div id="complete"></div></td></tr>
</table>

上記のjsの後、私は試しました

  • ajaxStartおよびajaxStop
  • $ .ajaxSetup
  • $ .ajax（{...}）。done（hideL）

私が試したすべてのjsコードはFirefoxで機能していますが、IEとChromeでは機能していません。 Firefoxでは、コードは期待どおりに機能します。divの読み込みが表示され、ajaxが呼び出され、divの読み込みが非表示になります。これはまさに私が期待していることです。IEとChromeでは、読み込み中のdivが表示されません。たぶん、ajax呼び出しの後または前に、非常に速く表示および非表示になります。

IEとChromeでコードを機能させるために何ができるか教えてください。

他のサイトがdivの読み込みを示しているのを見たので、いくつかの回避策が必要です。または多分私は愚かなことをしている。

コードがすべてのブラウザで機能するようになったら。ajaxが呼び出されているときに読み込み中のdivを表示するジェネリック関数（jQueryプラグインなど）を作成したいと思います。

4

6 に答える 6

4

これを試してください：これにより、ajax呼び出しが完了した後にurDIVが非表示になります

    function ws() {
        showL();
         var res ="";
        $.ajax({
            url: 'webservice.asp?service=LoadingTestSRV',
            async: true,
            cache: false,
            success: function(data) {
                res=data;
                $('#dv').html(res);
                hideL();
                $('#complete').html('Done');

            }
        });

    }

    function showL() {
        $('#loading').show();
    }

    function hideL() {
        $('#loading').hide();
    }​
于 2012-12-07T14:50:23.483 に答える
3

このフォームは以前私のために働いていました:(私はそれが速いかどうか見ることができるように遅いものを入れました）

$('#loading').ajaxStart(function() {
    $(this).show("slow");
}).ajaxComplete(function() {
    $(this).hide("slow");
});

ここでこれのテスト例：

http://jsfiddle.net/MarkSchultheiss/xgFkw/

于 2012-12-07T15:07:55.633 に答える
1

私はそれが助けになるならこのようにしてみてください。

    $.ajax({
        beforeSend: function () {
            $('#loadingDiv').show();
            $('#accordion').hide()
        },
        complete: function () {
            $('#loadingDiv').hide();
            $('#accordion').show();
        },
        type: "GET",
        url: 
        data: shallowEncodedData,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (
于 2012-12-07T15:04:27.847 に答える
1

ajax呼び出しに問題があります。ajax呼び出しから削除するasync:falseと、IE8/9およびChromeでも機能します。他の失われた魂については、上記の変更を行ってから再試行してください。

于 2013-06-19T12:46:29.193 に答える
1

単純なajax関数にasync=trueを追加するだけです。それはクロムで動作します

于 2016-03-03T09:14:52.213 に答える
0

Chromeでのこの問題の回避策として、AJAX呼び出しで1ミリ秒のタイムアウトを使用します。

例えば

$("#mySpinningLoader").show();

var t = setTimeout(function () {
    $.ajax({
        url: rootPath + controllerNAction,
        async: false,
        type: "POST",
        data: JSON.stringify(lightweightObject),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data, textStatus, jqXHR) {
            $("#mySpinningLoader").hide();
        }
    });
}, 1);
于 2013-07-10T10:08:48.013 に答える