Why does [removed] event occur before $(document).ready?

前端未结

关注

 3  1184

As stated in this thread: window.onload vs $(document).ready(). The window.onload should occur later than the $(document).ready() but in this simple co

相关标签:

3条回答

隐瞒了意图╮

2021-02-20 01:27

@RoryMcCrossan saying is right, you have nothing in your html to be load on window like(image,video etc ). Now you can see how behavior of event is changed

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <img src="http://www.wallpapereast.com/static/images/Unique-And-Beautiful-Wallpaper-HD.jpg" alt="Alternate Text" />

  
</head>

<body>
  <h1>A Simple Site</h1>
  <script>
    $(document).ready(function() {
      console.log("ready event fired");
    })
     window.onload = function() {
      console.log("onload event fired");
    }
  </script>
</body>

</html>

0 讨论(0)

不要未来只要你来

2021-02-20 01:32

This is a "feature" of jQuery 3. jQuery 1.X has always handled $(document).ready before $(window).on('load'). Furthermore, $(window).load() can be considered as an event when page is rendered. I'm 100% certain in this because now I just had an attempt to upgrade jQuery version to 3.X in a project that's been working stable with jQuery 1.X for almost 10 years. So this attempt has turned into a month of headache struggling with $(document).ready and $(window).load. Finally it was decided to leave it with jQuery 1.12.4, the latest of 1.X generation.

0 讨论(0)
发布评论:

提交评论
- 加载中...
旧时难觅i

2021-02-20 01:39
The problem is not with the order of the events. It with the jQuery wrapper around the native DOM events. If you try the native DOMContentLoaded you will find that it always runs before window.onload. But the jQuery event $(document).ready will come some milliseconds after DOMContentLoaded, which in some cases might be after window.onload too, especially if the page doesn't have much to load like the code below. This is delay is due to jQuery implementation.

If you uncomment the iframe in the code though, it takes some time to load which causes the window.onload to be delayed, so $(document).ready will come first.
```
<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
    <h1>A Simple Site</h1>
    
    <script>
        $(document).ready(function() {
            console.log("jQuery ready");
        })
        
        document.addEventListener("DOMContentLoaded", function(event) {
            console.log("DOM ready");
        });
        
        window.onload = function() {
            console.log("DOM loaded");
        }
    </script>
</body>
</html>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...