Question

我是jquery的新手，并在我的主页上运行一个脚本来确定容器中的行数（即div）。如果行数超过3行或4行（取决于div类是“threeline”还是“fourline”），它将截断它并添加省略号。但是，这个脚本需要永远执行，所以我想知道为什么或如何优化它。我试着用javascript / jquery包围我的脑袋，但对我来说它确实是一门外语！

有人可以看看这个脚本，让我知道如何编辑它以使其更快？是否不必要地检查页面上的所有元素？

以下是我在php页面上的调用方式：

    <div class="bubble left">
    <div class="rounded">
            <blockquote class="ellipsis fourline">
                    <h3><a href="http://www.xyz.com">This is the title</a></h3>

                    <p>This is the body of the quote; if the body plus title is more than fourlines, then the text will be truncated and an ellipsis will be added</p>
            </blockquote>
    </div>
    <cite class="rounded">March 18, 2010</cite>
    </div>


<script type="text/javascript" src="/scripts/js/jquery.ellipsis.js"></script>
<script type="text/javascript"> $(".ellipsis").ellipsis(); </script>

这是jquery.ellipsis.js文件：

(function($) {
        $.fn.ellipsis = function()
        {
                return this.each(function()
                {
                        var el = $(this);

                        if(el.css("overflow") == "hidden" && el.hasClass('fourline'))
                        {
                                var text = el.html();
                                var fourline = el.hasClass('fourline');
                                var t = $(this.cloneNode(true))
                                        .hide()
                                        .css('position', 'absolute')
                                        .css('overflow', 'visible')
                                        .width(fourline ? el.width() : 'auto')
                                        .height(fourline ? 'auto' : el.height())
                                        ;

                                el.after(t);

                                function height() { return t.height() > el.height(); };
                                function width() { return t.width() > el.width(); };

                                var func = fourline ? height : width;

                                while (text.length > 0 && func())
                                {
                                        text = text.substr(0, text.length - 1);
                                        t.html(text + "&hellip;");
                                }

                                el.html(t.html());
                                t.remove();
                        } else if (el.css("overflow") == "hidden" && el.hasClass('threeline'))
                        {
                                var text = el.html();
                                var threeline = el.hasClass('threeline');
                                var t = $(this.cloneNode(true))
                                        .hide()
                                        .css('position', 'absolute')
                                        .css('overflow', 'visible')
                                        .width(threeline ? el.width() : 'auto')
                                        .height(threeline ? 'auto' : el.height())
                                        ;

                                el.after(t);

                                function height() { return t.height() > el.height(); };
                                function width() { return t.width() > el.width(); };

                                var func = threeline ? height : width;

                                while (text.length > 0 && func())
                                {
                                        text = text.substr(0, text.length - 1);
                                        t.html(text + "&hellip;");
                                }

                                el.html(t.html());
                                t.remove();
                        }
                });
        };
})(jQuery);

先谢谢，我喜欢这个网站！

Answer 1

很难说，鉴于那里有很多代码。

我会考虑使用分析器，例如Firebug分析器来确定最难打的是什么。

http://getfirebug.com/wiki/index.php/Console_Panel#Profiling

在我的脑海中，我猜它与迭代迭代有关，而且你在它们之间链接了多个函数。分析将为您提供更好的图片。

Answer 2

我很确定就是这样：

while (text.length > 0 && func())
{
        text = text.substr(0, text.length - 1);
        t.html(text + "&hellip;");
}

它看起来像你的循环，而你仍然有文本，关闭一个字符并将其放入div。如果你有很多角色，这需要一段时间。

为什么不使用插件？

这里有一个很好的讨论： http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/

对于IE，Safari和Chrome，你可以将文本溢出设置为省略号，它会为你处理它。

为什么jquery脚本会永远占用？

2 个答案: