Web authoring question. Don't hurt me!

Sorry, it's me again.

I was just wondering if there was a simple way to graphically represent the explorer loading bar on a page?

Animated GIF? Does it need to be accurate, or just an image?

accurate

Perhaps javascript, loading an updated image at certain points of your page load. It could be set on a timer, or you could code it to swap the image at predetermined points. What are you looking to do?

But even the real IE progress bar isn't acurate....

What are you using the bar to signify? Time elapsing or actual loading progress?

If you are using the Explorer DLL (shdocvw.dll) to do the work, then I think it's got hooks to automatically handle the percentage bar. Just a question of interfacing the right controls to the DLL. Have you looked in MSDN?

You could do it with Macromedia Flash but then you force everybody to have to use Flash...

- Trevor

loading updated images at certain points might be possible, but this is for a page that's loading a lot of images already, so it might defeat the purpose. However, that would be a solution I'm willing to go with if possible.

I'm sur ethe actual load bar might be pretty inacurate, but it still does a fairly good job at representing how much \has loaded on the page.

Tony, I'm afraid I don't really understand what you were saying

I don't know the full details of what your site is like or you are trying to achieve, but if the page has so many images on it that you need a separate loading bar, then it might be easier to simplify the page and/or break it up into multiple pages. Anyone with a slow connection would get bored of waiting (I get bored of waiting for pages to load with a fast connection), progress bar or not.

Yeah, I knkow, but still....

it's not that it requires a seperate loading bar, it's that it would be cooler.

Plus, the page is an image gallery anyway, so I can't quite simplify it. I also pretty much had to make it this way.

You could do it with Macromedia Flash but then you force everybody to have to use Flash...

Yeah. also, I thought you could only show the progress of the flash's loading, not everything. am I wrong?

Ok, a loading bar in HTML requires HTML 4.0 code, and JavaScript.

Basic summary, put an on load event into every image. Have the javascript increment a percentage bar based on the on load event. A bar built out of tiny graphics being switched from a 1x1 color to another 1x1 color works well, simply use the width and height tags to stretch them. Now for the fun part, the Javascript needs to know ahead of time how many onloads will exist to make the percentage bar somewhat accurate. Precise accuracy will require the file size of each image.

All in all, it's a mess, and may not be worth it. If you have a slow connection, check out http://www.perilith.com/~drakino/b52/ , it's one of my DHTML play sites that I never finished, and does have a load bar. On my broadband, it loads too quick to be really seen though.

Thanks, and I understand this all in concept, I just wish my JS skills were...well...existent

I don't really need the precise accuracy you were talking about, just a vague idea. But in case I wanted to, would that file size be calculated from the collection of images on the server, or inside the image tags (in which case it would be the first time a forced Frontpage code was useful).

I don't know about you, but I guess my cable connection was slow enough to see that load bar in action. I like it!

If you are using the Explorer DLL (shdocvw.dll) to do the work, then I think it's got hooks to automatically handle the percentage bar.

If you mean ProgressChange event, it is wildly inaccurate. (I often use Shell.Explorer ActiveX control in my Panther courses to illustrate component reuse via COM.)

You could use a table to represent the blue instead of an image.

You should be able to update the column width property via javascript to make it look more or less loaded.

something like
<table width=100 bgcolor='silver'>
<tr>
<td width=50 bgcolor='blue' id='width'></td>
<td>
</tr>
</table>
would look 50% loaded.
Then manipulate the column 'width' value width and you should be rocking.

Check out:
http://www.js-examples.com/example/?ex=894&mode=1

You could probably create a single function which reads the current width of 'width' and increments it by 100/#images. If you then call that function from the finished loading event of all images it aught to provide a rough estimate.

Well... I did it.

http://pernocto.com/load/


Presently you need to add
onload="StatusUpdate()"

to every image that is updating and set
var iIgnore=X;

making X = to the number of images that don't count.

You aught to be able to use the following:
var t=0;

function Initialize()
{
var allImages = document.getElementsByTagName("img");

while (t < allImages.length)
{
allImages.item(t).onload = "StatusUpdate()";
t=t+1;
}
}

To automatically assign the StatusUpdate event to every image on the page but it doesn't work for some reason .

-NiCKEL

Of course you now need to explain to us what the photos are of.

I've seen setups like that before. I'm sure the crop grown from them was a Dutch favourite

Of course I could be wrong

I'm sure the crop grown from them was a Dutch favourite

You mean tulips, of course...

http://pernocto.com/
The pictures are from the Aquaponics -> Gallery.

Presently I am growing lettuce in it. I live in a third story appartment with no elevator so constructing an indoor aquaponics unit with 700 pounds of pea gravel was the 'easiest' way to grow food .

Presently I am growing lettuce in it.

ROFL, good one.

LOL...