直接アンカーでもMathjaxがロードされるまでSpinnerを表示URL

Question

私の問題はややこしいです。今のところ、HTMLページにMathjax方程式が読み込まれるまで、スピンナーを表示します。このため、私は次のようにします：

<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コンテンツが表示される前にスピナーが表示されません。この問題を修正したいと思いますが、それを達成する方法はわかりません。

誰かが解決策を見ることができれば、それは私にそれを伝えるのがよいでしょう。あなたの助け

Answer 1

使用position: 'fixed'ため

感謝。これは、ページがスクロールされているかどうかにかかわらず、ページの中央にスピナーを保持します。

2番目の例ではスピナーがありますが、ページの上部に配置されています。