2

重複の可能性:
window.onload と document.ready jquery

私はこの問題を抱えています:ページにそれほど大きな画像ではない画像があります。コンテンツの高さとウィンドウのサイズに応じて、左側のサイドバーの高さを動的に設定する js 関数があります。ページのサイズを変更すると、サイドバーのサイズも動的に変更されます。しかし現在、サイドバーの高さが非常に早く設定されているため、正しく設定されていません。設定は、画像を含むすべての DOM の準備が整った後に実行される ```document.ready`` 関数で行われますよね?

これが私のページです。これをクロムで開いてください。問題がより明確に表示されます。 http://www.stahlbaron.de/standort/

そして、これがサイドバーを動的に設定する私のjs関数です。

<script type="text/javascript">
   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);
});

ご覧いただきありがとうございます。

4

1 に答える 1

3

$(window).on('load', ...)ではなく、トラップする必要があり$(document).readyます。

前者は画像 (および他のすべてのコンテンツ) が読み込まれるのを待ちますが、後者は HTML ソース内の要素を表す DOM ツリーが作成されるのを待つだけです。

サイズ変更時に同じ関数を呼び出す必要があるため、イベント登録を組み合わせることができます。

$(window).on('load resize', calculateSize);
于 2012-12-19T19:18:49.963 に答える