在加载主页时运行 ajax

Question

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

问题是，当主页加载报告时，我无法使用 jQuery 来 $.post 或 $.get 。

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

有什么办法解决这个问题吗？我尝试将其全部放入 iframe 中，但这不起作用。 （我正在使用 firebug 和 http live headers 监控流量。）

Answer 1

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

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

对于进度条，请查看 jQuery UI 进度条。也就是说，该手册提出了这样的观点：

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

因此，如果是这种情况，我会推荐一个动画旋转图像或带有适当消息的此类图像，例如：

$(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 代码。