如何在我的页面加载之前显示进度条?

时间:2014-03-04 18:52:03

标签: php jquery html

我使用php从数据库中获取一些信息,我想显示一个进度条,直到我的php执行,我需要在php执行后显示我的页面。我怎样才能做到这一点。

非常感谢gmail如何加载收件箱

3 个答案:

答案 0 :(得分:2)

答案 1 :(得分:2)

从描述中我不知道这个进度条需要有多深入。这是伪代码,可以帮助您入门。它不会按原样运行......你需要让这些功能做点什么。

示例1:100%客户端检查程序

<script type="text/javascript">
/* in document head */
var section1 = 0;
var section2 = 0;
var section3 = 0;
var section4 = 0;

//lightbox w/ progress meter
showProgressLightBox();

//async ajax calls here to load the various sectoins
loadPage(); // not a real function



function displayProgressMeter()
{
   var count = 0;
   if (section1) count++;
   if (section2) count++;
   if (section3) count++;
   if (section4) count++;

   if (count != 4) {
     displayProgress(count); //will repaint lightbox progress meter
       //based on X of Y sections loaded
       setTimeout('displayProgressMeter()',500);
   }
   else
   {
        closeLightBox(); //page is loaded
   }

}

displayProgressMeter(); //start the event

//note my ajax calls will flip the values of the various variables we are checking


</script>

示例2服务器检查程序。我有一个这样的东西运行一个项目,大约需要30分钟来运行某个活动。通过从cron计划任务更新mysql来更新进度本身

首先,我有一个名为“batchStatusChecker”的PHP文件,如下所示:

<?php
define('AREA',"COLREPORT");
include(__DIR__."/../phoenix/includes/config.php");
session_start();


$batch=(int)@$_REQUEST["batch"];
include (__DIR__."/affiliateUploadClass.php");

$rs=Query("select commitMessage from phx_AffiliateUsersFiles where ID=$batch;");

echo json_encode(array("info" => $rs->Get("commitMessage")));



?>

然后我有一些javascript用当前状态更新div或显示完成消息。如果它更适合您的用例,您可以根据需要调整这样的技术

    function checkStatusOfReport()
    {

        $.post("/affiliateUpload/batchStatusChecker.php", { "batch": <? echo $batch; ?> },
        function(data)
        {
            if (data.error)
            {
                $("#ErrorInformation").html(data.error);
                $("#UploadInformation").remove();
            }
            else
            {
                var msg="<h3>" + data.info + "</h3>";

                $("#UploadInformation").html(msg);

                if (data.info == 'COMPLETE')
                    $("#UploadInformation").html('<h3>The import of this batch is completed.</h3>');
                else
                    setTimeout("checkStatusOfReport()",4000);


            }
        }, "json");

    }

    checkStatusOfReport();

答案 2 :(得分:0)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>Progress Bar</title>
</head>
<body>
<!-- Progress bar holder -->
<div id="progress" style="width:500px;border:1px solid #ccc;"></div>
<!-- Progress information -->
<div id="information" style="width"></div>
<?php
// Total processes
$total = 2;

// Loop through process
for($i=1; $i<=$total; $i++){
    // Calculate the percentation
    $percent = intval($i/$total * 100)."%";

    // Javascript for updating the progress bar and information
    echo '<script language="javascript">
    document.getElementById("progress").innerHTML="<div style=\"width:'.$percent.';background-color:#ddd;\">&nbsp;</div>";
    document.getElementById("information").innerHTML="'.$i.' row(s) processed.";
    </script>';


// This is for the buffer achieve the minimum size in order to flush data
    echo str_repeat(' ',1024*64);


// Send output to browser immediately
    flush();


// Sleep one second so we can see the delay
    sleep(1);
}

// Tell user that the process is completed
echo '<script language="javascript">document.getElementById("information").innerHTML="Process completed"</script>';
?>
</body>
</html>