Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

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...

12:03 am on Aug 2, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 22, 2002
votes: 0

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??


12:14 am on Aug 2, 2002 (gmt 0)

Full Member

10+ Year Member

joined:Oct 1, 2001
votes: 0

It can easily be done in Flash but I have never seen it done with DHTML, I would be intersted to know too.
12:51 am on Aug 2, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:July 6, 2001
votes: 0

I think I saw one that created a little bar using DHTML/javascript on dynamicdrive.com. That site offers a search function, as well. If it's there - you can probably locate it through a search. If it's not there - try javascripts.com. It's out there - I've seen it. Just can't remember where! It was a little blue status bar that crossed over the page with percentages. Once loaded, it opened the intended (preloaded) page.
11:19 am on Aug 2, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:June 7, 2002
votes: 0

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.

11:56 am on Aug 2, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 24, 2002
votes: 0

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 ?
12:26 pm on Aug 2, 2002 (gmt 0)

Full Member

10+ Year Member

joined:Aug 21, 2000
votes: 0

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.

4:26 pm on Aug 3, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:June 7, 2002
votes: 0

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.

7:32 pm on Aug 4, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:May 9, 2001
votes: 0

Well now laddies (ladys, luddites), here's a phenomenon for you - a javascript solution that works better in Opera than elsewhere.

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.

<script language="JavaScript">
function load(){
document.write("Loading images...<br><b>1</b><br>");
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>");
<body onLoad=load()>
<img src="firstimage.jpg" width="1" height="1"><br>

... bit of a hack but there you go.

Comments? Cabbages?


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members