3

ウィンドウの高さに応じて垂直メニューの高さを計算し、遅くも早くも時間どおりに設定するjsコードを実行するのにどちらが適切か疑問に思っています。

私は使用してdocument.readyいますが、問題を解決するのに役立っていません。設定されていない場合があります。ページをリロードする必要があります。その後、機能しますが、最初のロードでは機能しません。

この問題を解決する方法は？

これが私のコードです：

$(document).ready(function(){
     var winh = document.body.clientHeight;
     var footer = document.getElementById('footer').offsetHeight;
     document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
     document.getElementById('sidebar').style.marginBottom = footer + 'px';

     $(window).resize(function(){
         var winh = document.body.clientHeight;
         var footer = document.getElementById('footer').offsetHeight;
         document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
         document.getElementById('sidebar').style.marginBottom = footer + 'px';
     });
});
4

1 に答える 1

5

準備

ドキュメントの準備ができたときにコードを実行すると、DOMが読み込まれることを意味しますが、画像などは読み込まれません。画像が高さと幅に影響し、画像タグに幅と高さが設定されていない場合は、準備ができているかどうかは選択できません。そうでない場合は、おそらくそうです。

オンロード

これには画像が含まれるため、すべてが読み込まれます。これは、少し遅れて発火することを意味します。

両方とも

var calculateSize = function () {
     var winh = document.body.clientHeight;
     var footer = document.getElementById('footer').offsetHeight;
     document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
     document.getElementById('sidebar').style.marginBottom = footer + 'px';
}

$(document).ready(function(){
    calculateSize();

     $(window).resize(calculateSize);
});

window.onload = calculateSize ;
于 2012-11-16T16:52:37.283 に答える