2013-03-31 31 views
0

我已經實現了懸停卡。它完美地顯示了90%的時間。但有時它會顯示空的懸浮卡,我認爲它無法加載。順便說一句,我有一個Web服務,如果你懸停一個標籤,它會顯示懸停卡。jquery hovercard加載較晚,因此顯示一個空的懸停卡

我怎樣才能確保它的負荷,然後顯示在名片或我怎樣才能把「加載」,直到它加載和顯示數據

這裏是我的代碼

$('.hovercard_tag').hover(function() { 
      var span_text = $(this).text(); 
      var result = ''; 
      pos = $(this).offset(); 
      $.ajax({ 
       url: 'http://xxx/HoverCard_WebService.aspx?q=' + encodeURIComponent(span_text), 
       type: 'GET', 
       dataType: 'json', 

       beforeSend: function() { 
        $(".hovercard").prepend('<p class="loading-text">Yükleniyor...</p>'); 
       }, 
       success: function (data) { 
        $(".hovercard").empty(); 
        $.each(data, function (index, value) { 
         result += '<div style=\'border-bottom:1px solid #31B1CE;\'><b>' + span_text + '</b><div style=\'display: block;margin: 4px;font-size:4px;line-height: 4px;\'></div></div>'; 
         result += '<div style=\'display: block;margin: 4px;font-size:4px;line-height: 4px;\'></div>'; 
         result += value.description; 
         result += '<br /><br />'; 

         var image_source = 'images/hover_card_plus_icon.png'; 
         if (value.followed != '0') 
          image_source = 'images/ok_icon.png'; 

         result += '<div style=\'float:left;\'><img id=\'img_category_follow\' value=\'' + value.id + '\' src=\'' + image_source + '\' class=\'cat_takibe_al\' style=\'cursor:pointer;\' /></div><div style=\'float:right;padding-top:-10px\'>' + value.count + ' kişi takip ediyor</div><div style=\'clear:both\'></div>'; 

        }); 
       }, 
       complete: function() { 
        //$('.loading-text').remove(); 
       } 
      }); 

回答

0
$('#selector').ajaxStart(function(){ 
    // Show your image here when ajax request begins 
}); 


$('#selector').ajaxComplete(function(){ 
    //Show what you actually want to show after your ajax request is completed. 
});