Flickering in rendering MathJax pages

[Kwankyu Lee]

Hi,

Thank you for the great work.

One annoyance of a MathJax-enabled page is the initial flickering of
the page at the loading time. I can see for a short time the source
(TeX) code of the maths in the page, and then the source codes are
converted to the rendered maths.This causes a short flickering. This
is perhaps normal. But it would be very nice to expose just the
completely rendered page, hiding the source codes. Is this possible?
Is there any simple trick to effect this?


Kwankyu

[Davide P. Cervone]

The flickering you see is the normal operation of MathJax. Since
MathJax operates on the page after it is loaded, the page will show
the original TeX markup before MathJax runs, and then it will convert
the TeX to displayed math. That does involve changes to the page,
which you see as the flickering.

Since MathJax doesn't run until after the page displays, the only way
to avoid this would be for you to pre-arrange for the math not be be
displayed, and then wait for MathJax to run, and then display the
math. One way to do this would be to have the BODY element styled
with visibility:hidden, and then use

<script>
MathJax.Hub.Queue(function ()
{document.body.style.visbility="visible"});
</script>

after MathJax.js has been loaded. This will hide the entire page
until MathJax has finished running.

This is only effective if you have page with very little math and not
many other resources that have to be loaded, as the page will remain
blank until ALL the images and other content are loaded. That may not
be acceptable on larger pages with lots of graphics, for example.

Davide

[din]

tried it but still seeing the flicker

[Davide P. Cervone]

Can you give me a URL to the page that you are developing? (You can
send one to me directly via email if you don't want to post one
publicly.)

Are you sure you used visibility:hidden for the BODY element? Did the
page show up immediately, or was it hidden for a time and then showed
up?

Try

<script>
MathJax.Hub.Queue(
["Delay",MathJax.Hub,2000],
[alert,"Still hidden?"],
function () {document.body.style.visibility = "visible"}
);
</script>

which will give a 2 second delay before showing the page, and showing
an alert before the page goes visible. This is just to see if the
visibility:hidden is working, and is not a proposed solution to your
problem.

Davide

[Kwankyu Lee]

Hi Davide,

Thank you for the tips. It works! I am sorry for very late reply.


Kwankyu