页面加载时的进度图像 [英] Progress image while page is loaded

问题描述

在我继续之前:

1. 我知道以前已经做到过.
2. 在决定发布此内容之前，我已经搜索了此内容...

说，我注意到在某些浏览器中设置了每次访问页面时都清除缓存的设置时，页面的某些部分会延迟显示.我希望有一个功能可以显示一些动画图像，直到页面完成100％加载为止.

Said that, I noticed that in some browsers that have settings to clear cache on every visit to a page, certain parts of my page show with delay. I would like to have a function that will display some animated image until the page is finished loading 100%.

我想一次将其放置在我的标头包含文件中，并在每次页面加载时将其插入.我想我需要在AJAX中实现它.我希望此功能是独立的，即不绑定任何其他功能.我可以使用jQuery吗?由于jQuery本身需要加载外部文件，因此我应该将其实现为简单的JS函数吗?

I would like to place it in my header include file once and have it kick in every time a page loads. I think I need it to be implemented in AJAX. I would like this function to be a stand-alone, i.e. not tied to any other functions. Shall I use jQuery? Since jQuery itself requires loading an external file, should I implement it as a simple JS function?

任何反馈将不胜感激.例子将是无价的.

Any feedback would be highly appreciated. Examples would be priceless.

:)

我发现了一个插件可以满足我的需求.

I found a plug-in that does exactly what I need.

推荐答案

使用jquery，您可以执行以下操作

With jquery you can do something like this

html

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

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

您可以将div装入一个加载器(将其固定或固定，随便您喜欢什么)，然后使用$(window).load(callback);您可以检测到整个页面何时完成加载，从而可以隐藏加载器.

You can incldue a div with a loader (have it fixed, or absolute, whatever you like) and then with $(window).load( callback ); you can detect when the whole page has finished loading so you can hide the loader.

或者使用纯JS，您也可以这样做

Or with pure JS you can do the same,

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

这篇关于页面加载时的进度图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！