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

【问题标题】：Show loading graphic when browser is moving to different page当浏览器移动到不同页面时显示加载图形
【发布时间】：2016-02-19 13:29:48
【问题描述】：

我想在用户加载离开页面时显示加载 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。

【问题讨论】：

您可以使用 iframe 并在新内容加载时保留图形，这样会更准确。我知道 iframe 已被弃用，但它对谷歌来说已经足够好了，所以我认为这里已经足够好了。
“但这需要时间” – 是的，不到一毫秒……$('a').on('click', …) 或 $('body').on('click', 'a', …)
使用 unload 或更确切地说是 beforeunload 事件，就像使用负载一样。

标签： javascript jquery html css

【解决方案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()

【讨论】：

这是一个糟糕的 "answer" 示例 - 详细说明您要说的内容

【解决方案2】：

试试这个

$(document).ajaxStart(function() {

  $("#loading").show();
});

$(document).ajaxComplete(function() {
$("#loading").hide();
});
});

CSS

.wait {
  top: 100px;
  z-index: 2000;
  height: 100%;
  width: 100%;
  vertical-align: bottom;
  position: relative;
}
.loader {
  background-position: center center;
  z-index: 1000;
  height: auto;
  width: 100%;
  position: absolute;
}
.loaderimg {
  height: 100%;
  width: 100%;
}

HTML

<div id="loading" class="loader">
  <h2 class="text-center wait">Loading results, please be patient</h2>
  <img class="loaderimg" src="img/scr_01.gif" />
</div>

【讨论】：

我想你不明白。我目前有一个加载图像，但我也想显示一个加载图像。