Jump to content

show page when it's loaded


fortnox007

Recommended Posts

Hi all, i was wondering if there is a good/ better way to show the website, when it is fully loaded.

I read this article: http://javascript.about.com/library/blanim02.htm

 

and they come with 2 methods: wrap some object in a div with an id and set it to display:none in css.

after that they differ:

method 1does:

<body onload="setObjVis('myobj','visible');">

second one does

function start() {
setObjVis('myobj','visible');
}
window.onload = start;

since the article is fairly old i was wondering if these methods are still good or if there is a better method of doing this. What i thought was wrap everything in a wrapper div and apply the above.

Love to hear from some expert 

Link to comment
Share on other sites

So you want to do a splash or preloader screen? ugh, those are so annoying.  You should stay away from doing that unless your site really is loading something that takes a good amount of time to load. 

 

But if you insist, it would be easier to give it its own page and then redirect to real page when it's done.

Link to comment
Share on other sites

no not those annoying things, pretty much like google does, all white and than fades in pretty fast. It's just that i really don't like pages as if it is being build up, certainly in a browser like opera it looks like it consists of bricks. So it's no reall splash page, but just a small effect to show all at the same time. (preferable with a little fade in like 0.4 ms)

 

I just stumbled upon jquery,  can you recommend that?

Link to comment
Share on other sites

woohoo i just made something awesome i think and it works.

is this the right way?

 

i put this in the <head></head>

<style type="text/css">
            #wrapper{display:none;}
        </style>
<script type="text/javascript"
             src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
          $(document).ready(function(){
                  $("#wrapper").fadeIn("slow");
            });
</script>
        <noscript><style type="text/css">#wrapper{display:block;}</style></noscript>

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.