Question

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

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

我的问题是，当用户完成文本更改时，文本最终需要一段时间才能更改。不知道如果它的原因我在我的文件中有很多“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);

            }
            });

图像没有显示出来，它处于正确的路径和一切。

总结我的问题：

用户点击文字 - ＆gt;用户更改文字 - ＆gt;提交文字 - ＆gt;文字保持不变 - ＆gt;然后弹出新文字。

总结我正在尝试做的事情：

用户点击文字 - ＆gt;用户更改文字 - ＆gt;提交文字 - ＆gt;原始文本上升然后预加载器图像显示 - ＆gt;预载器图像消失 - ＆gt;新文本

谢谢你的时间！

Answer 1

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

}

我能看到的问题......

你不应该在textarea上有load图片
你同时显示图像和新文本。

我的建议..

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

可以在<form>的提交（或按钮的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

});

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

试图在ajax成功预加载图像

1 个答案: