jQuery：为什么 document.ready 函数不能正常工作
[英]jQuery : why is document.ready function not working properly
问题描述
I am trying to learn jQuery and I am confused how document.ready() function works
我正在尝试学习 jQuery，但我很困惑 document.ready() 函数是如何工作的
$(document).ready(function(){}
In html,在 HTML 中，
<script type="text/javascript" src="jquery.js"></script>
<script src="script.js" type="text/javascript"></script>
links are at the very bottom of the document, just before the closing body tag.链接位于文档的最底部，就在结束正文标签之前。 In my javaScript file, I have all my code inside the .ready function.在我的 javaScript 文件中，我的所有代码都在 .ready 函数中。 Yet, when I load the page, and I hover over a link, my cursor doesn't turn into a pointer for a couple of seconds, and if I immediately scroll down, the text is not yet loaded for a couple of seconds, either.然而，当我加载页面并将鼠标悬停在链接上时，我的光标在几秒钟内不会变成指针，如果我立即向下滚动，文本还没有加载几秒钟，要么. My javaScript file has a bunch of iframes etc... so I can understand why the delay, but what confuses me is that I thought the whole point of the .ready function was that the javaScript wasn't loaded until everything else in the page was loaded first?我的 javaScript 文件有一堆 iframe 等......所以我可以理解为什么延迟，但让我感到困惑的是，我认为 .ready 函数的全部意义在于，直到页面中的其他所有内容都没有加载 javaScript是先加载的？ So surely my text and my css should be working straight away?那么我的文本和我的 css 应该可以立即工作吗？ Here is my code if it helps.如果有帮助，这是我的代码。 I can post css too if required.如果需要，我也可以发布 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 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...
});
I do know my code is repetitive, I am teaching myself so focused on getting it to work for now.我知道我的代码是重复的，我正在自学，所以现在专注于让它工作。 Why is my main page taking so long to load if all my code is inside the "document.ready"?如果我的所有代码都在“document.ready”中，为什么我的主页需要很长时间才能加载？ Thanks for your time感谢您的时间
4 个解决方案
解决方案1
6 已采纳 2016-11-15 23:23:55
you can instead bind your javascript to the window.load event like this你可以像这样将你的javascript绑定到window.load事件
Edit: tis is not good practice and unsupported in newer versions of jQuery编辑：这不是好的做法，并且在较新版本的 jQuery 中不受支持
$(window).load(function(){ ... });
Correct way to do this正确的方法来做到这一点
$(window).on("load", function(){ ... });
document ready lets you access the complete markup, even if the images and iframes have not loaded yet, this is desired in most cases. document ready 让您可以访问完整的标记，即使图像和 iframe 尚未加载，这在大多数情况下也是需要的。
In your case however, you might want to take the time penalty of waiting for everything to load, this is that the window.load event does.但是，在您的情况下，您可能希望花费时间等待所有内容加载，这就是 window.load 事件。
解决方案2
0 2016-11-15 23:24:23
$(document).ready() will only wait for all of the page's elements to load. $(document).ready()只会等待页面的所有元素加载。 It will NOT wait for the iFrames to load their content.它不会等待 iFrame 加载其内容。
You can refer to this post if you have more questions:如果有更多问题可以参考这篇文章：
$(document).ready and iframe content $(document).ready 和 iframe 内容
解决方案3
0 2016-11-15 23:33:39
Are you sure JQuery is loading properly?你确定 JQuery 加载正确吗？ The source (src) property needs to point to the correct path.源 (src) 属性需要指向正确的路径。 I find using the developer's tools to review errors, manipulate CSS and check DOM state to be helpful when learning.我发现使用开发人员的工具来检查错误、操作 CSS 和检查 DOM 状态在学习时很有帮助。 I prefer Chrome .我更喜欢Chrome 。
解决方案4
0 2018-09-19 22:12:53
Happened to me too.也发生在我身上。 What I found that, the solution is to include the file at the bottom outside of html tag (ie the file in which you are using $(document).ready() ).我发现，解决方案是将文件包含在 html 标记外部的底部（即您使用 $(document).ready() 的文件）。
I assume that, this is because the html document is not ready by the time when browser compiler reached at this function.我认为，这是因为当浏览器编译器到达此功能时，html 文档还没有准备好。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.