jQuery:为什么document.ready函数不能正常工作

时间:2016-11-15 23:15:19

标签: javascript jquery html css document-ready

我正在尝试学习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>

JS

$(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”中,为什么我的主页加载时间太长?谢谢你的时间

4 个答案:

答案 0 :(得分:5)

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

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

document ready允许您访问完整的标记,即使图像和iframe尚未加载,在大多数情况下也是如此。

但是,在你的情况下,你可能想要等待加载所有内容的时间代价,这就是window.load事件。

答案 1 :(得分:0)

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

如果您有更多问题,可以参考这篇文章:

$(document).ready and iframe content

答案 2 :(得分:0)

你确定JQuery正确加载吗? source(src)属性需要指向正确的路径。我发现使用开发人员的工具来查看错误,操纵CSS并检查DOM状态,以便在学习时提供帮助。我更喜欢Chrome

答案 3 :(得分:0)

也发生在我身上。我发现,解决方案是将文件包含在html标记的底部(即,您正在使用$(document).ready()的文件)。

我认为这是因为在浏览器编译器到达此功能时html文档尚未准备就绪。