Question

我的网站上有以下代码：

<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>

Answer 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仅作为示例。你可以使用任何元素来添加它。

Answer 2

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

gif.show（）; $（“＃...”）。load（“...”，function（）{gif.hide（）;}）;

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

$（“＃...”）。loadWithProgress（{url：“...”，之前：function（）{/ *显示gif * /}，之后：function（）{/ * hide gif * /}}）;

如何为此jQuery添加动画加载GIF？

2 个答案:

注意