0

I don't know if I'm in the right place because is not strictly for Wordpress, I think someone can get some benifit of this question without using Wordpress but in this case I'm using it.

So, I'm using a modified theme with some plugin enabled, carousel, and other fancy things. There is a problem with some graphics, when I call the site from a remote host, and it's not cached, it's not quick as it's in localhost so all the images are preload in the same place one above the other and when the JS is ready all go in place, but you see a mess while the site is reading...

This is not very nice as you thinking...

My intention is to achive a "site is loading" pulsating or a progress bar while the site is ready in background.

How to do this?

1

1 Answer 1

0

This is NOT a good idea. If you get that kind of behavior, then you didn't properly code your carousel thing / CSS. You should hide the element that contains it, and reveal it in the js hook.

But if you really want to go your way, here's how:

header.php:

...
<body <?php body_class('site-loading no-js'); ?>>
  <script> 
     document.body.className = document.body.className.replace('no-js','has-js');
  </script>
...

CSS:

body.site-loading.has-js{
  background: #fff url('the/loading.gif') no-repeat center center;
}

body.site-loading.has-js *{
  display:none;
}

javascript, assuming jQuery:

jQuery(document).ready(function($){
   // do your carousel thing

   // should be last line
   $('body').removeClass('site-loading');
});

Needless to tell you that any javascript error after the header code I gave you, will keep your site in "loading" mode forever :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.