尝试在ajax中成功预加载图像

Question

在等待标记中的文本更改时，我正在尝试预加载图像。

我有一个ajax，如果用户点击一个文本，他们可以改变文本，然后当用户提交它，它将在mysql中更新从ajax。

我的问题是，当用户完成文本更改后，文本需要一段时间才能最终更改。NOt确定这是否是因为我的文件中有很多" if (isset)“，或者是我的算法...不管它是什么，我正在尝试有一个预加载器镜像来修复这个问题。

            $.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);

            }
            });

图像没有显示出来，而且它在正确的路径和一切中。

总结我的问题：

用户单击text ->用户更改text ->提交text -> text保持不变一段时间然后弹出新文本。

总结一下我想要做的事情：

用户单击文本->用户更改文本->提交文本->原始文本显示，然后预加载器图像显示->预加载器图像消失->新文本

耽误您时间，实在对不起!

Answer 1

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

}

我能看到的问题。

1. 你不应该让load on a textarea
2. 同时显示图像和新文本。

我的建议..

当用户提交文本时，显示/附加图像加载器。

也许可以在<form>的submit (或者按钮的click )上这样做。然后执行ajax。一旦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

});

这真的是一个简单的例子，你仍然可以做更多的事情...