Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts

    help with image loading/please wait window

    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!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    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:
    Code:
    <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".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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:
    Code:
    <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?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    > 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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    > 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...

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    ??? 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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts
    is there a way to just put the whole page instead each image?

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Quote Originally Posted by maxhudson View Post
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts
    http://www.insidehb.com/imageofday/october.htm

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

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Okay...several things...

    (1) There's a missing " mark on the end of the style= for the <div>:
    Code:
    <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:
    Code:
    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!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Okay...several things...

    (1) There's a missing " mark on the end of the style= for the <div>:
    Code:
    <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:
    Code:
    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.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    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:
    Code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts
    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
    Last edited by maxhudson; 10-13-2010 at 02:40 AM.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Just guessing: You are probably missing the style of margin: 0px; for the body.

    Try adding
    Code:
    * { 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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    Banned
    Join Date
    Oct 2010
    Posts
    115
    Thanks
    30
    Thanked 0 Times in 0 Posts
    you mean
    Code:
    * { margin: 0px; }
    ?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •