1

私はこれを短くて甘くするつもりです。Webkit ブラウザーでは、[私のサイト][1] に適用した自動リサイズ機能の応答が遅いようです。ブラウザーが調整された場合にのみ、適切な位置に配置されるようです。以下は私のJSのスニペットです。

function setTheHeight() {

    if( $('.col-small, .img_hover').length ) {
        //Get value of highest element
        var maxHeight = Math.max.apply(Math, $('.col-small, .img_hover').map (
            function() {
                var totalHeight = 0;

                $(this).children().each(function() {
                    totalHeight += $(this).outerHeight(); 
                });

                return totalHeight;
            }
        ));
        console.log(maxHeight);
        $('.col-small, .img_hover').height(maxHeight);
    }   
}

setTheHeight();

$(window).resize(function() {
    setTheHeight();
});

何か不足していますか??

4

1 に答える 1

1

最適化を試してください。何度か再計算する必要はありません

$('.col-small, .img_hover')

以下のような

.children()

また、マップとそれぞれの使用を減らしてみてください

多分そのようなこと？:

var elems = [], $elems = $('.col-small, .img_hover');

$elems.each(function(i){
    var $t = $(this);
    var $c = $t.children();
    elems[i] = { $:$t, $c:$c, nb:$c.length };
});

function getHeight(e,i){
    var total=0,n=0;
    while(n < e.nb)
        total += e.$c.eq(n++).outerHeight();
    return total;
}

function setTheHeight(){
    $elems.height( Math.max.apply(Math, $.map(elems,getHeight)) );
}

$(window).resize(setTheHeight).resize();

$elems.find("img").on("load",setTheHeight);

各ピクセル変更で効果的なサイズ変更を行わないようにすることもできます

var timer = false;
$(window).resize(function(){
    if(timer !== false) return; // or clearTimeout(timer);
    timer = setTimeout(function(){
        setTheHeight();
        timer = false;
    },20); // 20ms => 50fps max
}).resize();

フィドル=> http://jsfiddle.net/r043v/HvmmM/

于 2013-05-23T23:25:21.397 に答える