Avoid cascade div showing with javascript-jquery code

Question

my page does a simple verification if javascrit and cookies are enabled on client browser. If yes, script shows div id="conteudo" (page content) and hide div id="aviso" (a kind of warning to enable features or reinstall browser in order to proceed). If not, script keep div id="aviso" visible and hide div id="conteudo".

On my offline project all is working perfectly but on server that page seems to load a bit slow, when some of the conditions of script occurs (javascript or cookies disabled) I can see div id="aviso" for a fraction of second before desapear. Its not a good experience as I planned. Anyone know how can I fix this in my code? Thank you.

var JS_Habilitado = false;
var C_Habilitado = false;

$(document).ready(function()
{
  //Teste do JavaScript (se entrou aqui, está habilitado).
  JS_Habilitado = true;
  //Teste dos cookies.
  var TEST_COOKIE = 'test_cookie';
  $.cookie(TEST_COOKIE, true);
  if ($.cookie(TEST_COOKIE))
  {
    $.cookie(TEST_COOKIE, null); //deletar o cookie.
    C_Habilitado = true;
  }
  //Avaliação final.
  if (JS_Habilitado&&C_Habilitado)
  {
    $("#aviso").hide();
    $("#conteudo").show();
  }
  else
  {
    $("#aviso").show(); 
    $("#conteudo").hide();
  }
});

Answer 1

After including JQuery hide your elements:

 $(document).ready(function(){
     $("#aviso").hide(); 
     $("#conteudo").hide();
 });

Or in css:

#aviso,#conteudo{display:none}