Question

I have a few very simple jQuery functions running after the document is ready. For example:

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

I use this because Magento’s TinyMCE editor constantly throws in annoying <br />‘s if you have any whitespace leftover. This works great but obviously while the page is loading I have to look at the ugly content with all the <br />s in it, then it flashes and executes the function which is even more distracting.

Is there a way to prevent this or should I be hiding the content until it is loaded as similar articles on the subject suggest?

Answer 1

…should I be hiding the content until it is loaded…?

Yes. You might want to preserve the space in the layout to avoid an annoying “jump” too.

CSS:

div.str {
    visibility: hidden;
}

JS to be placed right after the div, or right before the closing </body> tag:

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