Question

由于其中的jquery，我的html页面加载有点慢。我想要一个图像告诉用户它正在加载，直到整个页面加载。我该怎么做呢？非常感谢提前。

<script type="text/javascript">
   $(document).ready(function(){
      //my jquery here....

   });
</script>

Answer 1

设计包含已加载消息的页面，以便在从服务器加载页面时，消息已经显示。

然后，使用jQuery，您可以在页面准备就绪后立即隐藏消息：

$(document).ready(function(){
    $('#loadingMessage').hide();
});

Answer 2

http://www.jsfiddle.net/dactivo/m4Bxe/

window.onload = function () {

$("#loading").hide();    

   };

window.onload将等待整个页面加载。 ready()等待DOM准备就绪，这实际上是中等的。

您可以在these jquery docs

中阅读此内容

“虽然JavaScript提供了负载用于在页面执行代码的事件渲染，此事件没有得到触发，直到所有资产如图像已被完全接收。在大多数情况下，可以运行脚本一旦DOM层次结构出现了完全构造。处理程序通过到.ready（）保证是在DOM准备就绪后执行，“

Answer 3

嗯，您可以加载一个显示“正在加载”的图像，然后通过以下操作加载文档脚本的其余部分：

var TM_script = document.createElement('script');TM_script.src = 'http://www.yoursite.com/script.js';document.getElementsByTagName('body')[0].appendChild(TM_script); someFunctionInScript();

或者，您可以只加载图像，然后提交Ajax请求以加载页面的其余部分。您甚至可以尝试在页面顶部执行动画gif或其他图像，一旦文档加载（并且您的脚本激活），删除该图像。

Answer 4

贾斯汀的方法可以解决问题。

确保您正在优化资源的加载方式，例如将脚本放在页面底部，这样它们就不会阻止HTML呈现

http://developer.yahoo.com/performance/rules.html

Answer 5

通过css将背景图像设置为正文，并删除document.ready中的元素

Answer 6

我知道这是一个相当老的线程，但下面的解决方案对我有用，虽然需要jQuery：

首先在body标签后添加：

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

然后将div和image的样式类添加到css：

#loading {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

最后将此javascript添加到您的页面（最好在页面末尾，然后在关闭body标签之前）：

<script language="javascript" type="text/javascript">   
$(window).load(function() {
$('#loading').hide();   }); 
</script>

然后通过样式类调整加载图像的位置和加载div的背景颜色。

这就是它，工作正常。但是当然你必须在某个地方有一个ajax-loader.gif。

尝试AJAXLoad他们有一些很棒的动画GIF .. :)

html页面加载消息

6 个答案: