显示 Spinner 直到 Mathjax 加载，即使使用直接锚 URL答案

【问题标题】：Displaying Spinner until Mathjax loaded even with direct anchors URL显示 Spinner 直到 Mathjax 加载，即使使用直接锚 URL
【发布时间】：2018-10-09 22:10:12
【问题描述】：

我的问题有点棘手。目前，我会显示一个微调器，直到将 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。

例如，您可以通过单击包含 URL 中的锚点的链接来查看此问题。

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

如果有人能找到解决方案，那会很高兴告诉我。

感谢您的帮助

【问题讨论】：

标签： javascript jquery html spinner mathjax

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

尝试在 MathJax_Preview 类上使用 CSS 加载器

CSS sn-p

.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

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

【讨论】：