Question

我正在使用grails开发一个使用大量ajax的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-area。

由于

Answer 1

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

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

Answer 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'元素的内容。

Answer 3

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

在ajax中调用spinner.gif调用grails中的加载时间

3 个答案: