search

xeoncross / jr

Jr. the static, static javascript site generator (you should see this)
Other
759 stars 39 forks source link

flash of original text #3

Open bmuller opened 10 years ago

bmuller commented 10 years ago

You should load the JS first, hide the body, then render, then show the body - so you don't see the flash of the plain text on load.

rileytg commented 10 years ago

+1 for @bmuller's solution

JAStanton commented 10 years ago

He could have a style node with * { display: none } which works on text nodes like the one he has on his page. This way he wouldn't have to have wrap his text node with an ugly nasty extra element node :wink: . Also if you wanted to be fancy he could have 

* {
  opacity: 0;
  transition: opacity 0.3s;
}

and javascript could change opacity to 1 when done... nice little fade in.

mikepurvis commented 10 years ago

Simplest solution would be just to move the <script> node to the top of the page; that gives you a lot of flexibility about how to deal with it— for example, you could document.write in a hide-all CSS rule, and also register a handler for the document.load event.

RoyTinker commented 10 years ago

This is also known as a FUOC (Flash Of Unstyled Content) - http://en.wikipedia.org/wiki/Flash_of_unstyled_content

mikepurvis commented 10 years ago

Similar-looking symptom, but very different cause— a FOUC is HTML which is shown without CSS. This is markdown which is shown prior to the Javascript template processing.

sg-s commented 10 years ago

bump.

xeoncross commented 10 years ago

Like @mikepurvis said, moving the <script> tag to the top of the page would probably be the best way to handle this.

The first thing we do when Jr loads is to hide the body, show the spinner, load the rest of the assets, convert to HTML, then show the finalized document.

We could follow @JAStanton's advice and insert another <style type="text/css"> into the page, but I would rather find a non-markup based approach to solve this so we don't have repeat hacks like that on every page.

sg-s commented 10 years ago

if i move the script tag to the top, nothing is rendered -- i just see the markdown. i guess something else is needed too.

leoncvlt commented 9 years ago

Confirm the simply moving <script> to the top is not working. The funny thing is that when trying the jr.js demo, this issue does not occur, but it is present when hosting the demo myself somewhere else.