Question

我在脚本的开头添加一个小的初始化函数来弹出一个登录对话框，我最初想在加载窗口时这样做，所以我尝试使用以下代码：

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

然而，它总是返回

未捕获的TypeError：undefined不是函数

我决定使用以下代码，它运行正常：

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

使用文档准备实现我的目标绝对没问题，我只是想知道为什么窗口onload不起作用。

Answer 1

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

不正确

正确

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

或

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

或

$( window ).on('load', function() {
   console.log("foo");
});

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

如果您使用的是jQuery，我会推荐"ready" function

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

或短版

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

Answer 2

我认为你的意思是window.onload，这是一个javascript事件

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

$(window).load是jQuery中的类似事件。 <{1}}是用于DOM准备好并加载时的jQuery。

对于一些琐事：$(document).ready实际上是上述事件中的第一个，因为它不会等待图像（等等）。它在DOM加载后直接触发。其他两个等到整个页面加载完毕。

Answer 3

window.onload = function() {

};

这不是jQuery

Answer 4

当页面中的所有内容都加载完毕后，Window.load将触发。这意味着不仅加载了整个DOM，而且完全加载了任何链接的资源，如图像。因为这等待图像完成加载，有时需要很长时间才能开始。

请参阅下面的代码，该代码将在图像加载功能之后触发窗口加载事件，因此如果要在渲染过程中“提前”进行干预，则可以使用document.ready事件，而无需等待图像加载。 / p>



<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>
 <html>  
  <head>    

</head>
<body>
<img src="img_moustiers-sainte-marie.jpg" alt="Cinqueterra" width="304" height="236">

<p><b>Note:</b> Depending on the browser, the load event may not trigger if the image is cached.</p>
</body>
</html>

Document Ready vs Window Onload - undefined不是一个函数

4 个答案: