在 grails 中显示加载时间的 ajax 调用中的 spinner.gif答案

【问题标题】：Showing spinner.gif in ajax call on loading time in grails在 grails 中显示加载时间的 ajax 调用中的 spinner.gif
【发布时间】：2009-04-13 07:25:17
【问题描述】：

我正在使用大量 ajax 的 grails 中开发一个 Web 应用程序。我需要在处理 ajax 请求时显示一个 spinner.gif 图像。我的示例 gsp 代码是

<div id="ajax-area">
  <g:remoteLink action="list" controller="file" update="ajax-area">
    view files
  </g:remoteLink>
</div>

在上面的代码中，如果我们点击查看文件链接，它将更新 ajax-area div。

有人可以告诉我如何在加载 ajax 时使用 spinner.gif 更新 ajax 区域。

谢谢

【问题讨论】：

标签： ajax grails

【解决方案1】：

对于 jQuery 也是如此（这实际上是捆绑在 Grails jQuery 插件中）：

$(document).ready(function() {
    $("#spinner").bind("ajaxSend", function() {
        $(this).fadeIn();
    }).bind("ajaxComplete", function() {
        $(this).fadeOut();
    })}
);

【讨论】：

【解决方案2】：

假设您使用 Prototype，您可以在页面（或布局）中添加类似这样的内容以显示微调器：

<script type="text/javascript">
Ajax.Responders.register({
   onCreate: function() {
      if($('ajax-area'))
         $('ajax-area').update('<img src="${createLinkTo(dir:'images',file:'spinner.gif')}" border="0" alt="Loading..." title="Loading..." width="16" height="16" />');
   }
});
</script>

在发起 Ajax 调用时，它会覆盖 'ajax-area' 元素的内容。

【讨论】：

【解决方案3】：

关于该主题的有趣链接：http://blog.oio.de/2010/11/08/how-to-create-a-loading-animation-spinner-using-jquery/

【讨论】：