显示"加载"消息的方法

Question

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

有任何想法吗？

Answer 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-like loader:

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

Answer 2

.ajax您可以触发自定义的"之前"和"成功"事件.

然而,通常情况下,你会做一些类似的事情

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

或类似的东西.

然而,你的问题有点像vauge,很难确定你想要做什么,你不能简单地用javascript做.

Answer 3

您可以在jQuery对象上使用ajaxSend和ajaxStop来附加相应的事件处理程序,如本教程中所示.无论请求类型(所有jQuery AJAX和JSON方法)如何,这都将显示进度指示器,并在发生错误时隐藏加载图形.