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は、完全なイベントハンドラーである2番目の引数を受け入れます。私が行うことは、呼び出す前にgifを表示し、関数を使用して非表示にすることです。

gif.show（）; $（ "＃..."）。load（ "..."、function（）{gif.hide（）;}）;

1回の呼び出しでラップするため、次のようになります。

$（ "＃..."）。loadWithProgress（{url： "..."、before：function（）{/ * show the gif * /}、after：function（）{/ * hidden gif * /}} ）;

于 2012-08-14T07:54:44.210 に答える