2

我得到了这个 php 脚本，它生成的报告需要 20 到 30 秒才能完成。我想添加一个进度条，并且我的数据库中的进度更新正确。

问题是我不能使用 jQuery 来$.post或$.get在主页坐在那里加载报告时。

我可以运行 javascript，比如弹出一个窗口，上面写着“请稍候”并显示一个小旋转图标，但 Firefox 在主页加载时拒绝发送 ajax post/get。

有什么办法吗？我尝试将其全部放入 iframe 中，但这并没有奏效。（我正在使用 firebug 和 http live headers 监控流量。）

4

3 回答 3

3

页面加载后，您可以在报告中加载 jQuery，例如：

$(document).ready(function() {
    $('#someDiv').html('<strong>Loading...</strong>')
                 .load('report.html');
});

有关进度条，请查看jQuery UI Progressbar。也就是说，该手册提出了这个合理的观点：

如果无法计算实际的完成百分比状态，则不确定的进度条（即将推出）或微调器动画是提供用户反馈的更好方式。

因此，如果是这种情况，我会推荐带有适当消息的动画微调器图像等，例如：

$(document).ready(function() {
    $('#someDiv').html('<img src="images/spinner.gif"/><strong>This could take a while...</strong>')
                 .load('report.html');
});
于 2009-09-30T17:26:55.603 回答
1

您可能需要考虑elementReady。如果您确保在耗时的报告开始处理之前加载您的 jquery 脚本并写出一部分页面，您可以使用 elementReady 启动某种通知。无需等待整个文档准备好。

我不确定这是否适用于 ui 进度条，但我已将其与thickbox 一起使用以灰显并阻止屏幕输入，直到页面完全加载并且thickbox throbber .gif 作为一项活动运行良好指标。

于 2009-09-30T17:49:58.547 回答
1

添加AJAX页面加载动画效果： 第一步：添加jQuery库

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

第 2 步：添加一些 CSS 以提供酷炫的外观（可选） 第 3 步：添加以下 jQuery

<script>

(function($){

$("html").removeClass("v2");

$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });

$(window).load(function(){

    $("#progress-bar").stop().animate({ width: "100%" },600,function(){
$("#loading").fadeOut("fast",function(){ $(this).remove(); });
});

});
})(jQuery);
</script>

第 4 步：最后，添加 html 代码，随心所欲。

于 2012-08-30T04:40:50.573 回答