使用本机浏览器prev/next按钮时，页面转换挂起

Question

当使用本机浏览器prev/next按钮时，我遇到了一种奇怪的行为。当导航到某个页面并返回到前一个页面时，转换不会消失。它就挂在屏幕上直到我刷新页面。

有趣和令人沮丧的是，它有时工作，有时不在同一设备上。大多数情况下，Chrome (桌面)和移动(iOS，Android)都有问题。如果它在桌面上工作，那么它可能不能在移动设备上工作，反之亦然。我也在我朋友的设备上做了很多测试，正如我所预料的那样，其中一些成功了，有些却没有。

我怀疑一个问题可能是在“在链接点击”部分。但我不知道哪里出了问题。(我希望有人能帮我。

// Wait until the whole page is loaded.
$(window).on("load", function () {
  hideLoad(); // call out animations.
});


// Transitions In
// =================
function revealLoad() {
  $("#page-transition").removeClass("tt-transition-out");
  $("#page-transition").addClass("tt-transition-in");
}

// Transitions Out
// ================
function hideLoad() {
  $("#page-transition").addClass("tt-transition-out");
}

// On link click - I suspect a problem may be in this section
// ==============
$("a").on('click', function(e) {
  e.preventDefault();

  setTimeout(function (url) {
    window.location = url
  }, 1500, this.href);

  revealLoad(); // call in animations.
});

Codepen：https://codepen.io/mrWilson123/pen/VwrXebj

您可以测试它的实时这里。。

Answer 1

这可能对您有帮助，使用$(document).ready(function(){})而不是$(window).on("load", function () {})，因为在加载所有东西之后，您都有一些映像和$(window).on("load", function () {})触发器。

更多解释：https://stackoverflow.com/a/3698214/11143288

Answer 2

看起来下面的代码起了作用。:)

window.onpageshow = function (event) {
    if (event.persisted) {
        window.location.reload();
    }
};

来源：https://stackoverflow.com/a/13123626/2785140

谢谢，@mostafa。:)