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 に答える