Я пытаюсь научиться JQuery и я запутался, как 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? Спасибо за ваше время
Это общая идея. Но перед комментированием вам нужно будет увидеть еще несколько своих html страниц. Отправьте страницу, пожалуйста. –