2
的document.ready功能我想學習jQuery和我感到困惑多麼的document.ready（）函數的工作jQuery的：爲什麼不能正常工作
$(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函數的全部內容是，直到所有其他頁面首先被加載？所以我的文本和我的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」中？感謝您的時間
這是一般的想法。但在評論之前，有必要查看更多的頁面html。請張貼頁面。 –