|Where do I find a "loading images" thingy for a page?|
How to let people know at a glance how far away the page is to full load...
There are a couple of pages that we are going to have that will have some intense graphics on them, and I saw somewhere a neat little bar at the top of a site that I visited that informed me of the progress of the image download, as it progressed.
I would like to do the same thing for these pages we are going to do. Any suggestions on what this is, and how to get it???
I would assume that it is some sort of dhtml, but how does it know what is loading and how far into the load it is??
It can easily be done in Flash but I have never seen it done with DHTML, I would be intersted to know too.
I have seen something similar done in DHTML. Personally, I think it's a gadget: "Hey, let's pretend we're on the USS Enterprise and have lots of cool status indicators..." If large file sizes are the issue here, and if you can't optimize them any further, then I'd prefer progressive JPEGs and interlaced GIFs. No extra coding necessary, so no added bandwidth except for a couple of extra bytes on the GIFs.
Besides, most browsers show the current loading status in the status bar.
I think it's a pity that the W3C didn't give their blessing to the lowsrc attribute of the <img> tag. The idea was to create a low-bandwidth version of the image which would be displayed until the "real" image hand completely downloaded. That may have increased bandwidth (significantly if you didn't know what you were doing) but allowed visitors to get a first impression of your site pretty quickly.
I have a page that shows a progressing bar when loading media, it's a java applet loading an animated presentation. Could it be something similar ?
You could have a series of images at the top strung together, but transparent to start with. Then place onLoad commands in each of your content images further down the page, which turn each of the top images on in turn (same type of code as rollever, just swap a transparant image for a solid one).
This would then act as a loading bar. By sizing the load bar images at the top to relect the relative size of the content images, you would probably get a half decent representation of load percentage.
For that to work, you'd need to make sure that the images for the loading bar download before any of the other images do, which is difficult.
You could always try using DHTML to adjust the width of a 1x1 GIF to make a loading bar. Or, even more efficient: use a <div> with a coloured background as a loading bar.
Could add a warning "Please update your browser to Opera 6+ to get the best bang for your buck" I suppose.
It will load the images and transfer you to the viewing page in non-Opera, but you won't get the nice 1,2,3 loading indicator.
document.write("<img src='secondimage.jpg' width='1' height='1'><b>2</b><br>");
document.write("<img src='thirdimage.jpg' width='1' height='1'><b>3</b><br>");
<img src="firstimage.jpg" width="1" height="1"><br>
... bit of a hack but there you go.