javascript - 当浏览器移动到不同页面时显示加载图形

Question

我想在用户离开页面时显示加载 gif。我在加载时这样做:

CSS:

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(https://i.imgur.com/Bpa5eIP.gif) center no-repeat #fff;
}

JavaScript:

<script>
$(window).load(function() {
     Animate loader off screen
    $(".se-pre-con").fadeOut("slow");;
});
</script>

HTML:

<div class="se-pre-con"></div>

我可以通过向页面上的每个链接添加 .onClick 来做到这一点，但这需要时间，我想知道是否有更简单的方法在从页面加载时显示 gif。

Answer 1

像处理加载一样观察 unload 事件或 beforeunload 事件!

例如:

$(window).on("unload",function() {
     //your animation here
});

您还可以添加延迟或其他内容，以便动画可以在离开页面之前结束:

var triggered = false;    
$(window).on("unload",function(event) {
    if (triggered === true) {
        return; //this is run automatically after the timeout
    }

    event.preventDefault();
    // your animation here

    triggered = true; // set flag
    setTimeout(function(){$(this).trigger('unload');},1000); //set animation length as timeout
 });

我将这个问题用于我的解决方案:How to trigger an event after using event.preventDefault()