0

私は一般的にプログラミングに不慣れであり、純粋に独学であるため、プログラミングの基本のいくつかが欠けています。これは、十分なコンテンツがない場合でも、サイトのラッパーがフッターの先頭まで伸びることを確認するために作成した単純なjQueryです。

$(window).resize(function() {
    var footerHeight = 147;
    var windowHeight = $(window).height();
    var properHeight = windowHeight - footerHeight;
    $('#main').height(properHeight);
});

フッターの高さを定義します。次に、ビューポートの高さを取得します。次に、ビューポートからフッターの高さを差し引きます。次に、その高さを#main要素に適用します。jQueryを使用してフッターの高さを取得できることは知っていますが、問題があり、何らかの理由で正しく機能しませんでした。

コードを直前に繰り返しましたが、$('window').resize()関数の外にあるため、ページの読み込み時に1回実行されます。

2回繰り返されるので、これを関数にできる気がします。また、ここで質問する主な理由は、ブラウザのサイズを数秒間すばやく変更すると、このコードが原因でブラウザがCPUを消費してしまうためです。

これが質問するのに適切なサイトでない場合は、お詫び申し上げます。

4

4 に答える 4

1

ビューポートが変更されるため、window.resize（）イベントで確実に呼び出す必要があるため、これまでに行ったことは適切です。

多くの人が示唆しているように、サイズ変更イベントを手動でトリガーすることは有益です。

アルゴリズムを強化するために、おそらくより少ない変数を使用することができます。以下のように。

    var postResize;
    $(window).resize(function() {
            clearTimeout(postResize);
            postResize = setTimeout(function() {
                    var footerHeight = 147;
                    $("#main").height($(window).height() - footerHeight);
            }, 100);
    }).resize();

上記のアルゴリズムにより、パフォーマンスが向上します。ユーザーがウィンドウのサイズ変更を100ミリ秒間停止するまで、ビューポートの計算は行われません。これにより、ウィンドウのサイズを400〜500ピクセル（たとえば）変更したときに、関数呼び出しが（400〜500回の呼び出しではなく）1回だけ行われます。

お役に立てれば ：）

于 2013-03-11T15:18:55.267 に答える
1

resizeイベント ハンドラーをバインドした後、プログラムでウィンドウでイベントをトリガーすることができます。

$(window).resize(function() {
    // your code here
}).resize();

// your code hereこれにより、実際のresizeイベントがトリガーされる前に、関数の外側の部分を複製して実行する必要がなくなります。

あなたが言及した CPU の問題は、関数内の実際のコード (比較的些細なことです) とはあまり関係がなく、resizeトリガーされるイベントの数と関係がある可能性が高くなります。のjQueryドキュメント.resize()から取得：

サイズ変更ハンドラーのコードは、ハンドラーが呼び出される回数に依存するべきではありません。実装に応じて、サイズ変更の進行中にサイズ変更イベントを継続的に送信することも (Internet Explorer および Safari や Chrome などの WebKit ベースのブラウザーでの一般的な動作)、またはサイズ変更操作の最後に 1 回だけ送信することもできます ( Opera などの他のブラウザ)。

于 2013-03-11T15:04:43.570 に答える
1

サイズ変更中にこれが CPU を消費しないようにする 1 つの方法は、次のような方法で、サイズ変更の最後にのみこれが発生するようにすることです。

function afterResize()
{
    var footerHeight = 147;
    var windowHeight = $(window).height();
    var properHeight = windowHeight - footerHeight;
    $('#main').height(properHeight);
}

var timeout = null;
$(window).resize(function() 
{
    clearTimeout(timeout);
    timeout = setTimeout(function(){ afterResize(); }, 100);    
});

ここにjsfiddleがありますhttp://jsfiddle.net/RxRcQ/1/

于 2013-03-11T15:06:18.640 に答える
0

自分でサイズ変更イベントをトリガーするだけです。

$(window).resize(function() {
    var footerHeight = 147;
    var windowHeight = $(window).height();
    var properHeight = windowHeight - footerHeight;
    $('#main').height(properHeight);
}).resize();

ただし、コンテンツによっては、ウィンドウの読み込みが完了するまで待つ必要がある場合があります。

$(window).resize(function() {
    var footerHeight = 147;
    var windowHeight = $(window).height();
    var properHeight = windowHeight - footerHeight;
    $('#main').height(properHeight);
}).on("load",function(){
    $(window).resize();
});
于 2013-03-11T15:05:16.970 に答える