Question

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

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

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

我的脚本有很多图像和js文件，如果你问我这些文件中的一些非常重，所以我想在所有内容加载时向用户显示一些内容。

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

Answer 1

jQuery有几种方法可以处理这个问题。我认为最简单的方法是创建<div id="loading">并使用高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会在加载图像之前触发。