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

});