homepage Welcome to WebmasterWorld Guest from 54.161.240.10
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

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




msg:856038
 12:03 am on Aug 2, 2002 (gmt 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??

Thor

 

kris




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

It can easily be done in Flash but I have never seen it done with DHTML, I would be intersted to know too.

idiotgirl




msg:856040
 12:51 am on Aug 2, 2002 (gmt 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.

rewboss




msg:856041
 11:19 am on Aug 2, 2002 (gmt 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.

Staffa




msg:856042
 11:56 am on Aug 2, 2002 (gmt 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 ?

rpking




msg:856043
 12:26 pm on Aug 2, 2002 (gmt 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.

rewboss




msg:856044
 4:26 pm on Aug 3, 2002 (gmt 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.

toadhall




msg:856045
 7:32 pm on Aug 4, 2002 (gmt 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.

<html>
<head>
<title>Loading</title>
<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>");
document.write("Done...");
window.location="showimages.html";
}
//-->
</script>
</head>
<body onLoad=load()>
<img src="firstimage.jpg" width="1" height="1"><br>
</body>
</html>

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

Comments? Cabbages?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved