D
Daz
Hi everyone.
I am trying to create a progress bar that can be updated whilst a for
loop is running, which will keep the user informed as to the progress
of the activities running on the page as it's loading.
The trouble is that it doesn't seem to update the values on-the-fly.
Instead, it only displays "100%" when the page has loaded. My page
will receive some data from the server (using Ajax), and then use a
for loop to format the data and display it. Below is a quick example
of what I am trying to do, but it's NOT the actual code. The code
works in a very similar fashion, but attempt to update the value of
the progress bar and incremental stages.
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var output = document.getElementById('output');
for (var i = 0; i < 10000; i++)
{
output.innerHTML = (i+1);
}
}
</script>
</head>
<body>
<span id="output"></span>
</body>
</html>
In case some of you are stressing about my use of innerHTML, I'd like
to point out that I have used it here for simplicity and breivity. In
the code itself, I have used a textNode, and I am trying to update the
value of it, but to no avail.
I know that what I am looking to do is possible, as I have seen it
done in the past, I am just not sure how it's done. I have also tried
using setTimeout() to update the value, with a delay of 10 ms, but
this doesn't work either, until the script has finished.
I would seriously appreciate any input anyone may have to offer.
Many thanks, and all the best.
Daz.
I am trying to create a progress bar that can be updated whilst a for
loop is running, which will keep the user informed as to the progress
of the activities running on the page as it's loading.
The trouble is that it doesn't seem to update the values on-the-fly.
Instead, it only displays "100%" when the page has loaded. My page
will receive some data from the server (using Ajax), and then use a
for loop to format the data and display it. Below is a quick example
of what I am trying to do, but it's NOT the actual code. The code
works in a very similar fashion, but attempt to update the value of
the progress bar and incremental stages.
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var output = document.getElementById('output');
for (var i = 0; i < 10000; i++)
{
output.innerHTML = (i+1);
}
}
</script>
</head>
<body>
<span id="output"></span>
</body>
</html>
In case some of you are stressing about my use of innerHTML, I'd like
to point out that I have used it here for simplicity and breivity. In
the code itself, I have used a textNode, and I am trying to update the
value of it, but to no avail.
I know that what I am looking to do is possible, as I have seen it
done in the past, I am just not sure how it's done. I have also tried
using setTimeout() to update the value, with a delay of 10 ms, but
this doesn't work either, until the script has finished.
I would seriously appreciate any input anyone may have to offer.
Many thanks, and all the best.
Daz.