MathJax

Question

我尝试在包含 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

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

Answer 1

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

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

MathJax - Loading indicator and hide div until equations are loaded

html

javascript

loading