window.load功能不起作用

Question

加載功能上的JavaScript窗口出現了一個小問題。 該腳本的目標是使#headerdiv的高度始終等於屏幕的大小。

當我打開頁面時，它沒有顯示我的#headerdiv （我想是因為我的JavaScript代碼未添加高度）。 調整瀏覽器窗口大小后，＃headerdiv便會彈出並調整到屏幕高度。 所以我想它只是窗口加載功能不起作用？ 有人有建議嗎？

這是我的代碼：

Javascript：

<script>
$(function(){
    $(window).load(function(){ // On load
        $('#headerdiv').css({'height':(($(window).height()))  +'px'});
    });

    $(window).resize(function(){ // On resize
        $('#headerdiv').css({'height':(($(window).height()))+ 'px'});
    });
});     
</script>

HTML + CSS：

<style>
    #headerdiv {width:100%; background:blue;padding:0;margin:0;overflow:auto;}​
</style>

<div id="headerdiv"></div>

Answer 1

您不需要那里的$( window ).load()作為$(function(){已經完成$( document ).ready() （有關快捷方式，請參見官方文檔 ）

因此，此時您的代碼已經加載。 你試一試：

$(function(){

   $('#headerdiv').css({'height':(($(window).height()))  +'px'});

   $(window).resize(function(){ // On resize
    $('#headerdiv').css({'height':(($(window).height()))+ 'px'});
   });

});

Answer 2

根據是否需要等待所有圖像加載，使用以下任一方法：

$(window).load(function(){ // On load
  $('#headerdiv').css({'height':(($(window).height()))  +'px'});
});

$(function(){
   $(window).resize(function(){ // On resize
      $('#headerdiv').css({'height':(($(window).height()))+ 'px'});
   });
});

或@antyrat給出的答案。 您不應該將$(window).load包裝在$(function()

Answer 3

我會像下面這樣擴展antyrat的答案 ：
（無需重復代碼）：

$(function(){

   $(window).resize(function(){ // On resize
       $('#headerdiv').css({'height':  $(window).height() + 'px'});
   }).trigger('resize'); //do the resize function on start

});