La fonctionnalité JQuery Document.ready clignote au démarrage de la page

Question

J'utilise document.ready de JQuery pour masquer certaines choses de ma page maître MVC. Lorsque la page se charge, cependant, je peux voir les éléments que je supprime flash pendant une seconde avant de disparaître.

Voilà comment je fais:

<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server"> 
    <script type="text/javascript"> 
     $(document).ready(function() 
     { 
      $("#HideDiv").remove() 
     }); 
    </script> 

Comment puis-je me débarrasser de ce clignotement? Je veux que les éléments que je supprime soient partis avant que la page ne soit rendue.

Mise à jour:

Je tiens à souligner que je fais cette dynamique, cachant certaines choses sur certaines pages. HideDiv était juste un nom d'exemple que j'ai donné, peut-être un pauvre.

Par exemple, j'ai une barre de menu en haut qui a des liens vers diverses pages. Je veux supprimer le lien vers une page lorsque l'utilisateur est sur cette page. Plutôt que d'ajouter manuellement seulement les liens voulus sur chaque page, je les ai tous dans la page maître, et je cache juste ceux que je ne veux pas montrer sur la page.

Apparemment document.ready n'est pas le moment de le faire? Quel pourrait être un meilleur moyen d'accomplir cela?

Answer 1

au lieu de supprimer utiliser fadeOut() ou hide();

$("#HideDiv").remove(); // remove completly removes from dom 

ceux ci-dessous donne effet lisse

$("#HideDiv").fadeOut(); 

$("#HideDiv").hide() 

Answer 2

Si vous masquez les éléments initally en utilisant CSS, ils ne seront pas représentés:

<style type="text/css"> 
#HideDiv { display: none; } 
</style> 

Si cela est impossible, vous pouvez mettre une balise de script immédiatement après l'élément:

<div id="HdeDiv">...</div> 
<script type="text/javascript"> 
$('#HideDiv').remove(); 
</script> 

Answer 3

Votre JavaScript ne sera pas exécuté jusqu'à ce que la page soit chargée - c'est ce que fait $ (document) .ready().

Mais pourquoi ne pas cacher la div en utilisant css? Comme ceci:

<style type="text/css"> 
    #HideDiv 
    { 
     display: none; 
    } 
</style>