...

View Full Version : help with image loading/please wait window



maxhudson
10-12-2010, 01:14 AM
ok.

so i have all these big images and i need to let the whole page load before the viewer sees it

what i would like is for a separate url (or something to completely cover the html page so you cant see it loading) to say please wait or something like that.

Help!

Old Pedant
10-12-2010, 01:38 AM
It's not too hard to do.

If you know how many images you have, it's pretty easy, in fact.

Here's a sample, just showing 4 images:


<hrml>
<head>
<script type="text/javascript">
var piccount = 0;
function bump()
{
if ( ++piccount == 4 )
{
document.getElementById("cover").style.display = "none";
}
}
</script>
</head>
<body>
<div id="cover"
style="position: absolute; height: 100%; width: 100%; background-color: #eeeeee; z-index: 99;>
<br/><br/>Please wait...
</div>
<img src="whatever1.jpg" onload="bump();" />
<img src="whatever2.jpg" onload="bump();" />
<img src="whatever3.jpg" onload="bump();" />
<img src="whatever4.jpg" onload="bump();" />
</body>
</html>

See it? The "cover" has a z-index that puts it in front of everything else.

As each image is fully loaded, it calls the bump() function. When all 4 have "bumped" the counter, we just turn off the "cover".

maxhudson
10-12-2010, 04:22 AM
It's not too hard to do.

If you know how many images you have, it's pretty easy, in fact.

Here's a sample, just showing 4 images:


<hrml>
<head>
<script type="text/javascript">
var piccount = 0;
function bump()
{
if ( ++piccount == 4 )
{
document.getElementById("cover").style.display = "none";
}
}
</script>
</head>
<body>
<div id="cover"
style="position: absolute; height: 100%; width: 100%; background-color: #eeeeee; z-index: 99;>
<br/><br/>Please wait...
</div>
<img src="whatever1.jpg" onload="bump();" />
<img src="whatever2.jpg" onload="bump();" />
<img src="whatever3.jpg" onload="bump();" />
<img src="whatever4.jpg" onload="bump();" />
</body>
</html>

See it? The "cover" has a z-index that puts it in front of everything else.

As each image is fully loaded, it calls the bump() function. When all 4 have "bumped" the counter, we just turn off the "cover".

I kind of understand.

do i put this in the html page i already have or what?

Old Pedant
10-12-2010, 06:05 AM
> do i put this in the html page i already have or what?

How can I guess, without seeing the HTML page you have??? *PROBABLY* yes.

maxhudson
10-12-2010, 07:16 AM
> do i put this in the html page i already have or what?

How can I guess, without seeing the HTML page you have??? *PROBABLY* yes.

I meant do i make a new html page for this or do i add this to the existing html page that has the images on it...

Old Pedant
10-12-2010, 08:06 PM
??? Add it to the page, of course. I mean, you can make a new page, but what's the point. You'll just have to clone all your existing code onto it.

maxhudson
10-13-2010, 12:47 AM
is there a way to just put the whole page instead each image?

Old Pedant
10-13-2010, 12:51 AM
is there a way to just put the whole page instead each image?
I have no idea what that is supposed to mean.

"put the whole page"???

This should involve VERY VERY LITTLE CODE added to your existing page.

maxhudson
10-13-2010, 12:53 AM
http://www.insidehb.com/imageofday/october.htm

maybe im doing something wrong, but that didnt work...

Old Pedant
10-13-2010, 02:13 AM
Okay...several things...

(1) There's a missing " mark on the end of the style= for the <div>:


<div id="cover"
style="position: absolute; height: 100%; width: 100%;
background-color: #eeeeee; z-index: 99;">
<br/><br/>Please wait...
</div>


(2) Your picture "october/7.jpg" *DOES NOT EXIST*!!! So there are REALLY only *SIX* valid images on the page.

(3) The variable name "piccount" was apparently already in use in some of the existing code. So I just changed it:

var zzzpiccount = 0;
function bump()
{
++zzzpiccount;
if ( zzzpiccount == 6 ) /* 6 until you fix image 7.jpg !!!! */
{
document.getElementById("cover").style.display = "none";
}
}


And now it works.

Naturally, you can put something more interesting in that "cover" div than just my "please wait..." message.

My code all along was intended as a *GUIDE* for you, not necessarily what you would exactly use.

Part of the problem I had debugging this is that you *ALSO* have some errors in your jQuery based image slider. I guess it is supposed to move automatically from one picture to the next, no? But it doesn't, because you are getting errors. Time to learn how to use Firebug with FireFox to debug your code!

maxhudson
10-13-2010, 02:36 AM
Okay...several things...

(1) There's a missing " mark on the end of the style= for the <div>:


<div id="cover"
style="position: absolute; height: 100%; width: 100%;
background-color: #eeeeee; z-index: 99;">
<br/><br/>Please wait...
</div>


(2) Your picture "october/7.jpg" *DOES NOT EXIST*!!! So there are REALLY only *SIX* valid images on the page.

(3) The variable name "piccount" was apparently already in use in some of the existing code. So I just changed it:

var zzzpiccount = 0;
function bump()
{
++zzzpiccount;
if ( zzzpiccount == 6 ) /* 6 until you fix image 7.jpg !!!! */
{
document.getElementById("cover").style.display = "none";
}
}


And now it works.

Naturally, you can put something more interesting in that "cover" div than just my "please wait..." message.

My code all along was intended as a *GUIDE* for you, not necessarily what you would exactly use.

Part of the problem I had debugging this is that you *ALSO* have some errors in your jQuery based image slider. I guess it is supposed to move automatically from one picture to the next, no? But it doesn't, because you are getting errors. Time to learn how to use Firebug with FireFox to debug your code!
Thank you so so so much!

how do i use firebug?

also, the slideshow isnt supposed to pay automatically.

Old Pedant
10-13-2010, 03:08 AM
Okay, if it's not suppose to play automatically, then you "turned it off" incorrectly. You are getting an error every 3 seconds.

At the very end of your page, you have the code for the slide show.

so just change it to get rid of the interval stuff. Like this:


function start() {
}

function stop() {
}

$(function() {
start();
} );

Probably could remove more code, but doing it that way I get no more errors in FireBug.

As to learning how to use FireBug: Hey, the download page for it has tons of links to help and tutorials and docs and you name it.

And GOOGLE is your friend.

maxhudson
10-13-2010, 03:37 AM
haha ya i use google a ton.

I have another issue now though.

i switched to an external stylesheet and it moved everything down and to the right about 10px....

any ideas?

www.insidehb.com/imageofday/september.htm

EDIT: I tried firebug and it didnt find any errors with it..

the style sheet is : www.insidehb.com/imageofday/files/styles.css

Old Pedant
10-13-2010, 03:43 AM
Just guessing: You are probably missing the style of margin: 0px; for the body.

Try adding

* { margin 0px; }
at the top of the external style sheet.

I don't see it in the CSS.

Note: You have the same javascript error with the function start() code. It should be changed on that page, as well.

maxhudson
10-13-2010, 03:46 AM
you mean
* { margin: 0px; } ?

Old Pedant
10-13-2010, 03:52 AM
yes, of course. Sloppy typing.

And firebug sure caught that "false()" is not a function error for me, every three seconds.

maxhudson
10-13-2010, 04:02 AM
alrighty.

I have another question.

Something is wrong with my page at www.insidehb.com/password_protect.php

All of my styles are being ignored pretty much. any ideas?

I dont see any errors with firebug and the tutorials are very confusing..

Old Pedant
10-13-2010, 04:12 AM
What "styles"???

There are only 2 on the page.



<style>
input { border: 1px solid black; }
.main{
position:absolute;left:50%
}
</style>

There are no other styles on that page. There is no external style sheet applied.

It looks right to me.

I'm out of here.

daviddwilson
10-13-2010, 04:31 AM
haha ya i use google a ton.

I have another issue now though.

i switched to an external stylesheet and it moved everything down and to the right about 10px....

any ideas?

www.insidehb.com/imageofday/september.htm

EDIT: I tried firebug and it didnt find any errors with it..

the style sheet is : www.insidehb.com/imageofday/files/styles.css
at the top of the external style sheet.

I don't see it in the CSS.

___________________
watch movies online (http://moviesonlinefree.biz/)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum