8811


現在は下記のような実装になっており、処理中画像は処理終了と同時に一瞬出現し、消えるという状態です。  
これを、処理開始～処理終了まで表示したいのですが、方法が分かる方がいましたらご教授をお願いします。  
[参考にしたサイト](http://jquery.nj-clucker.com/applied/now_loading/)  

[code]

    function upload(form) {
    
        //処理中画像表示
        dispLoading();
    
          ～処理～
    
      $.ajax(
                {
                    url: url,
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    data: fd,
                    async: false,
    　　　　　　　　　　　
                  ～処理～
    
                })
    
        //処理中画像削除
        removeLoading();
    }
    
    // Loadingイメージ表示関数
    function dispLoading(msg) {
    
        // 画面表示メッセージ
        var dispMsg = "";
    
        // 引数が空の場合は画像のみ
        if (msg != "") {
    
            dispMsg = "<div class='loadingMsg'>" + msg + "</div>";
        }
    
        // ローディング画像が表示されていない場合のみ表示
        if ($("#loading").size() == 0) {
    
            $("body").append("<div id='loading'>" + dispMsg + "</div>");
        }
    }
    
    // Loadingイメージ削除関数
    function removeLoading() {
    
        // Loadingイメージを消す
        $("#loading").remove();
    }
    
[/code]


CC BY-SA 3.0
2015-04-06T04:59:37.167
8810
2015-04-06T05:35:28.057
7626
question
javascript css html5
ajax処理中に画像を表示させたい


原因はブラウザのイベントループの処理方法何ですけど、ソリューションが二つあると思います：

  1. 参考にされたサイトと同じように、`removeLoading()`を`complete`のファンクションに追加して、ajaxリクエストを非同期にする（`async: true`）。
  2. ajaxリクエストをタイムアウトで呼ぶ：

[code]

    dispLoading();
    
    setTimeout(function() {
        $.ajax({
            url: url,
            type: 'POST',
            processData: false,
            contentType: false,
            data: fd,
            async: false
        });
    
        removeLoading();
    }, 0);
    
[/code]


CC BY-SA 3.0
2015-04-06T05:23:22.493
8811
2015-04-06T05:35:28.057
2015-04-06T05:35:28.057
3371
3371
8810
answer