ajaxで画像をプリロードしようとしています

Question

タグのテキストの変更を待っている間に画像をプリロードしようとしています。

私はajaxを持っています。ユーザーがテキストをクリックすると、テキストを変更できるようになり、ユーザーがそれを送信すると、ajaxからmysqlで更新されます。

私の問題は、ユーザーがテキストの変更を完了すると、最終的にテキストが変更されるまでに時間がかかります。私のファイルのどこに更新されるか、またはアルゴリズムが...何であれ、私はプリローダーイメージを修正しようとしています。

  $.ajax({ 
      type: "POST", 
      url: "ajax_table_edit.php", 
      data: Data, 
      cache: false, 
      success: function(data) 
      { 
       $('textarea#item_'+id).load('<img src="img/ajax-loader.gif"/>'); 
       $('span#selector_'+id).html(selector); 

      } 
      }); 

イメージは表示されず、正しいパスとすべてにあります。

は私の問題を要約すると：

ユーザーは、テキストをクリックする - >ユーザーがテキストを変更 - >テキストを提出 - >テキストはビットのために同じまま - >その後、新しいテキストがポップアップ表示されます。

私が何をしようとしている要約すると：

ユーザーは、テキストをクリック - > [ユーザーの変更テキストを - >テキストを提出 - >オリジナルテキストは、プリローダーの画像が現れアップしてから行く - >プリローダーのイメージが消えます - >新しいテキスト

ありがとうございました！私が見ることができる

Answer 1

success: function(data) 
{ 
    $('textarea#item_'+id).load('<img src="img/ajax-loader.gif"/>'); 
    $('span#selector_'+id).html(selector); 

} 

問題...

1. あなたがイメージと同時に、新しいテキストを示すテキストエリア
2. you'rにloadイメージを持つべきではありません。

私の提案、ユーザーがテキストを送信するとき。..

、ショー/画像ローダーを追加します。

多分<form>の投稿（またはボタンのclick）で行うことができます。次にあなたのアヤックスをやってください。 Ajaxが終了したら、イメージを非表示にしてテキストを表示します。

$('form').submit(function(){ 

    // use .after() or whatsoever, just show the image on this line. 
    // while the form is about to execute the ajax codes below. 
    var image = $('.preloader'); 
    if (image.length > 0) { // if preloader image exist... just show it.. 
     image.show(); 
    } else { // if it doesn't exist, create it. 
     image = $('<img class="preloader" src="img/ajax-loader.gif"/>'); 
     $('textarea#item_'+id).after(image); 
    } 

    $.ajax({ 
     type: "POST", 
     url: "ajax_table_edit.php", 
     data: Data, 
     cache: false, 
     success: function(data) 
     { 
      image.hide(); // hide the image. 
      $('textarea').text(data); // show the data... 

      // by the way, I don't understand this next line 
      //$('span#selector_'+id).html(selector); 

     } 
    }); 
    return false; //prevent form from jumping to another page 

}); 

これは本当に簡単な例です、あなたはまだ多くを行うことができます...