MathJax - 加载指示器并隐藏 div 直到方程加载答案

【问题标题】：MathJax - Loading indicator and hide div until equations are loadedMathJax - 加载指示器并隐藏 div 直到方程加载
【发布时间】：2016-05-26 16:04:43
【问题描述】：

我尝试在包含 MathJax 方程的页面上实现加载指示器。

在加载方程时，我想显示一个指标加载：我选择了以下指标：spin.js

最初，我只是尝试这样做：

<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>

对于 HTML 部分，我设置了：

<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>

据我了解，函数 MathJax.Hub.Queue 在加载所有 MathJax 方程时被调用。

问题是在处理 MathJax 方程时，我无法在所有页面上显示微调器：它会在方程加载后出现，但在加载期间不会出现。我想知道$(document).ready(function() 是否适合我的情况，因为它会在所有页面（可能还有 MathJax 方程）加载后执行，但我必须放什么呢？。

我使用的指标将一个目标元素作为参数，将微调器作为第一个子元素添加到该目标元素中，并水平和垂直居中；正如您在上面看到的，这是通过放置：

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

很遗憾，在加载 Mathjax 方程时，该指标不显示。

您可以看到我正在处理的相关页面：

page to test

欢迎任何建议，感谢您的帮助。

【问题讨论】：

未来注意事项：cdn.mathjax.org 即将结束生命周期，请查看mathjax.org/cdn-shutting-down 了解迁移提示。

标签： javascript html loading mathjax

【解决方案1】：

您的微调器位于hide_page 元素中，该元素具有visibility:hidden，因此不会显示其内容，包括微调器本身。尝试将微调器添加到document.body。您还需要在 MathJax 完成后停止微调器，因此您需要将 spinner 变量设为全局变量并将 spinner.stop() 添加到您传递给 MathJax.Hub.Queue() 的函数中。

【讨论】：