2

在我的网络应用程序中，我有许多（有时是 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 显示越快。

4

3 回答 3

2

查看 文档

hide: { delay: 1000 }

1000 毫秒（1 秒）

于 2012-05-16T05:49:08.213 回答
1

The problem is most likely with your .each loop, and all of the event listeners (more overhead).

Why not just qTip every .providerInfo element, and use qTips build in events for mouseover and 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)
                }
            });


    });
}

I didn't test this code - I was going to do a JSFiddle for you but I couldn't get qTip to include correctly. Just try it out and see if you see any speed increase.

于 2012-05-09T20:16:52.877 回答
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()以类似的方式使用。

于 2012-05-09T20:04:50.160 回答