CODEWITHSUNDEEP
javascriptjquerydom
Shades88
Shades88

Reputation: 8360

How long does the jquery .ready() function wait?

I have a page on which php will output a rather big div, which has lots of components inside it. The JS to handle that div begins almost instantaneously, but there are problems of timing related to loading of bigDiv and script that handles it.

So, I applied a code like this to handle it on ready()

var bigDiv = $(document).find('#bigDiv');
bigDiv.ready(function{
    //some code here
});

Now my question is, if bigDiv takes a long time to appear, how long does ready() function wait? What if bigDiv does not appear at all?

So to avoid the script waiting for it, I applied a timeout,

Thus I chose another approach like this:

var waitTimer = 0;
var lodTmout  = 2000;
function chkDataLod(){
    var bigDiv = $pH(document).find('#bigDiv');
    if(bigDiv.length > 0){//find if bigDiv has content
        bigDiv.ready(function(){//wait for bigDiv to load it's contents completely
            //some code here
        });

    }else{
        //chk for bigDiv after every 500 msec for 2000 msec
        if(waitTimer === lodTmout){
            return false;
        }else{
            waitTimer += 500; 
            setTimeout('chkDataLod();',500);
        }      
    }
};

function _init(){
    chkDataLod();
}

_init();

Initially I tried to see if bigDiv's content length is more than zero. The problem occured when 'incompletely loaded' bigDiv was being displayed. So I again added the .ready() function. I have some animation functions on that bigDiv which I don't want to initiate until it is completely loaded.

This bigDiv is loaded from CDN so load timings are varying. One day it took almost 5 seconds for it to load. Seeing my own approach I know it has problems. I am using setTimeout and ready, both. But I am unsure of how ling ready waits. I tried to see it's documentation but couldn't find it clearly.

How can I solve this for the specified situation??

Upvotes: 4

Views: 461

Answers (3)

mikul
mikul

Reputation: 536

try to add at very first line of script tag 

var d = new Date();  console.log(d.getTime());

add same thing after jquery ready function and see

compair this time with page load time

and you will notic that ASA the last image load it run the very next milisecond

Upvotes: 0

Cheery
Cheery

Reputation: 16214

The easiest way is to run your code just after the closing tag of your element. Like this

<div id='bigDiv>....</div>
<script>
// do whatever you want to do with div
</script>

ps: or you may try to access any element after the div with some interval. if it exists - your div is ready.

Upvotes: 1

kleinohad
kleinohad

Reputation: 5912

It depend on how fast is the client internet is, how big is the content in bigDiv, and how fast is the client computer.

Upvotes: 0

Related Questions