How to prevent flash of text when using <noscript> alternatives

Question

I am working on a chunk of legacy code for an in-house intranet application that relies on Javascript. I am aware and agree that progressive enhancement and unobtrusive Javascript practices are the preferred approach rather than to rely on it and simply issue a warning to the user if not support for it is available, but this is an in-house legacy application that does not justify the cost of refactoring.

Lately I have run into a few problems with the <noscript> tag, mostly in the form of incorrect markup and styling on some platforms. Recognizing the fact that there is at least talk of making <noscript> a candidate for deprecation and that behavior and styling do not belong in HTML in the first place, I have looked into alternatives.

My first approach was to replace

<noscript>La di da</noscript>

with

<span class="noScript">La di da</span>

and some jQuery code:

$(document).ready(function() {
  $('.noScript').css('display', 'none');
}

This works, but since jQuery has to load along with everything else before $(document).ready() will fire, there is a delay during which the noscript alternative content is visible.

I then replaced the above jQuery code with "old school" Javascript included at the very end of the page (right before </body></html>):

document.getElementById("noScript").style.display = "none";

This works a lot better, but there is still a short delay which causes the noscript content to flash across the screen before being rendered invisible by the Javascript code.

How to prevent this flash of content? Or is there a better way to deal with this? (Other than to refactor all legacy code so as not to require Javascript other than for enhancements, that is, since I do not have that option available to me.)