jQueryの処理順序について

質問

function ajaxAddHtml(target_id)
{
$('#' + target_id).html('loading.gif');
if(php_func == "") {
return false;
}
// ↓↓↓Ajaxの処理
}

ｊQuery + Ajaxで画面の書き換えをする処理を実装しました。
上記のように、処理の冒頭にまずクリックされたボタンをloading画像に置換する処理を入れているのですが、
PCでは想定通り動きますが、iphoneとAndroidで想定通り動きせん。
loading画像に書き換わる前にAjaxでの処理が完了してしまいます。
関数の中のhtml置換処理を、確実に上の行から順番通りに実行させる方法はありますか？

回答No.3

tracer · ベストアンサー

今ではasync:falseは非推奨ですよ。
やりたいことは分かりますが、素直に非同期にして、completeやsuccessの中にajax完了後の処理を書くのが分かりやすいと思います。もし、それができない状況だとしたら、それをできない状況自体を改善すべきです。
あと、最新のjQueryではajaxの使い方も変わってきてる(使いやすくなってる)ので、古いソースではなく、新しいjQueryの情報を確認されたほうがよいと思いますよ。

補足

tracerさん、fujillinさんからご指摘いただいた通り、まず非同期通信を前提とし、
ajaxStart、ajaxCompleteのコールバック関数で制御することでうまくいきました。
最終的にはローディング画像はdiplay:noneで定義しておき、
コールバック関数でdiplayを切り替えるというシンプルな方法で実装しました。
こんな感じです。
------------------------------
$("#" + target_id).ajaxStart(function(){
$("#ajaxLoadingImage").css('display','block');
});
$("#" + target_id).ajaxComplete(function(){
$("#ajaxLoadingImage").css('display','none');
});
------------------------------
とても助かりました。
ありがとうございました！

回答No.2

fujillin

よくわかっていませんが…　（よこから失礼）

＞同期通信をしています
DOMは変更されていても、ブラウザが画像データを取得したり画面に反映したりできないだけでは？
非同期通信にしてみたらどうなるでしょうか？

回答No.1

think49

.html('loading.gif'); のコードでは "loading.gif" という文字列が挿入されるだけで画像ファイルとはなりません。
http://jsfiddle.net/NgZAZ/
http://api.jquery.com/html/#html2

もし、画像になるのならそれは別の処理が働いているからです。
そのコードを特定してください。
最も、初めから .html() でimg要素を挿入すればいい話だとは思いますが…。

> loading画像に書き換わる前にAjaxでの処理が完了してしまいます。
Ajax処理との関係性が書かれていないのでなんともいえませんが、Ajaxは非同期処理であることに気をつけてください。

補足

すいません、抜粋するつもりが壮大にサンプルソースを書き間違えていました。
サンプルソースを訂正します。

function ajaxAddHtmlBeforeId(php_func, target_id)
{
$('#' + target_id).html(_getLoadingImageHtml());

//↓Ajaxの処理
// ・・・

//↓ローディング画像を戻す処理
// ・・・

}
function _getLoadingImageHtml()
{
return '<img src="/images/loading.gif" />';
}

要点を整理しますと、

・スマホでは冒頭のローディング画像の表示処理がされないまま処理が完了してしまう。
⇒その他のAjaxなどその他の処理は問題ない。

・async:falseで同期通信をしています。

・PCではすべて想定通り動いています。

です。
引き続きご回答お待ちしています。