在加载整个网站之前’加载’div

在加载所有文件（图像，脚本，js文件）时，有没有办法显示加载DIV？

实际上我认为它可以用jQuery / AJAX完成，但我不确定因为我还没有找到任何解决方案。

Google Adwords就是一个很好的例子（对于那些拥有帐户的人而言）。

我的脚本有很多图像和js文件，如果你问我，其中一些很重，所以当我加载时我想向用户展示一些东西。

注意：我不认为SetTimeout是完美的解决方案，因为它不是真正的工作 – 它只是模拟它。

Answer 1

jQuery有几种方法可以处理这个问题。 我认为最简单的方法是创建一个

并使用高z-index覆盖您的页面。 然后，使用

  $(window).load(function() { $('#loading').hide(); }); 

在文档完全加载时隐藏它。

注意：这不一定要等到所有javascript方法都完成处理。 它将在从服务器接收到图像，JS文件等之后触发。 但是，如果你有一个繁重的JS方法来处理页面（例如，在div中包装每个单词然后对此进行复杂的算法），那么你需要在该方法的末尾插入一个隐藏加载对话框的回调。

Answer 2

我通常使用以下方法：放置2个div：一个容器和一个加载div。 装载div应该具有位置：固定在css中并使其占据100％的宽度和高度。

在加载时，我会添加：

 $("#container").load(url, myFunction); 

其中“url”是应该注入容器div的HTML 片段 （不是完整页面）的路径。 myFunction是一个函数指针，应该包含这样的东西：

 $("#loading").fadeOut(500); 

这会使加载div淡出500 ms。

确保你调用$（document）.load（）而不是$（document）.ready（），因为ready会在加载图像之前触发。