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方程时调用函数MathJax.Hub.Queue。

问题是我在处理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()的函数中。

MathJax - 加载指标并隐藏div直到加载方程式

1 个答案: