Javascript 文档就绪vs窗口加载-未定义不是一个函数

我在脚本的开头添加了一个小的初始化函数，以弹出一个登录对话框，我最初希望在加载窗口后执行此操作，因此我尝试使用以下代码：

$( window ).onload(function() {
    console.log("foo");
});

然而，它总是回来

未捕获类型错误：未定义不是函数

我决定改为使用以下代码，它可以正常工作：

$( document ).ready(function() {
    console.log("foo");
});     

---

我完全可以使用文档来实现我的目标，我只是想知道为什么windowonload不能工作

我想你的意思是

window.onload

，这是一个javascript事件

window.onload = function(){
  // x functionality when window loads
}

$（window）.load

是jQuery中类似的事件

$（document）.ready

是用于在DOM准备好并加载时进行查询的jQuery

关于一些琐事：

$（document）.ready实际上是上面要触发的第一个事件，因为它不等待图像（等等）。它在加载DOM后直接激发。另外两个等待整个页面加载

window.onload = function() {

};

这不是jQuery

$( window ).onload(function() {
   console.log("foo");
});

不正确

正确的将是

window.onload = function() {
   console.log("foo");
};

或

或

-----编辑-----

如果您使用jQuery，我建议您

还是短版本

$(function() {
   console.log("foo");
});

当页面中的所有内容都已完成加载时，Window.load将激发。这意味着不仅要加载整个DOM，而且要完全加载所有链接的资源（如图像）。因为这会等待图像完成加载，所以有时需要很长时间才能启动

请参阅下面的代码，该代码将在图像加载函数后触发窗口加载事件，以便您可以使用document.ready事件（如果您希望在渲染过程中“尽早”进行干预），而无需等待图像加载



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){        
            $("img").load(function(){
            alert("Image loaded.");
        });
   });
$(window).load(function(){
   alert('load my window when all the resources on the page is loaded');
});
</script>


$（文档）.ready（函数（）{
$（“img”）.load（函数（）{
警报（“图像加载”）；
});
});
$（窗口）。加载（函数（）{
警报（“加载页面上的所有资源时加载我的窗口”）；
});


注意：根据浏览器的不同，如果缓存图像，则可能不会触发加载事件

jQuery没有
onload
方法。可以在（'load'）
或
load（）
上使用
$（window）。load（function（）{}）
函数用于jQuery。请注意：如果使用
$（window）。load（function（）{}）
加载内容后，将不会调用回调。另一方面，
$（document）.ready（function（）{}）
将在DOM就绪时调用，如果此时DOM已经就绪，则将立即调用它。感谢您包含加载时的完整三个特性：-）
$( document ).ready(function() {
   console.log("foo");
});

$(function() {
   console.log("foo");
});



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){        
            $("img").load(function(){
            alert("Image loaded.");
        });
   });
$(window).load(function(){
   alert('load my window when all the resources on the page is loaded');
});
</script>