ajax-loader.gif仅在目标页面上可见，但在起始页面上不可见

Question

我想立即使页面背景变暗并在链接点击上显示加载图标。背景正确变暗，但不显示加载图标。我找不到原因。

JS在链接点击时将“loading”类添加到body标签（onclick =“addLoading（）”）：

function addLoading() {
    document.body.className += ' ' + 'loading';
};

CSS：

body {
    -webkit-transition: background-color 1s;
    transition: background-color 1s;
}
html, body { min-height: 100%; }
body.loading {
    background: #333 url('http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif') no-repeat 50% 50%;
    -webkit-transition: background-color 0;
    transition: background-color 0;
    opacity: 0;
    -webkit-transition: opacity 0;
    transition: opacity 0;
}

它工作正常，只有ajax-loader.gif不可见。只有黑暗的背景。

在目标页面上，它可以正常工作（最初加载带有加载图标的黑暗背景，并在页面加载完成后立即显示页面内容）：

var body = document.getElementsByTagName('body')[0];
var removeLoading = function() {
    setTimeout(function() {
        body.className = body.className.replace(/loading/, '');
    }, 3000);
};
removeLoading();

CSS：

the same as above