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.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Apr 2003
    Location
    Texas
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How can I make a page load in before showing up?

    I have a preload page that has light graphics, and would like for it to load in completely before showing up, instead of the picture appearing line by line. Obviously, I have a dial up connection and am targeting this preload page for those on dial up. I know several web sites that do this. It is probably very simple, but I am at a loss as to how to accomplish it. I appreciate any help you might be able to give. The site is www.si-productions.com , if anyone needs to look at specific code.
    Last edited by driftwood; 01-13-2004 at 09:13 PM.

  • #2
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not too sure this is at all possible. Most images load immediately because they're small. You could resave it as a 'progressive encoded' jpeg, which will mean it'll start off blurry and get sharper as the download happens, or you could resave it with a lower quality. 11k seems a bit large for that small a picture.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #3
    Regular Coder
    Join Date
    Aug 2003
    Posts
    565
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't connect to your site. What server are you using? IIS? Apache?

  • #4
    New Coder
    Join Date
    Apr 2003
    Location
    Texas
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    website access

    A comma got tacked onto the www.si-productions.com link. I corrected it, so it should work now. Elaine

  • #5
    Regular Coder
    Join Date
    Aug 2003
    Posts
    565
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You should try to lower the quality a bit and see if it still looks good. I am not sure that 'progressive encoded' solution would look professionnal.

  • #6
    Regular Coder
    Join Date
    Dec 2003
    Location
    USA
    Posts
    230
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Eh, wow, sorry about that, I misread your first post.

    The only thing I can think of, is to wrap your entire layout, that means placing the start tag right after your body tag, and the end tag right before your closing body tag, in a <div>, and do something like this:
    Code:
    <div id="preload" style="visiblity:hidden;">
    all of your content, ect., ect...
    </div>
    Then...
    Code:
    <body onload="document.getElementById('preload').style.visibility='visible';">
    Although, this will mean that your whole site won't be visible to those who don't have JS enabled...


    ***EDIT***
    Eh, sorry, I'm a bit lost, but do you want your entire page to load like this, or just one/a few images?
    Last edited by Paul Jr; 01-14-2004 at 12:38 AM.

  • #7
    New Coder
    Join Date
    Apr 2003
    Location
    Texas
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks

    Thanks. I'll give it a shot.

  • #8
    New Coder
    Join Date
    Apr 2003
    Location
    Texas
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Puzzled

    I'm sorry. I'm relatively new to forums, but a post I just read disappeared? Was something wrong?

  • #9
    New Coder
    Join Date
    Apr 2003
    Location
    Texas
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Visibility

    Paul, Jr,
    Do you mean the page won't be visible until it loads in for non js browsers, or it won't be visible at all? Ever? If that is the case, I'll stick with a slow download.

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Use Paul's solution but document.write the <div> tag so that non-js browsers will still see the content.

    <script type="text/javascript">
    document.write('<div style="visibility:hidden">');
    </script>

    content here...

    <script type="text/javascript">
    document.write('</div>');
    </script>

  • #11
    Regular Coder
    Join Date
    Aug 2003
    Posts
    565
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There are also ways of doing it server side. That's why I asked for you which server you were using. But if you wanna do that it would probably be better to ask the question in the ASP or PHP forum. The solution given here seems to be the more appropriate one to your site since you're pages are .htm ones (as far as I've seen).

  • #12
    New Coder
    Join Date
    Apr 2003
    Location
    Texas
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks

    Everyone,
    Thanks so much for the information. This will get me where I want to be. The reason I didn't answer the question about the server was simply that I don't have any idea. I am using strictly .htm pages. I put up pages for my family, and have never had "formal" training. I know enough to validate my html pages, but haven't the time to go into a full study of php or asp. I still have 8 children at home, 5 of whom are being home schooled. The older 3 don't require much help except for web pages!

    If you'd like to visit our family pages they are at:

    www.jonesclan.net

    Thanks again!

  • #13
    Regular Coder
    Join Date
    Aug 2003
    Posts
    565
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey having 8 children at home is much harder than learning PHP or ASP

    Good luck with your project.


  •  

    Posting Permissions

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