jQuery Hide-Reposition-Show Bug in Internet Explorer 8

$('.hexLi开发者_运维知识库nk').hide();    //Hides All hexLink elements
renderHexagons();        //Position hexLink elements
positionElements();      //Position elements within hexLink elements
handleEvents();          //Establish events and handlers and Show hexLink elements

My problem with this code in IE8 is that it shows my page's elements for a brief moment, for about half a second. And during that period these elements are unpositioned the way I like them to be and they look quite bad, but after this period they are re-rendered in the position I want them to be. This happens to all elements in my page. I am currently testing this in localhost. Is there anyway I could recode So that this will not happen? Everything looks fine on Chrome though.

You could start the elements off hidden initially, then only show them after they are re-positioned.

Mmm, it's because the time it gets to do all your stuff. No easy solution (other than making your code more efficient).

But, you could, show a loading animation and block the page until all finishes, then unblock, all this using the awesome jquery blockui plugin.

So you'd have:

$(document).ready(function(){
  $.blockUI(); //Starts loading animation
  $('.hexLink').hide();    //Hides All hexLink elements
  renderHexagons();        //Position hexLink elements
  positionElements();      //Position elements within hexLink elements
  handleEvents();          //Establish events and handlers and Show hexLink elements
  $.unblockUI(); //Ends loading animation
});

Hope this helps. Cheers