CODEWITHSUNDEEP
javascriptjqueryhtml
Howesy
Howesy

Reputation: 21

Update HTML5 page text before render

I've written a small HTML5 page that I need to be able to support multiple languages. I've implemented the language control by making the page load a JSON file into memory (in the HEAD) and then running a jQuery command to change the text of any element as required.

Everything works fine except that as the change is being called post render (if the document ready function) there is a slight flash as the language gets changed.

Is there an event that is called before the page is rendered but after the DOM is available? If not, are there any suggestions to change implementation.

Cheers..

UPDATE

I've found a few answers to this on other sites. The general consensus appears to be that this isn't possible as most browsers render as they parse. The workaround that is suggested is to hide (display:'none') the body in script and then show it (display:'') after the updates in the document ready function. It sort of works for me although isn't 100% perfect.

Upvotes: 0

Views: 481

Answers (2)

Mister Epic
Mister Epic

Reputation: 16743

Sounds like you are having an issue with FOUC (Flash Of Unstyled Content)

There are a few ways to get around it. You could add this to your body:

<body class="fouc">

And then have this CSS:

.fouc{display:none;}

And finally this script:

$(function(){
      $('.fouc').show();
});

This works by initially hiding the page, and then once you are ready, turning it on with javascript. You may need to ensure your manipulation occurs ahead of the $('.fouc').show(); call.

Upvotes: 1

designosis
designosis

Reputation: 5263

One effective solution, though not the one you are probably looking for, is to use OUTPUT BUFFERING ... What is output buffering?

Upvotes: 0

Related Questions