如何优化 qTip？

Question

我一直在对我正在开发的应用程序进行一些分析，而 qTip 确实减慢了速度！我喜欢这个插件，但在文档就绪时添加提示需要花费近 2 秒的时间（页面上大约有 300 个提示）。我知道有很多技巧，但是有没有明显或不那么明显的方法来加快速度？

我在这里使用 2.0 的每日构建：

http://github.com/craga89/qtip

我用来添加提示的主要功能是：

var thingsToTip = $('.TipMe');
for (var currentItem, i = -1; currentItem = thingsToTip[++i]; ) {
    currentItem = $(currentItem);
    currentItem.qtip({
        style: {
            widget: false,
            classes: 'ui-tooltip-light' 
        },
        content: currentItem.attr('tooltip'),
        position: {

            at: 'bottomRight',
            my: 'topleft',
            adjust: {
                screen: 'flip',
                x: 0,
                y: 0
            }
        }
    });
}

现在我知道按类别选择并不是最有效的。但我尝试将其切换为跨度。TipMe，它只在 2069 秒中节省了大约 10 毫秒，因此为了可读性，我将其撤回。 我已经将其从使用 .each 切换为传统的 for 循环。这为我节省了大约 100 毫秒。与总运行时间相比，这又是九牛一毛。

我一直在使用 dynaTrace 来追踪缓慢的部分。

整个函数需要 2069 才能运行。 第1931章 那就是qtip功能。所以我对加速循环和选择器并不太感兴趣。他们很好。我需要减少实际 qtiping 所花费的时间。

希望我清楚我要做什么。

我愿意尝试几乎任何事情，如果有更有效的工具提示插件，我愿意放弃 qTip！

Answer 1

就像另一个人说的那样，只有在它们悬停或完成任何要求后才尝试附加它们。

$(".TipMe").live("mouseover", function () {
    var $this = $(this)
    if (!$this.data("toolTipAttached")) {
        $this.qtip({
            style: {
                widget: false,
                classes: 'ui-tooltip-light'
            },
            content: $this.attr('tooltip'),
            position: {

                at: 'bottomRight',
                my: 'topleft',
                adjust: {
                    screen: 'flip',
                    x: 0,
                    y: 0
                }
            }
        });

        $this.data("toolTipAttached", true);

        // the qtip handler for the event may not be called since we just added it, so you   
        // may have to trigger it manually the first time.
        $this.trigger("mouseover.qtip");
    }
});

Answer 2

我想说你只是一次添加太多。

您可以尝试使用 window.setTimeout(); 一次加载它们，这样它们就不会挂起 UI？虽然我不确定这是否有效。

或者，仅当用户将焦点放在该字段上时才应用 qTip，而不是事先加载所有内容......这显然会杀死您的页面。

用户实际上想要显示所有 300 个提示的可能性有多大？然而你正在加载它们......

实际上，你为什么要循环？这不是做同样的事情吗？

    $('.TipMe').qtip({
        style: {
            widget: false,
            classes: 'ui-tooltip-light' 
        },
        content: this.attr('tooltip'),
        position: {

            at: 'bottomRight',
            my: 'topleft',
            adjust: {
                screen: 'flip',
                x: 0,
                y: 0
            }
        }
    });