极客观点
项目管理
HarmonyOS
我正在尝试学习 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”中，为什么我的主页需要这么长时间才能加载？谢谢你的时间
原文由 Paul 发布，翻译遵循 CC BY-SA 4.0 许可协议
你可以改为将你的 javascript 绑定到 window.load 事件，就像这样
编辑：这不是好的做法，在较新版本的 jQuery 中不受支持
这样做的正确方法
文档就绪允许您访问完整的标记，即使图像和 iframe 尚未加载，这在大多数情况下都是需要的。
但是，在您的情况下，您可能希望花时间等待所有内容加载，这就是 window.load 事件所做的。