jQuery：为什么 document.ready 函数不能正常工作答案

【问题标题】：jQuery : why is document.ready function not working properlyjQuery：为什么 document.ready 函数不能正常工作
【发布时间】：2016-11-15 23:15:18
【问题描述】：

我正在尝试学习 jQuery，但我对 document.ready() 函数的工作原理感到困惑

$(document).ready(function(){}

在html中，

<script type="text/javascript" src="jquery.js"></script>
<script src="script.js" type="text/javascript"></script>

链接位于文档的最底部，就在结束正文标记之前。在我的 javaScript 文件中，我的所有代码都在 .ready 函数中。然而，当我加载页面并将鼠标悬停在链接上时，我的光标在几秒钟内没有变成指针，如果我立即向下滚动，文本还没有加载几秒钟，要么. 我的 javaScript 文件有一堆 iframe 等......所以我可以理解为什么会延迟，但让我感到困惑的是，我认为 .ready 函数的全部意义在于，直到页面中的其他所有内容都没有加载 javaScript是先加载的？所以我的文本和我的 css 应该可以立即工作吗？如果有帮助，这是我的代码。如果需要，我也可以发布 css。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>myPage</title>
    <link rel="stylesheet" type="text/css" href="styles2.css">

</head>
<body> 

<div id="container">

<div id="backgroundLeft"><img id='backgroundLeftImage' src="Left.jpg" width="100%"></div>

<div id="wrap">

<p id="text">...some text... <span id="firstLink" class="link">click me</span>.<span><iframe id="frame" class="rect" scrolling="no" marginwidth=0 marginheight=0></iframe>

</span> ...some more text.... <span id="secondLink" class="link">click me</span>,
</span><span>
    <iframe  id="frame2" class="rect" scrolling="no" marginwidth=0 marginheight=0></iframe>
</span>
 ... some more text... <span id="thirdLink" class="link">click me</span> </span><span>
    <iframe  id="frame3" class="rect" scrolling="no" marginwidth=0 marginheight=0></iframe>
</span> ... some more text...

ETC...

</p>

</div>

<div id="backgroundRight"><a href="index2.html"><img id='backgroundRightImage' src="2VillesRight.jpg" width="100%"></a></div>

    <script type="text/javascript" src="jquery.js"></script>
    <script src="script2.js" type="text/javascript"></script>
</body>
</html>

$(document).ready(function(){

    var frame = $("#frame");
    frame.attr("src","iframe.html");
    var frame2 = $("#frame2");
    frame2.attr("src","iframe2.html");
    var frame3 = $("#frame3");

etc...

      var player;

        frame.bind("load", function () {
            player = $(this).contents().find("#firstVid");
            player.on('ended', function () {
                frame.removeClass("open");
            });
        });

        $("#firsLink").click(function(){
            if (frame.hasClass("open")) 
            {   
                frame.removeClass("open");
                player[0].pause();
            } 
            else {
                frame.addClass("open");
                player[0].play();
            }
        });

         var player2;

        frame2.bind("load", function () {
            player2 = $(this).contents().find("#sylvainVid");
            player2.on('ended', function () {
                frame2.removeClass("open");

            });
         });

         $("#secondLink").click(function(){
            if (frame2.hasClass("open")) 
            {
                frame2.removeClass("open");
                player2[0].pause();
            } 
            else {
                frame2.addClass("open");
                player2[0].play();
            }
        });

        var player3;

        frame3.bind("load", function () {
            player3 = $(this).contents().find("#etienneVid");
            player3.on('ended', function () {
                frame3.removeClass("open");

            });
         });

         $("#thirdLink").click(function(){
            if (frame3.hasClass("open")) 
            {
                frame3.removeClass("open");
                player3[0].pause();
            } 
            else {
                frame3.addClass("open");
                player3[0].play();
            }
        });

etc...
});

我确实知道我的代码是重复的，我正在自学，现在专注于让它工作。如果我的所有代码都在“document.ready”中，为什么我的主页需要很长时间才能加载？感谢您的宝贵时间

【问题讨论】：

大体思路。但是在评论之前有必要查看更多的页面 html。请发布页面。

标签： javascript jquery html css document-ready

【解决方案1】：

您可以像这样将您的 javascript 绑定到 window.load 事件

编辑：这不是好的做法，并且在较新版本的 jQuery 中不受支持

$(window).load(function(){  ...   });

罢工>

正确的做法

$(window).on("load", function(){  ...   });

文档就绪让您可以访问完整的标记，即使图像和 iframe 尚未加载，这在大多数情况下都是需要的。

但是，在您的情况下，您可能希望花费时间等待所有内容加载，这就是 window.load 事件所做的。

【讨论】：

同意。我也想提这个。
当我将我的 jQuery 代码包装在 $(window).load(function(){ ... });链接根本不起作用
@Paul 您可能需要在$(document).ready() 中放入一些代码，在$(window).load() 中放入一些代码，甚至在$("#frame").load() 中放入一些代码，具体取决于您是否需要加载标记、加载所有 iframe 和图像或加载特定 iframe 后立即执行的代码

【解决方案2】：

$(document).ready() 只会等待页面的所有元素加载完毕。它不会等待 iFrame 加载其内容。

有更多问题可以参考这篇文章：

$(document).ready and iframe content

【讨论】：

【解决方案3】：

您确定 JQuery 加载正确吗？源 (src) 属性需要指向正确的路径。我发现使用开发人员的工具来检查错误、操作 CSS 和检查 DOM 状态对学习很有帮助。我更喜欢Chrome。

【讨论】：

【解决方案4】：

我也遇到过。我发现，解决方案是将文件包含在 html 标记之外的底部（即您使用 $(document).ready() 的文件）。

我假设，这是因为当浏览器编译器到达这个函数时，html 文档还没有准备好。

【讨论】：