0

我有一个页面，其中有许多以网格布局的 div。每个 div 中都有文本。我希望文本足够大以填充 div。我通过增加文本大小来做到这一点，直到我检测到 div 已经滚动，然后按照这个答案返回：

自动调整动态文本以填充 div

这在大多数浏览器上都非常有效，包括移动浏览器，但在 IE10 上却很慢。您实际上可以观看它使文本变小。我猜它每次字体大小改变时都会做某种窗口范围的布局操作。

知道如何在所有 div 完成或以其他方式提高性能之前暂停重绘吗？

这是一个显示该技术的简单小提琴。想象一下，页面上有大约 50 个 div。在 Chrome 中即时，在 IE10 中需要几秒钟：

(function($) {
$.fn.textfill = function(options) {
    var fontSize = options.maxFontPixels;
    var ourText = $('span:visible:first', this);
    var maxHeight = $(this).height();
    var maxWidth = $(this).width();
    var textHeight;
    var textWidth;
    do {
        ourText.css('font-size', fontSize);
        textHeight = ourText.height();
        textWidth = ourText.width();
        fontSize = fontSize - 1;
    } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
    return this;
}
})(jQuery);

$(document).ready(function() {
    $('.jtextfill').textfill({ maxFontPixels: 200 });
});

jsfiddle：http: //jsfiddle.net/pRJdY/

4

2 回答 2

0

问题是大量的 DOM 访问。幸运的是，您的算法可以大大优化。

从 200px 字体大小开始并下降，当你最终达到 10-30px 时非常慢。最好上去，最好对正确的大小进行二分搜索。

从最小尺寸开始，上升速度快 5 倍，在这种情况下，至少：http: //jsfiddle.net/pRJdY/2/

二进制搜索将所需时间再次减少一半：http: //jsfiddle.net/pRJdY/4/

(function($) {
$.fn.textfill = function(options) {
    var start = (new Date).getTime(),
        node = $(this),
        max = options.maxFontPixels,
        min = 3,
        span = $('span:visible:first', this),
        maxHeight = node.height(),
        maxWidth = node.width(),
        size,
        isTooBig,
        finalSize = null;

    do {
        console.log(size);
        size = Math.round((min + max) / 2);
        span.css('font-size', size);
        isTooBig = (span.height() > maxHeight || span.width() > maxWidth);
        if (isTooBig) {
            max = size - 1;
        } else {
            min = size;
        }
        if (min === max) {
            finalSize = max;
        }
    } while (finalSize === null);

    span.css('font-size', finalSize);

    console.log('elements:', node.size(), 'elapsed time:', (new Date).getTime() - start);
    return this;
}
})(jQuery);
于 2013-06-05T02:02:18.327 回答
0

那么 jsFiddle 失败了，因为 jQuery jsFiddle 引用的版本中有一个错误，http: //bugs.jquery.com/ticket/13980 。

所以我创建了一个本地版本的示例。我想我明白你在说什么，但不完全确定。我看到它从普通的小文本变成了更大的文本，但它发生得非常快。我在 Chrome 中看到了相同的行为。所以我的猜测是，直到页面上有数千个元素，我可能无法重新创建您的问题。

我确实对您的 JavaScript 进行了一些优化，因此希望对您有所帮助：

(function ($) {

            $.fn.textfill = function (options) {

                var $this = $(this),
                    fontSize = options.maxFontPixels,
                    ourText = $('span:visible:first', this),
                    maxHeight = $this.height(),
                    maxWidth = $this.width(),
                    textHeight,
                    textWidth;

                do {
                    ourText.css('font-size', fontSize);
                    textHeight = ourText.height();
                    textWidth = ourText.width();
                    fontSize = fontSize - 1;
                } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);

                return this;

            }

        })(jQuery);
于 2013-06-05T01:06:53.177 回答