qTip2顯示和隱藏慢慢

Question

在我的web應用程序，我有很多（在100S有時），我有一個隱藏的範圍嵌入在像下面的單元格：

<td class='providerInfo' tabindex=0> 
    FIRE DEPARTMENT 
    <span class='HIDDEN'> 
     Address: New York, NY<br /> 
     Phone: 123-456-7890<br /> 
     Type: Facility 
    </span> 
</td> 

在頁面加載，我一個qTip關聯與隱藏的範圍集中在具有信息單元格時顯示它：

function loadProviderInfo() { 

    $(document).ready(function() { 
     $('.providerInfo').each(function() { 
      $(this).qtip({ 
       content: { 
        text: function(api) { return $(this).children(".HIDDEN").html(); } 
       }, 
       style: { 
        classes: 'ui-tooltip-blue', 
        def: 'false' 
       }, 
       position: { 
        my: 'bottom left', // Position my bottom left... 
        at: 'top right', // at the top right of... 
        target: $(this) // my target 
       } 
      }); 

      $(this).focusin(function() { $(this).qtip('toggle', true); }); 
      $(this).focusout(function() { $(this).qtip('toggle', false); });   
     }); 
    }); 
} 

的qTip看起來不錯，但它的顯示和隱藏很慢。

關於如何加快顯示和隱藏qTip的任何想法？即使qTip沒有任何延遲，我也可以。

只需要在IE 8

編輯1
細胞越少，越快qTips顯示工作。

Answer 1

我猜它比qTip插件更關注事件監聽器（儘管我可能是錯的）。

我的第一個想法是嘗試以不同的方式綁定事件。爲什麼不試試jQuery的新的綁定監聽器的.on()方式？就拿監聽你的$.each循環，之後添加它，像這樣：

$('table').on('focusin focusout', '.providerInfo', function(e){ 
    if(e.type == 'focusin'){ 
     $(this).qtip('toggle', true); 
    }else{ 
     $(this).qtip('toggle', false); 
    } 
}); 

顯然，如果你有一個以上的表，使用該表的相應的類或ID的問題。

如果你有很多表格單元格（就像它聽起來你做的那樣，因爲它越慢你就越慢），這可以真正減輕負載，綁定一個事件，而不是那麼多。

編輯這隻適用於jQuery 1.7+，所以如果你使用的是早期版本，我會建議以類似的方式使用.delegate()。

Answer 2

問題很可能與您的.each循環和所有的事件偵聽器（更多開銷）。

爲什麼不只是qTip每個.providerInfo元素，並使用qTips內置鼠標事件和mouseleave事件？

function loadProviderInfo() { 

    $(document).ready(function() { 

     $('.providerInfo').qtip({ 
       content: { 
        text: function(api) { return $(this).children(".HIDDEN").html(); } 
       }, 
       style: { 
        classes: 'ui-tooltip-blue', 
        def: 'false' 
       }, 
       position: { 
        my: 'bottom left', // Position my bottom left... 
        at: 'top right', // at the top right of... 
        target: $(this) // my target 
       }, 
       show: { 
        event: 'mouseenter', 
        target: $(this) 
       }, 
       hide: { 
        event: 'mouseleave', 
        target: $(this) 
       } 
      }); 


    }); 
} 

我沒有測試此代碼 - 我要爲你做的jsfiddle，但我不能讓qTip正確包括。試試看，看看你是否看到任何速度增加。

Answer 3

退房 Documentation

hide: { delay: 1000 } 

1000毫秒（1秒）