Javascript 显示微调器直到加载Mathjax，即使使用直接锚URL

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

var-targetSpin；
目标化合物；
$（文档）.ready（函数（）{
变量选项={
线条：13//要绘制的线条数
，长度：28//每行的长度
，宽度：14//线条厚度
，半径：42//内圈的半径
，缩放比例：1//缩放微调器的总体大小
，拐角：1//拐角圆度（0..1）
，颜色：'#000'/#rgb或#rrggbb或颜色数组
，不透明度：0.25//线条的不透明度
，旋转：0//旋转偏移
，方向：1//1:顺时针，-1:逆时针
，速度：每秒1//轮
，轨迹：60//余辉百分比
，fps:20//使用setTimeout（）作为CSS回退时每秒帧数
，zIndex:2e9//z索引（默认为2000000）
，className:'spinner'//要分配给微调器的CSS类
，top:'50%'//相对于父对象的顶部位置
，left:'50%'//相对于父对象的左侧位置
，shadow:false//是否渲染阴影
，hwaccel:false//是否使用硬件加速
，位置：'绝对'//元素定位
};
targetSpin=document.body；
targetHide=document.getElementById（'hide_page'）；
微调器=新微调器（opts）。旋转（targetSpin）；
});
//
//在MathJax完成之前，文档是隐藏的，然后
//此函数运行，使其再次可见。
//
队列（函数（）{
spinner.stop（）；
targetHide.style.visibility=“”；
});

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

例如，通过单击包含URL锚的链接可以看到此问题

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

如果有人能找到解决办法，告诉我就好了

---

感谢您的帮助

使用

定位：“已修复”

。这将使微调器保持在页面中心，无论是否滚动

---

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

尝试在MathJax_预览类上使用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
 }

这里演示

我希望这样能解决你的问题