显示“正在加载”消息的方法答案

【问题标题】：Method for displaying "loading" message显示“正在加载”消息的方法
【发布时间】：2008-11-29 16:36:44
【问题描述】：

我正在使用 jquery 和 getJSON 方法，我想知道是否有一种方法可以在加载我的内容之前显示一条消息说加载。我知道对于 jquery ajax 调用，在提交回调之前你可以有一些东西，但 getJSON 只有三个选项。

有什么想法吗？

【问题讨论】：

【解决方案1】：

将此添加到您的页面的某个位置：

<div id="loading" style="display:none">
    <img src="/images/ajax-loader.gif" alt="Loader" />&nbsp;Loading...
</div>
<script type="text/javascript">
    $().ready(function() {
        $("#loading").bind("ajaxSend", function() {
            $(this).show();
        }).bind("ajaxComplete", function() {
            $(this).hide();
        });
    });
</script>

您可以随意设置 loader-div 的样式，例如 Google Mail 式加载器：

#loading
 {
   position:fixed; 
   _position:absolute;
   top: 0;
   left:47%; 
   padding:2px 5px;
   z-index: 5000;
   background-color:#CF4342;
   color:#fff;
 }

【讨论】：

这样的东西可以与 jquery 的 getJSON 一起使用吗？也许将它包装在一个函数中并调用它，但我只是不确定它如何与 getJSON 一起使用？

【解决方案2】：

您可以触发自定义.ajax“之前”和“成功”事件。

然而，通常情况下，你会做类似的事情


  showLoadingAnimation(); 
  $.getJSON(  ..... function(){
      dontShowLoadingAnimation(); 
  });

或类似的东西。

但是，您的问题有些模糊，很难确定您想要做什么，而您已经无法简单地使用 javascript。

【讨论】：

【解决方案3】：

您可以在 jQuery 对象上使用ajaxSend 和ajaxStop 来附加适当的事件处理程序，如this tutorial 中一样。无论请求类型如何（所有 jQuery AJAX 和 JSON 方法），这都会显示进度指示器，并且如果发生错误，也会隐藏加载图形。

【讨论】：

这些可以与 getJSON 一起使用吗？该教程有帮助...感谢您的链接。
我还没有测试过，但是因为它们的核心 jQuery.ajax 和 jQuery.getJSON 只是用它应该的默认值调用 jQuery.get。

【解决方案4】：

肯特，

这样也行，只需显示一个简单的 div 元素和显示文本 Loading... 然后显示我的 JSON 结果。

瑞恩

【讨论】：