显示 Spinner 直到 Mathjax 加载甚至直接锚 URL

Question

我的问题有点棘手。目前，我会显示一个微调器，直到 Mathjax 方程加载到我的 HTML 页面中。为此，我这样做：

<script type="text/javascript">

var targetSpin;
var targetHide;

$(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
};

targetSpin = document.body;
targetHide = document.getElementById('hide_page');
spinner = new Spinner(opts).spin(targetSpin);  
});

</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 () {
    spinner.stop();
    targetHide.style.visibility = "";
  });
</script>

现在，我的问题是获得相同的行为，但 URL 包含锚点。

您可以通过单击 link 来查看此问题，该 link 包含指向 URL 的锚点。

在这种情况下，您不会在 HTML 内容显示之前看到微调器：我想解决这个问题，但我不知道如何实现它。

如果有人能看到解决方案，告诉我就好了。

感谢您的帮助

Answer 1

使用position: 'fixed'。这将使微调器保持在页面的中央，无论它是否滚动。

第二个示例中出现了微调器，但它绝对位于页面顶部。

Answer 2

尝试在 MathJax_Preview class

上使用 CSS 加载程序

CSS 片段

.MathJax_Preview {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url(https://anishmprasad.com/images/loader.gif);
  background-repeat: no-repeat;
 }
 math{
   display:none
 }

演示jsfiddle这里

希望这样可以解决你的问题

显示 Spinner 直到 Mathjax 加载甚至直接锚 URL

Displaying Spinner until Mathjax loaded even with direct anchors URL

html

javascript

jquery

spinner

mathjax