代码之家 › 专栏 › 技术社区 › Andy

jquery的页面加载效果

loading jquery

1

Andy · 技术社区 · 16 年前

有没有一种方法可以在页面加载时使用jquery(或其他方法)来显示加载div?

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

我听说过用于jquery的loadmask插件-这是否适合我的需要,如果没有其他选择的话?

如果相关的话,加载此表时不会进行AJAX调用。

安迪

4 回复 | 直到 16 年前

1

tvanfosson 16 年前

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

0

Shrewdroid 16 年前

我希望这个链接能对你有所帮助……(因为我相信你不想使用ajax)

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

谢谢

3

0

fredrik 16 年前

不知道这是不是你要找的,但你可以只显示一个,说“加载”和表排序插件时,在准备好。显示表并隐藏加载div。这种方法有一些优缺点。

1.真正易于实施。 2.加载div将一直显示,直到tablesort完成。我不知道tablesort,但因为它是客户机代码,所以很有可能是这里的问题。

欺骗: 1.如果加载时间过长是由于服务器响应请求所花费的时间过长,则这对您没有帮助。那么您最好使用AJAX解决方案。看看特凡福森的回答。

…弗雷德里克

4

0

Chris Lercher 16 年前

我会尝试以下方法:

作为身体中的第一个孩子,插入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";
});

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