title: jQuery : why is document.ready function not working properly
body: <p>I am trying to learn jQuery and I am confused how document.ready() function works </p>
  
  <pre><code>$(document).ready(function(){}
  </code></pre>
  
  <p>In html,</p>
  
  <pre><code>&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;script src="script.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>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. 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? So surely my text and my css should be working straight away? Here is my code if it helps. I can post css too if required.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;myPage&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="styles2.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt; 
  
  &lt;div id="container"&gt;
  
  &lt;div id="backgroundLeft"&gt;&lt;img id='backgroundLeftImage' src="Left.jpg" width="100%"&gt;&lt;/div&gt;
  
  &lt;div id="wrap"&gt;
  
  &lt;p id="text"&gt;...some text... &lt;span id="firstLink" class="link"&gt;click me&lt;/span&gt;.&lt;span&gt;&lt;iframe id="frame" class="rect" scrolling="no" marginwidth=0 marginheight=0&gt;&lt;/iframe&gt;
  
  &lt;/span&gt; ...some more text.... &lt;span id="secondLink" class="link"&gt;click me&lt;/span&gt;,
  &lt;/span&gt;&lt;span&gt;
      &lt;iframe  id="frame2" class="rect" scrolling="no" marginwidth=0 marginheight=0&gt;&lt;/iframe&gt;
  &lt;/span&gt;
   ... some more text... &lt;span id="thirdLink" class="link"&gt;click me&lt;/span&gt; &lt;/span&gt;&lt;span&gt;
      &lt;iframe  id="frame3" class="rect" scrolling="no" marginwidth=0 marginheight=0&gt;&lt;/iframe&gt;
  &lt;/span&gt; ... some more text...
  
  ETC...
  
  &lt;/p&gt;
  
  &lt;/div&gt;
  
  &lt;div id="backgroundRight"&gt;&lt;a href="index2.html"&gt;&lt;img id='backgroundRightImage' src="2VillesRight.jpg" width="100%"&gt;&lt;/a&gt;&lt;/div&gt;
  
      &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
      &lt;script src="script2.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>js</p>
  
  <pre><code>$(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...
  });
  </code></pre>
  
  <p>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"? Thanks for your time</p>