Question

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

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

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

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

提前致谢安迪

Answer 1

我认为实现这一目标的最简单方法是使用AJAX。你需要两个方法（脚本）。第一个会加载带有加载图像的初始页面和一些javascript来调用第二个方法。第二种方法将返回表的HTML和javascript（在body元素中，而不是head中）来调用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>

Answer 2

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

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

感谢

Answer 3

不知道这是不是你想要的，但是你可以只显示一个说“正在加载”以及当tablesort插件准备好的时候。显示表并隐藏加载div。这种方法有一些缺点和优点。

优点： 1.真正易于实施。 2.加载div将显示，直到tablesort完成。不知道tableort，但由于它是客户端代码，因此保留的可能性很大。

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

..弗雷德里克

Answer 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";
});

我现在无法测试，我希望它没有太多错误...

使用jquery加载页面效果

4 个答案: