qTip2 显示和隐藏缓慢

Question

在我的 Web 应用程序中，我有许多（有时在 100 年代）单元格，我在其中嵌入了一个隐藏的跨度，如下所示：

<td class='providerInfo' tabindex=0>
    FIRE DEPARTMENT
    <span class='HIDDEN'>
        Address: New York, NY<br />
        Phone: [phone]<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

结帐文档

hide: { delay: 1000 } 

1000 毫秒（1 秒）

Answer 2

我猜它与事件侦听器的关系比 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 3

问题很可能出在 .each 循环和所有事件侦听器（开销更大）上。

为什么不只对每个 .providerInfo 元素进行 qTip 处理，并使用 qTips 内置事件进行鼠标悬停和鼠标离开？

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 正确包含。只需尝试一下，看看您是否看到任何速度提升。