$(document).ready() not firing when calls in head.ready()

Question

I have an issue using jQuery $(document).ready and headjs framework v1.0.3, with the head.ready functionality, only on Internet Explorer (version 11, I can't try on an older version), and only once in ten...

Just before the </body> I have :

head.load('//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js',function() {
    head.load('//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js');
    head.ready(function() {
        $(document).ready(function() {
            $('.class').show();
        });
    });
});

And some times, the $(document).ready event is not triggered. It works fine on Chrome and Firefox.

$(window).load doesn't work better.

I've try to put the head.ready() out but in vain :

head.load('//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js',function() {
    head.load('//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js');
});
head.ready(function() {
    $(document).ready(function() {
        $('.class').show();
    });
});

I find a solution using head.ready instead of $(document).ready, but I can't use this solution because the part in the head.ready(function() {...}); comes from a code shared with platforms not using headjs.

Is anyone ever encountered this problem or have a solution ?

Answer 1

My guess is that there is a race condition. You may wish to check whether the document is already in a ready state in head ready, since document.ready won't fire

head.ready(function() {
  var readyfunc = function(){
     $('.class').show();
  };

  if (document.readyState === 'complete'){
    readyfunc();
  }else{
    $(document).ready(function() {
      readyfunc();
    });
  }
}

See if that works.