当前位置：文江博客话题详情

jQuery Loading

jquery的页面加载效果

发布于 2024-09-01 23:35:35 字数 292 浏览 3 评论 0 原文

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

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

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

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

提前致谢安迪

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

意中人 2024-09-08 23:35:35

我认为实现这一点的最简单方法是使用 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>

I think the easiest way to accomplish this would be using AJAX. You'd need two methods (scripts). The first would load the initial page with the loading image and a bit of javascript to call the second method. The second method would return the HTML for your table and the javascript (in the body element, not the head) to invoke tablesorter. The javascript would call the second method, get the HTML, and insert it onto the page, replacing the loading message.

Example:

 <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>

回复收藏 0 原文

游魂 2024-09-08 23:35:35

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

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

谢谢

回复收藏 0 原文

幼儿园老大 2024-09-08 23:35:35

不知道这是否是您想要的，但您可以只显示一个“正在加载”以及何时表排序插件准备就绪。显示表格并隐藏加载 div。这种方法有一些缺点和优点。

优点：
1.真正易于实施。
2. 加载div将显示，直到表格排序完成。不知道表排序，但由于它是客户端代码，因此很可能会出现阻塞。

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

..弗雷德里克

回复收藏 0 原文

梦在夏天 2024-09-08 23:35:35

我会尝试以下操作：

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

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

I would try the following:

As the first child in your body, insert the div element like:

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

Style it appropriately like e.g.:

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

Then use the following jQuery:

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

I can't test this right now, I hope it doesn't have too many bugs...

回复收藏 0 原文

~没有更多了~

关于作者

眼眸里的快感

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

jquery的页面加载效果

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

jquery的页面加载效果

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。