jquery的页面加载效果答案

【问题标题】：Page loading effect with jqueryjquery的页面加载效果
【发布时间】：2010-05-19 19:57:05
【问题描述】：

有没有办法在页面加载时使用 jquery（或其他方法）来显示加载 div？

我有一个使用 PHP/MySQL 填充的表，可以包含数千行。然后使用 jquery 的 tablesorter 插件对其进行排序。一切正常，但是页面有时可能需要 4-5 秒才能完全加载，如果在 div 中显示“正在加载...”消息，该消息会在加载整个表格时自动消失。

我听说过 jquery 的 loadmask 插件 - 这是否适合我的需要，如果没有其他选择？

如果相关，则在加载此表时不会进行任何 AJAX 调用。

提前致谢安迪

【问题讨论】：

标签： jquery loading

【解决方案1】：

我认为最简单的方法是使用 AJAX。您需要两种方法（脚本）。第一个将加载带有加载图像的初始页面和一些javascript来调用第二个方法。第二种方法将返回您的表格的 HTML 和 javascript（在正文元素中，而不是头部）以调用 tablesorter。 javascript 将调用第二种方法，获取 HTML，并将其插入页面，替换加载消息。

例子：

 <script type="text/javascript">
     $(function() {
         $.get( '/example.com/secondmethod.php', function(html) {
               $('#loadingImage').replaceWith( html );
         });
     });
 <script>

 <div id="doc">
     <img id="loadingImage" src="/example.com/images/loading.gif" alt="Loading..." />
 </div>

【讨论】：

【解决方案2】：

我希望这个链接可以对你有所帮助..（因为我相信你不想使用 ajax）

http://forums.codecharge.com/posts.php?post_id=85584

谢谢

【讨论】：

【解决方案3】：

不知道这是否是您所追求的，但您可以只显示“正在加载”以及何时准备好 tablesort 插件。显示表格并隐藏加载 div。这种方法有一些优缺点。

优点： 1.真正容易实现。 2. 加载 div 将显示，直到 tablesort 完成。不了解 tablesort，但由于它是客户端代码，因此很可能会出现问题。

缺点： 1.如果加载时间长是由于服务器响应请求需要很长时间，这对您没有帮助。那么你最好使用 AJAX 解决方案。请参阅 tvanfosson 的回复。

..弗雷德里克

【讨论】：

【解决方案4】：

我会尝试以下方法：

作为身体中的第一个孩子，插入 div 元素，如：

<body>
    <div id="loading">Loading...</div>
    ...

适当地设置样式，例如：

#loading {
   position: fixed;
   top: 1em;
   left: 1em;
   z-index: 1; /* or a larger number */
   ...
}

然后使用下面的jQuery：

$(document).ready(function() {
    $("#loading")[0].style.visibility = "hidden";
});

我现在不能测试这个，我希望它没有太多的错误......

【讨论】：