How to detect when mathjax is fully loaded?

Question

Is there anyway to identify when the mathjax is fully loaded to process mathematics. I need to hide my mathematics equations before mathjax is fully loaded and show 'loading' message in mean time.

Answer 1

For those who might be looking for the answer, this is the response i got from Mathjax developer

The way to synchronize with MathJax's startup actions it to register a StartupHook that will fire when the startup is complete. For example, you can use

MathJax.Hub.Register.StartupHook("End",function () { ... your startup code here ... });

at the end of the tag that configures MathJax, or in a separate tag just after loading MathJax if you are using the default MathJax configuration file in MathJax/config/MathJax.js. That should let you hook into MathJax's initialization sequence so you can do your own setup at the right time.

Thanks David

Answer 2

If you have Jquery loaded you can use getScript()

var mjaxURL  = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML,Safe.js';
// load mathjax script
$.getScript(mjaxURL, function() {
    // mathjax successfully loaded, let it render
    MathJax.Hub.Queue(["Typeset", MathJax.Hub, 'c'+parentid+'_list']);
});

Answer 3

I'm not totally sure when the pageReady callback is called, but my current solution is:

window.mathjax_loaded = false
MathJax = {
  startup: {
    pageReady: () => {
      console.log('Running MathJax');                                                                                                                             
      window.mathjax_loaded = true // PUT YOUR CODE HERE
      return MathJax.startup.defaultPageReady();
    }
  }
};
const func = () => {
  if( window.mathjax_loaded ) {                                                                                                                                           
    // do something only if mathjax is loaded
  }
}