Question

I am trying to perform an ajax.get using jquery within document.ready . But the get seems to block the browser.

a dummy example :
http://jsfiddle.net/gauravshah/HpfXL/

I am trying to perform a get on document.ready , the result would take about 15-17 seconds to be generated on the server. So until then the browser seems to be blocked. for ex the background images do not animate.

Secondly in IE 8 the browser hangs itself until the request is received.

Similar question : Simple ajax call seems to be blocking
Suggesting to use delay for the call , But why to use delay ? I don’t find the solution right.

My actual code : ( not sure if it would be of any help)

$(document).ready(function(){
feat_id = "feat-2222"
$.post('/features/creator/get_existing/'+feat_id, {
        "url":url,
        'path':path,
        'parentURL':parentURL,
        'index':index
    },function(data){
        var new_id = $(data).attr('id')
        $(data).find('.featureLocation').html($(data).find('.featureLocation').html());
        $(obj).replaceWith(data)
    })
});

Answer 1

Arrived at the same solution as posted in the similar question

jQuery(document).ready(function() {
  setTimeout(function () {
   $.getJSON("veryLongRequest", function(json) {
   alert("JSON Result: " + json[0].id);});
  }, 500); // You may need to adjust this to a longer delay.
});

Simple ajax call seems to be blocking