Hiding content until typesetting is complete

In general

From https://groups.google.com/d/msg/mathjax-users/nI1eIEjk-ak/oVyy1nwtboYJ

The issue I face now is that on first load you can actually see it flash the orignal text before the ajax callback executes and MathJax renders the content. Is there a typical approach whereby only the rendered content actually displays? Or is this an expected result of doing this in an ajax call?

It is not unusual for the original text to be visible before MathJax processes it. If MathJax needs to load any components (like its output jax the first time it is used), that is done asynchronously, so the page will be displayed in the meantime until the component is loaded.

You could set the div's visibility:hidden property before loading its contents, and then after it is loaded, typeset the math setting visibility to "" afterward. You would need to use the MathJax.Hub.Queue to synchronize that. E.g.

    $("#DivID").css("visibility","hidden");

    $("#DivID").load('@Url.Action("ActionResultMethod", "ControllerName",{controller parameters})', function () {
      MathJax.Hub.Queue(
        ["Typeset",MathJax.Hub,"DivID"],
        function () {
          $("#DivID").css("visibility",""); // may have to be "visible" rather than ""
        }
      );
    });

might work. I don't use jQuery myself, so don't know if this is correct or not.

for MathML

From https://groups.google.com/d/msg/mathjax-users/pnX0qKlg9fc/KKkBDd05_QkJ

Yes, the browser will try to interpret the MathML when it initially downloads the content, and will display that before MathJax runs. For browsers that understand MathML, it will show the math briefly before MathJax processes it. For those that don't understand MathML, it will display the text content of the various elements, which will produce something like the math, but without the formatting of fractions, roots, etc.

If you want to prevent that, you can use CSS to hide tags:

    <style>
      math {display:none}
    </style>

However, if someone uses the MathJax contextual menu to switch to NativeMML output, that will also be hidden. To get around that, you can ask MathJax to disable this stylesheet if the NativeMML output jax gets used:

    <style id="hide-math">
      math {display:none}
    </style>
    <script type="text/x-mathjax-config">
      MathJax.Hub.Register.StartupHook("NativeMML Jax Ready",function () {
        document.getElementById("hide-math").disabled = true;
      });
    </script>

This must go BEFORE the script that loads MathJax.js itself.

Davide