jQuery : why is document.ready function not working properly

Question

I am trying to learn jQuery and I am confused how document.ready() function works

$(document).ready(function(){}

In 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. 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.

<!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...
});

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

That is the general idea. But it will be necessary to see some more of your page html before commenting. Post the page please. — Vanquished Wombat, Nov 15 '16 at 23:21

santiago arizti · Accepted Answer · 2020-12-17T20:28:45.863

7

you can instead bind your javascript to the window.load event like this

Edit: tis is not good practice and unsupported in newer versions of 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.

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.

edited Dec 17 '20 at 20:28

answered Nov 15 '16 at 23:23

santiago arizti

4,175
3
37
50

Agreed. I was going to mention this, too. – Jordan Carter Nov 15 '16 at 23:27
when i wrap my jQuery code in $(window).load(function(){ ... }); the links don't work at all – Paul Nov 15 '16 at 23:36
@Paul you might be in a situation where you need to put some code inside `$(document).ready()`, some code inside `$(window).load()` and maybe even some code inside `$("#frame").load()`, depending on whether you need the code to be executed as soon as the markup is loaded, as soon as all iframes and images are loaded, or as soon as a particular iframe is loaded, respectively – santiago arizti Nov 16 '16 at 18:17

score 0 · Answer 2 · edited May 23 '17 at 11:47

0

$(document).ready() will only wait for all of the page's elements to load. It will NOT wait for the iFrames to load their content.

You can refer to this post if you have more questions:

$(document).ready and iframe content

edited May 23 '17 at 11:47

Community

1
1

answered Nov 15 '16 at 23:24

Niles Tanner

3,911
2
17
29

score 0 · Answer 3 · answered Nov 15 '16 at 23:33

0

Are you sure JQuery is loading properly? The source (src) property needs to point to the correct path. I find using the developer's tools to review errors, manipulate CSS and check DOM state to be helpful when learning. I prefer Chrome.

answered Nov 15 '16 at 23:33

Robert Brisita

5,461
3
36
35

score 0 · Answer 4 · answered Sep 19 '18 at 22:12

Happened to me too. What I found that, the solution is to include the file at the bottom outside of html tag (i.e the file in which you are using $(document).ready() ).

I assume that, this is because the html document is not ready by the time when browser compiler reached at this function.

jQuery : why is document.ready function not working properly

4 Answers4