当用户等待时正在进行大量数据库和第 3 方 cURL 查询时,我需要一个进度轮来显示。
进度轮应该立即自行显示,还是应该在页面模板(但不是内容)加载后显示它?
我应该显示进度轮,直到页面的 HTML/javascript 加载完成,或者 PHP 加载完成吗?
如果您可以用原始代码展示大多数人是如何做到这一点的,那就太好了。 我正在使用 jQuery,这是一个 PHP 网站。
显示进度条,直到 php 响应(返回值可能是 HTML 之一)未加载到 javascript 中。
“我应该显示进度轮直到 页面的 HTML/javascript 已完成 加载,或者当 PHP 完成时 正在加载?”
同意这种方法
加载完成后,使用jquery隐藏加载并将内容放入容器类中。
<div class="loading"></div>
<div id="container"></div>
$('.loading')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
这是一种非常常见的技术,而且过程相当标准。 仅当即将发出请求时您才需要显示图形。 这意味着在 CSS 中将图形设置为不显示。 出于兼容性和可感知的性能原因,这明显优于使用 JavaScript。
您可以在此处看到我创建了一个加载图形,添加到 jQuery 中,并绑定了一个异步事件以在任意单击时发生。 该图形在连接建立之前显示,然后在请求完成时隐藏。 您使用完整以防响应错误。
<head> <style> .slider { display: none; }</style> </head>
<body>
<div class="slider"><img src="someslidergraphic.gif"></div>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
jQuery(function($) {
// The animation slider cached for readability/performance
var slider = $(".slider");
// Arbitrary event
$("body").bind('click', function() {
// Show graphic before ajax
slider.show();
// Fetch content from PHP
$.ajax({
// Setings
...
'complete': function() {
// Hide during complete
slider.hide();
// Rest of code after request
...
}
});
});
</script>
</body>