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 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Loading in background..

    Is there anyway possible to do this? I would like to hide several <div> tags when the page loads, but put it on a timer so after the page is finished loading the fade in. In the meantime whilst the page is loading, a image is shown.

    It's for a radio player i'm working on, the page takes around 5seconds to load fully, and so thought a loading image would be better to look at than half loaded <div> tags.

  • #2
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    That's actually quite easy to accomplish. Just style those divs with display:none, and in the window.onload handler set the style.display property back to "block" in order to show them, or just use whatever fading function you got there.

    As for the image showing in the meantime, just put it there; no Javascript necessary. Just make sure you hide it as soon as the page is loaded (set style.display to "none" in the window.onload).

    Be advised tough that this will cause serious accessibility issues, as the hidden divs will never show up if the user agent doesn't allow Javascript. In order to solve that problem, you would have to hide the divs programatically, and not with CSS, and it's hard to get the right time to that (when the element already exists, but before it starts showing, so it won't flash). If you don't mind ugly and unmaintainable, you could put the script hiding the div just after the div definition into your HTML.


  •  

    Posting Permissions

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