导航到其他页面时显示加载程序

Question

我想在点击另一个页面导航的锚标记时显示加载器/微调器

我试过的东西：

1. 
window.addEventListener('pagehide', function (event) {
    $('.ajax-loader-container').show();
});

2. 
window.addEventListener('DOMNodeInserted', function (e) {
    $('.ajax-loader-container').show()
});

3.
document.addEventListener('readystatechange', function(e) {
    var current_state = document.readyState
    if (current_state == 'interactive') {
        $('.ajax-loader-container').show()
    }  else if (current_state == 'complete') {
        $('.ajax-loader-container').hide()
    }
});

2&3 有效，但加载器在加载 html 后出现延迟

我不能使用

beforeunload

因为它在Safari和iphone中不起作用

Answer 1

您可以尝试的一种方法是将点击事件处理程序绑定到锚标记，并在页面导航开始之前显示加载器/微调器。您可以使用 jQuery 执行此操作，如下所示：

$(document).ready(function() {
  $('a.show-loader').click(function() {
    $('.ajax-loader-container').show();
  });
});

然后，在您的 HTML 中，将 show-loader 类添加到要为其显示加载器/微调器的链接：

<a href="page2.html" class="show-loader">Page 2</a>
<a href="page3.html">Page 3</a>

使用这种方法，加载器/微调器将在点击链接后立即显示，然后页面导航开始。