Search code examples
javascripthtmlloadingmathjax

MathJax - Loading indicator and hide div until equations are loaded

I try to implement a loading indicator on a page which contains MathJax equations.

While equations are loading, I want to show an indicator loading : I have chosen the following indicator: spin.js

Initially, I just tried by doing:

<script type="text/x-mathjax-config">
          MathJax.Hub.Config({ TeX: { equationNumbers: {autoNumber: "all"} },
          tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], 
          displayMath: [ ['\\begin{displaymath}','\\end{displaymath}'], ['\\begin{equation}','\\end{equation}'] ],
          processEscapes: true,
          preview: ["[loading...]"],

}});
          </script>

<script type="text/javascript">

$(document).ready(function() {
  var opts = {
  lines: 13 // The number of lines to draw
, length: 28 // The length of each line
, width: 14 // The line thickness
, radius: 42 // The radius of the inner circle
, scale: 1 // Scales overall size of the spinner
, corners: 1 // Corner roundness (0..1)
, color: '#000' // #rgb or #rrggbb or array of colors
, opacity: 0.25 // Opacity of the lines
, rotate: 0 // The rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 60 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)
, className: 'spinner' // The CSS class to assign to the spinner
, top: '50%' // Top position relative to parent
, left: '50%' // Left position relative to parent
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
};

var target = document.getElementById('hide_page');
var spinner = new Spinner(opts).spin(target);
});

          <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

<script type="text/x-mathjax-config">
  //
  //  The document is hidden until MathJax is finished, then
  //   this function runs, making it visible again.
  //
  MathJax.Hub.Queue(function () {
    document.getElementById("hide_page").style.visibility = "";
  });
</script>

and for the HTML part, I have set :

<body>
 <div id="hide_page" style="visibility:hidden">         
  <table>

   <tbody>
     <tr>
      <td class="header_content">
      </td>
     </tr>
   </tbody>
 
   <tbody>
     <tr>
      <td class="body_content">
    
    </td>
    </tr>
    </tbody>
    
    <tbody>
     <tr>
      <td class="bottom_content">
      </td>
     </tr>
    </tbody>    

    </table>
 </div>
</body>

From what I have understood, the function MathJax.Hub.Queue is called when all MathJax equations are loaded.

The problem is that I can't get to show the spinner on all the page while MathJax equations are being processed : it appears once equations are loaded but not during loading. I wonder if $(document).ready(function() is appropriate in my case because it will be executed once all page (and maybe MathJax equations) is loaded but what do I have to put instead?

The indicator that I use takes as argument a target element into which the spinner is added as first child and horizontally and vertically centered; as you can see above, this is done by putting:

var target = document.getElementById('hide_page');
var spinner = new Spinner(opts).spin(target);

Unfortunately, the indicator is not displayed while the loading of Mathjax equations.

Solution

  • Your spinner is in the hide_page element, which has visibility:hidden, so its contents do not show, including the spinner itself. Try adding the spinner to the document.body instead. You will also need to stop the spinner once MathJax has finished, so you will need to make the spinner variable global and add spinner.stop() to the function that you pass to MathJax.Hub.Queue().