comment éviter que le contenu de jquery clignote lorsque le DOM est en cours de chargement

Question

J'ai quelques fonctions jQuery très simples qui s'exécutent une fois que le document est prêt. Par exemple :

$('div.std br').remove();

Je l'utilise parce que l'éditeur TinyMCE de Magento envoie constamment des messages ennuyeux. <br /> si vous avez encore de l'espace libre. Cela fonctionne très bien, mais évidemment, lorsque la page est en cours de chargement, je dois regarder le contenu moche avec tous les caractères <br /> Il clignote alors et exécute la fonction, ce qui est encore plus gênant.

Existe-t-il un moyen d'éviter cela ou dois-je masquer le contenu jusqu'à ce qu'il soit chargé comme le suggèrent des articles similaires sur le sujet ?

Answer 1

...devrais-je cacher le contenu jusqu'à ce qu'il soit chargé... ?

Oui. Vous pourriez aussi vouloir préserver l'espace dans la mise en page pour éviter un "saut" gênant.

CSS :

div.str {
    visibility: hidden;
}

JS à placer juste après le div, ou juste avant la fermeture </body> étiquette :

<script>
    $("div.str").find("br").remove();
    $("div.str").css("visibility", "visible");
</script>

Answer 2

Avez-vous essayé de cacher ou de coiffer <br /> à l'aide de CSS :

br{ 
  display: none;
}

Étant donné que le fichier CSS est probablement chargé avant le contenu proprement dit, le temps que le contenu soit rendu, l'élément <br /> n'apparaîtront pas au départ, et ne seront donc pas "flashés".

Answer 3

Ajoutez les règles CSS suivantes :

div.std br {
    display: none;
}

Answer 4

La meilleure façon de procéder est de définir simplement l'affichage à none sur l'objet afin que le DOM ne l'affiche pas lors du chargement.

<div id="testdiv" style="display:none">Hello</div>

...
...
...

$(document).ready(function () {
    $('#testdiv').fadeIn(1000);
});

J'ai beaucoup de code dans certains de mes anciens projets qui ressemblent à ceci et qui accomplissent la même chose :

<div id="testdiv" style="visibility:hidden">Hello</div>

...
...
...

$(document).ready(function () {
    $('#testdiv').hide().css('visibility', 'visible');
});

De cette façon, l'image est cachée à l'aide du HTML, puis JQuery la cache (elle est donc cachée de deux façons à ce stade), puis le HTML devient visible, de sorte que c'est juste JQuery qui la maintient invisible dans le DOM à ce stade, puis je l'utilise comme d'habitude.

Answer 5

Je supprimerais les ruptures côté serveur avant qu'elles ne soient ajoutées à la base de données, ou avant que vous ne les retourniez en tant que contenu.