解决方案1

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function(){
            var h = $("#im").height();
            alert("Hello from ready. Height is " + h);
        });
        $(window).on("load", function(){
            var h = $("#im").height();
            alert("Hello from load. Height is " + h);
        });

    </script>
</head>
<body>
    <p class="" id="msg"></p>
    <p class="" id="msg2"></p>
    <img id="im" src="flower.jpg" alt="">

</body>
</html>

1）以上是我的代码。当我在Chrome 64（64位）中运行它时。 window.load部分在document.ready。

之前执行

2）其次，根据我在这些论坛和网上其他地方阅读的内容，我不应该从document.ready获得图像高度，然而，它可以工作，我从两个都得到相同的高度功能。

为什么会这样？

Answer 1

jQuery的ready事件首先由其Deferred实现处理，该实现在内部使用setTimeout（可能允许$.holdReady运行）。基本上就是这样：

document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        // Your `ready` callback
    }, 0);
});

如果页面足够简单，使用setTimeout(..., 0)可以延迟回调的执行，以允许load事件首先运行其回调。我在Chrome 64.0.3282.186上测试了它，jQuery ready事件在load之前仅在大约10％的时间内被触发。

如果您直接使用document.addEventListener，则代码会按预期运行。

Answer 2

解决方案1

在加载窗口后获取图像信息或向图像添加eventListener。

$(window).on('load', function() {/*Do Stuff*/}

或

$('#image').on('load', function() {/*Do Stuff*/}

以下是Codepen上问题的解决方案。

解决方案2

是的，当文档准备就绪时，只加载结构，而是加载窗口，包括图像等在内的所有组件都已准备好并加载。

更多：StackOverflow

希望这有帮助。

$（window）.on（“load”）在$（document）.ready之前执行。不应该先准备好执行吗？

2 个答案:

解决方案1

解决方案2

$（window）.on（“load”）在$（document）.ready之前执行。不应该先准备好执行吗？

2 个答案:

解决方案1 ​​

解决方案2

解决方案1