Question

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

问题是，当主页面位于加载报告时，我无法将jQuery用于$.post或$.get。

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

有什么方法吗？我试着将它全部扔在iframe中，但这并不适用于以太。（我正在使用firebug和http live header来监控流量。）

Answer 1

页面加载后，您可以在报表中加载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');
});

Answer 2

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

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

Answer 3

添加AJAX页面加载动画效果：第1步：添加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代码。

在加载主页面时运行ajax

3 个答案: