如何优化 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
            }
        }
    });
}

现在我知道按班级选择并不是最有效的。但我尝试将其切换为 span.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(); 一次加载一个，这样他们就不会挂断用户界面？虽然我不确定这是否可行。

或者，仅当用户专注于该字段而不是预先加载它们时才应用 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
            }
        }
    });