javascript - 加载页面时的进度图像

Question

在我继续之前:

1. 我知道以前有人这样做过。
2. 在决定发布之前，我搜索了 SO ...

话虽如此，我注意到在某些设置为在每次访问页面时清除缓存的浏览器中，我页面的某些部分会延迟显示。我想要一个功能，可以在页面完成 100% 加载之前显示一些动画图像。

我想将它放在我的 header 包含文件中一次，并让它在每次加载页面时启动。我想我需要它在 AJAX 中实现。我希望这个功能是独立的，即不依赖于任何其他功能。我应该使用 jQuery 吗？由于jQuery本身需要加载外部文件，我是否应该将其实现为一个简单的JS函数？

如有任何反馈，我们将不胜感激。示例将是无价的。

:)

---

编辑:

我找到了一个 plug-in这正是我需要的。

Answer 1

使用 jquery 你可以做这样的事情

html

<div id="loader"></div>

$(window).load(function () {
  $("#loader").fadeOut();
});

你可以包含一个带有加载器的 div(让它固定，或者绝对，任何你喜欢的)然后用 $(window).load( callback );您可以检测到整个页面何时完成加载，以便您可以隐藏加载程序。

或者使用纯 JS 你可以做同样的事情，

window.onload = function() {
  document.getElementById('loader').style.display='none';
}