Question

继续之前：

我知道之前已经做过。
在决定张贴此内容之前，我搜索了这个......

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

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

任何反馈意见都将受到高度赞赏。例子是无价的。

:)

编辑：

我发现plug-in完全符合我的需要。

Answer 1

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

HTML

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

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

你可以用一个加载器（有固定的，或者绝对的，你喜欢的任何东西）然后使用$（window）.load（callback）;您可以检测整个页面何时完成加载，以便隐藏加载程序。

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

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

Answer 2

您可以使用onLoad属性。做类似的事情：

<body onLoad='showLoadingDiv()'>

并使showLoadingDiv函数显示带有加载符号的整页白色div。

另一个（可能是首选的）选项是

<div style='background:white; width:100%; height:100%'>LOADING</div>

并在页面完全加载后立即隐藏，即在jQuery的$(function() { });

下

Answer 3

This page包含一些要使用的AJAX进度图像。

Answer 4

<html>
 <head>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
   <script type="text/javascript">
      //window.onload will wait for images
      window.onload = function() {
        //find element with id='progress' and hide it
        $('progress').hide();    
      }
    </script>
  </head>
  <body>
    <img id="progress" src="https://forums.embarcadero.com/servlet/JiveServlet/download/2-21014-135909-1751/progress2.gif" style="display:show;">

    <h1="">This is a solar eclipse</h1>
    <img src="http://www.zam.fme.vutbr.cz/~druck/eclipse/Ecl2008m/Tse2008_1250_mo1/Hr/Tse2008_1250_mo1.png" width="50%" style="display:show;">
    <p>Pretty and large enough to have to wait for</p>
  </body>
</html>

我希望这会有所帮助

加载页面时的进度图像

4 个答案: