0

我的网站上有以下代码：

<script type="text/javascript">
  $(document).ready(function(){
      $('.notif-email > a').click(function(e) {
            $("#email-notif").load("notif-email.php");
      });
      $('.notif-message > a').click(function(e) {
            $("#message-notif").load("notif-message.php");
      });
      $('.notif-prospect > a').click(function(e) {
            $("#prospect-notif").load("notif-prospect.php");
      });
  });
</script>

我想用 GIF 动画文件添加一些加载效果，比方说... loading.gif 我想在用户“点击”某些东西但仍在等待 load() 文件在服务器上执行后向用户展示。

怎么做？

更新 ：

这里有更多与该 jQuery 脚本相关的代码：

<li class="notif-email"><a href="#" title="17 new emails">View New Emails</a>
<div class="popup-notif">
<div class="notif-top">
<div class="notif-title">Notifications</div>
</div><!-- .notif-top -->
<div class="notif-body">
<div id="email-notif" class="notif-child-wrap">
</div><!-- .notif-child-wrap -->
</div><!-- .notif-body -->
</div><!-- .popup-notif -->
</li>

<li class="notif-message"><a href="#" title="5 new messages">View New Messages</a>
<div class="popup-notif">
<div class="notif-top">
<div class="notif-title">Messages</div>
</div><!-- .notif-top -->
<div class="notif-body">
<div id="message-notif" class="notif-child-wrap">    
</div><!-- .notif-child-wrap -->
</div><!-- .notif-body -->
</div><!-- .popup-notif -->
</li>

<li class="notif-prospect"><a href="#" title="1,999 new prospects">View New Prospects</a>
<div class="popup-notif">
<div class="notif-top">
<div class="notif-title">New Prospects</div>
</div><!-- .notif-top -->
<div class="notif-body">
<div id="prospect-notif" class="notif-child-wrap">    
</div><!-- .notif-child-wrap -->
</div><!-- .notif-body -->
</div><!-- .popup-notif -->
</li>
4

2 回答 2

1 
function togglemask(show) {
  if(show)
   $('#target').append('<img class="loadergif" src="loading.gif" width="" height="">');
  else
   $('#target').remove('img.loadergif');
}

$(document).ready(function(){
      $('.notif-email > a').click(function(e) {
            togglemask(true);
            $("#email-notif").load("notif-email.php", togglemask(false));
      });
      $('.notif-message > a').click(function(e) {
            togglemask(true);
            $("#message-notif").load("notif-message.php", togglemask(false));
      });
      $('.notif-prospect > a').click(function(e) {
            togglemask(true);
            $("#prospect-notif").load("notif-prospect.php", togglemask(false));
      });
  });

笔记

这里#target只是举例。您可以使用任何元素来添加它。

于 2012-08-14T07:51:10.313 回答
0

load 接受第二个参数，它是完整的事件处理程序，我所做的是在调用之前显示 gif 并使用函数隐藏它：

gif.show(); $("#...").load("...", function(){ gif.hide(); });

我们将它包装在一个调用中，所以它看起来像：

$("#...").loadWithProgress({url: "...", before: function(){ /* 显示 gif*/ }, after: function(){ /* 隐藏 gif*/ }} );

于 2012-08-14T07:54:44.210 回答