javascript - 在 Google Chrome 上使用 jQuery 加载窗口比 DOM 先加载

标签 javascript jquery html google-chrome dom

我是 jQuery 的新手。我了解到首先加载 DOM 内容,然后 window.onload 事件将发生,因为必须加载所有样式表和图像。 但是下面的代码对我来说不是这样

 <!DOCTYPE html>
<html>
    <head>
        <title>Add Event Listener</title>
        <script type="text/javascript" src="../jquery-3.2.1.js"></script>
        <script type="text/javascript" >
            $(document).ready(function(){
                alert("DOM Loaded");
            });
            $(window).on("load",function(){
                alert("Window Loaded");
            });</script>
    </head>
    <body>

    </body>
</html>

在 Google Chrome (63.0.3239.108) 上打开后,我收到一条警告,提示窗口已加载,然后出现“DOM 已加载”。 与 Microsoft Edge (40.15063.0.0) 相同的问题

但是,这适用于 Firefox(57.0.3)

谁能解释一下?

提前致谢! 这个问题不是

的重复

window.onload seems to trigger before the DOM is loaded (JavaScript)

最佳答案

那是因为你在没有加载任何图像的情况下测试它......

因此所有标记都已被解析并全部加载。所以 load 事件发生了。 然后当脚本被解析后,ready 发生。

当有图像要加载时,通常是脚本解析得更快。

下面看看当有一个时会发生什么。

$(document).ready(function(){
  alert("DOM Loaded");
});
$(window).on("load",function(){
  alert("Window Loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="https://static.pexels.com/photos/132037/pexels-photo-132037.jpeg">

关于javascript - 在 Google Chrome 上使用 jQuery 加载窗口比 DOM 先加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48102745/

相关文章:

javascript - 为什么 PHP echo 返回完整标记的 html 而不是 echo 中的内容?

javascript - 如何从 jQuery 函数中排除特定标签?

javascript - 如何删除特定标签 innerHTML 之前的所有内容

html - CSS 不会链接到我的 HTML

html - CSS完全用许多相同的子代填充容器

javascript - 动态表单使用 Angular 附加ng-repeat html

无法在 Wordpress 中运行的 Javascript 需要在 header.php 或 functions.php 中运行?

javascript - Vue js不使用文件数据更新 View ,但能够控制台日志

javascript - css image swap mobile vs desktop 使用媒体查询

javascript - Google Maps API 反向查找地址详细信息准确性