jQuery : why is document.ready function not working properly

javascript jquery html css document-ready

14,588

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.

14,588

Author by

Paul

Updated on June 26, 2022

Comments

Paul almost 2 years

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>

$(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

Jordan Carter over 7 years

Agreed. I was going to mention this, too.
Paul over 7 years

when i wrap my jQuery code in $(window).load(function(){ ... }); the links don't work at all
santiago arizti over 7 years

@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