Question

在我的网络应用程序中，我有很多（有时在100多个）单元格，我有一个隐藏的跨度嵌入如下：

<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

结帐 Documentation

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循环和所有事件监听器（更多开销）。

为什么不只是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。试试吧，看看你是否看到任何速度增加。

qTip2缓慢显示和隐藏

3 个答案: