how do I display a 'page loading...'- image while actual page is loading 
Author Message
 how do I display a 'page loading...'- image while actual page is loading
Ok Guru's - who can help me out with this one:

I'm working on a website of which the index-page is about 220kb - That's
quite a lot but hey: you get something in return ;)

While the page is loading, I want to display a small animated gif (to
entertain the visitor while waiting) - in the center of the page, surrounded
but nothing but black background (or whatever color).

As soon as the browser has loaded the actual page: I want the 'anigif intro'
to disappear, making room for the actual page.

But here's the tricky part: - well, tricky...
I want to show the whole anigif; so when one has like an ADSL connection,
and this guys browser would have loaded the page BEFORE the whole anigif is
shown, I want the actual page to 'wait' 'till the anigif is done...

Pages that have somewhat in this direction:
* photodisc.com (first type in a searchquiry to see what I mean) - but the
'loading...' pic you see is actually the background of the page; although
this does the job partially, you can still see images loading when the
'loading...' pic has gone...
* housemusic.com - the have some sort of intro-gif that I'm talking about,
but the main page does not start loading before the anigif has gone (this is
just a http-equiv refresh)
* http://www.*-*-*.com/ ; now
here's a script that's basically doing what I want EXCEPT: the main page is
being displayed as soon as it is loaded - I want it to wait for the
'loading'-anigif to finish, in other words: I want to be able to set a
minimum-waitingperiod in this script, something like 10 seconds.

WHO COULD HELP ME WITH THIS?

YOUR HELP WILL BE GREATLY APPRECIATED, GIVE ME YOUR NAME AND/ OR EMAIOL
ADDRESS FOR A CREDIT ON MY PAGE, PLEASE ASK IF YOU EVER NEED MY HELP.

This would be the finishing touch on my website :) so I really hope someone
could help me

Cheers and thanx in advance,



Mon, 01 Sep 2003 14:21:04 GMT  
 how do I display a 'page loading...'- image while actual page is loading
Warning:  This code has not been tested in NS

Here's an example.

<HTML>
<HEAD>
<SCRIPT language="JScript">
var loadCount = 0;
var windowDone = false;
function loadWindow()
{
    if (loadCount > 1)
    {
        content.style.display = 'block';
        loadImg.style.display = 'none';
    }
    else
    {
        windowDone = true;
    }

Quote:
}

function countAnimationLoad()
{
    loadCount++;
    if ((windowDone)&&(loadCount > 0))
    {
        loadWindow();
    }
Quote:
}

</SCRIPT>
</HEAD>
<BODY onload="loadWindow();">
<IMG src="myAnimation.gif" onload="countAnimationLoad();" id="loadImg">
<DIV id="content" style="display:none;">
Here is some content.
</DIV>
</BODY>
</HTML>

This works because every time your animation starts over, it fires the
onload event.

Good luck, and sorry if it doesn't work in NS.

Ivan.



Mon, 01 Sep 2003 07:44:49 GMT  
 how do I display a 'page loading...'- image while actual page is loading

Quote:
>I'm working on a website of which the index-page is about 220kb - That's
>quite a lot but hey: you get something in return ;)

Don't.

Have a 220K page, by all means -- but please don;t make it the home
page for the site. Your home page ought to present me with a brief
explanation as to why you're worth visiting, and why you;re worth
220K. If I still want it, I'll click on th elink to it.

If I want it again, I'll bookmark the big page and go straight there.

Quote:
>While the page is loading, I want to display a small animated gif (to
>entertain the visitor while waiting) - in the center of the page, surrounded
>but nothing but black background (or whatever color).

<div id="divMsg" >
Hi. We're going to load it now
<img src="foo.gif" alt="You'll thank us for this, really"  />
</div>

<!-- (a little) Time passes  -->

<script language="javascript" >
diocument.all.divmsg.innerHTML = "Getting really <i>slow</i> now";
</script>

<!-- Something slow is served here -->

<script language="javascript" >
document.all.divmsg.innerHTML = "Finsihed";
</script>

--
Smert' Spamionam



Mon, 01 Sep 2003 08:03:25 GMT  
 how do I display a 'page loading...'- image while actual page is loading
This isn't so bad.... I've done similar things (not for home pages, mind
you) for some client sites I've had the opportunity to work on.

Now let me ask you this first, are you looking for someone to give you the
explanation of what needs to be done, or you looking for the actual code?
The code could take a little bit.. but the explanation is this:

I suggest making a div that has a background color of whatever you want...
this div has a z-index higher than the rest of the elements on the page....
this div also has height and width attributes set to the availWidth and
availHeight of the window. This will hide the page behind it.....

After you've done that start you image loading scripts, you know... the
basic var x = new Image(); x.src = 'image.gif'; etc etc etc...

Then make a the image loading script's last image trigger a function that
set the display/visibility of the front most layer (the layer covering
everything else and housing the anim.gif you talked about) to
none/hidden....

I could give the code for this, but I don't have it lying around so I'd have
to build it... I've done things like this in the past where a flash piece
resides on the highest layer covering the page and once the last frame is
loaded it calls a javascript function to shut the layer's visibility/display
to hide or show.

I'm pretty sure that'll work.

-Alex


Quote:
> Ok Guru's - who can help me out with this one:

> I'm working on a website of which the index-page is about 220kb - That's
> quite a lot but hey: you get something in return ;)

> While the page is loading, I want to display a small animated gif (to
> entertain the visitor while waiting) - in the center of the page,
surrounded
> but nothing but black background (or whatever color).

> As soon as the browser has loaded the actual page: I want the 'anigif
intro'
> to disappear, making room for the actual page.

> But here's the tricky part: - well, tricky...
> I want to show the whole anigif; so when one has like an ADSL connection,
> and this guys browser would have loaded the page BEFORE the whole anigif
is
> shown, I want the actual page to 'wait' 'till the anigif is done...

> Pages that have somewhat in this direction:
> * photodisc.com (first type in a searchquiry to see what I mean) - but the
> 'loading...' pic you see is actually the background of the page; although
> this does the job partially, you can still see images loading when the
> 'loading...' pic has gone...
> * housemusic.com - the have some sort of intro-gif that I'm talking about,
> but the main page does not start loading before the anigif has gone (this
is
> just a http-equiv refresh)
> * http://javascript.internet.com/page-details/preload-page.html -> now
> here's a script that's basically doing what I want EXCEPT: the main page
is
> being displayed as soon as it is loaded - I want it to wait for the
> 'loading'-anigif to finish, in other words: I want to be able to set a
> minimum-waitingperiod in this script, something like 10 seconds.

> WHO COULD HELP ME WITH THIS?

> YOUR HELP WILL BE GREATLY APPRECIATED, GIVE ME YOUR NAME AND/ OR EMAIOL
> ADDRESS FOR A CREDIT ON MY PAGE, PLEASE ASK IF YOU EVER NEED MY HELP.

> This would be the finishing touch on my website :) so I really hope
someone
> could help me

> Cheers and thanx in advance,



Mon, 01 Sep 2003 09:23:15 GMT  
 
 [ 4 post ] 

 Relevant Pages 

1. When page loads, load a page in another frame

2. Loading a page with javascript functions (Always load a cached page)

3. ASP pages can't be refreshed instantly, they seem to be loading indefinitely

4. PLEASE HELP Page won't load

5. How to control Page's Load event

6. Display message while loading a page ?

7. delaying page display until everything is loaded

8. New image on page load code

9. Display Postscript 'image' operator problems

10. Load image from file in my ASP to display to the browser

11. display anigif while preloading actual page

12. ASP Load image from file to display in browser

 

 
Powered by phpBB® Forum Software