Safari在卸载页面之前更改dom [英] Safari change dom on before unload page

问题描述

在网站上切换页面时，我不会显示加载程序.因此，我在HTML中定义了一个加载器:

I wan't to show a loader when I switch page on my website. So I define a loader in my HTML:

<div class="ajax-loader"><i class="icon-spin5"></i></div>

在我的CSS中:

.ajax-loader {
    z-index: 1;
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    color: white;
    opacity: 0;
    pointer-events: none;
    transition: all ease-in-out .25s;

    i {
        display: inline-block;
        font-size: 80px;
        width: 80px;
        height: 80px;
        animation: spin 3s linear infinite;

        @media @step1, @step2 {
            font-size: 2em;
        }
    }

    &.active {
        opacity: 1;
    }
}

在我的JS中:

$(document).ready(function() {
    // loader on page change
    window.onbeforeunload = function(e) {
        // show ajax loader
        $('.ajax-loader').addClass('active');
    };
});

在IE，Firefox，Chrome等系统中一切正常，但在Safari(Mac + iOS)中却没有.

All is fine, in IE, Firefox, Chrome... but not in Safari (Mac + iOS).

有什么想法吗?
谢谢！

Any idea ?
Thanks !

推荐答案

document.pagehide 可能适用于Safari.

Probably document.pagehide will work for Safari.

document.pagehide = function(e) {
    $('.ajax-loader').addClass('active');
};

这篇关于Safari在卸载页面之前更改dom的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！