0

I built this WP theme for a friend (I know there are some obvious styling issues, those are to be taken care of), but my question is about getting the wrapper to load before any of the page elements...

http://www.touchlinetalk.com

If you load, or reload the page you'll notice the logo and some of the ads load before the background white space? The site would look a lot cleaner/neater/modern if the background whitespace would load first, followed by the other elements.

I've tried specifying a height and a few other things I thougth would work but no dice - I just can't seem to get it to behave as I'd like. I feel this is an elementary issue, such a basic problem that I can't figure it out...

Any help?

Damian
  • 1
  • 2
    I think, and correct me if I am wrong: static versus dynamic. It loads first the static part, then the dynamic part. It means your white background is part of dynamic content, which is loaded, after all static content is loaded. For example, the white area is part of the main content and the header that dynamicly is generated and is probably stored in a seperate file. – Dorvalla Oct 15 '12 at 12:19
  • Interesting, I hadn't thought of that. I use the bound div (or wrapper) jsut after opening the body tag... Should I place it outside this tag to make it static? – Damian Oct 15 '12 at 12:29
  • I am not sure how the site is build up, what is automaticly generated and what is not. What you can try is edit one of the pages where it loads content and see if you can add a div before that content gets loaded with a color in it and a certain height. If it pops up, you know you ll have to edit there. I mean, its a little experimenting, but it might be worth it! Do it before `headadvert` tagg And i love that background :) – Dorvalla Oct 15 '12 at 12:34
  • I'll give that a bash a bit later. Thanks! – Damian Oct 15 '12 at 12:39
  • Alrighty, good luck! Let me know if you figured it out! – Dorvalla Oct 15 '12 at 12:42

2 Answers2

0

I don't know if you are going to be able to solve this, certainly not easily. Your page is loading correctly, and the image is the 8th resource requested (as seen in HttpFox). A website is parsed basically line by line in order. Your site is loading the HTML, then the stylesheet, several resources while the stylesheet downloads and parses (my interpretation), and then your background image. Your image is huge and takes a 12 seconds to download per a test at webpagetest.org You can't really make the image show up before it downloads, and honestly, do you really want to make people wait 12 seconds to see anything even if you could? The image is decoration. It isn't critical. Do you really want to lose traffic over it?

There are things you can do to help though. First, that image is enormous. Is there nothing you can do to decrease it's size? I mean, why all the whitespace in the center of the image? You are only using the outside edges. Secondly, encourage caching. Put this in your .htaccess file. 

<FilesMatch "\.(ico|jpg|jpeg|png|gif|swf)$">
    ExpiresActive On
    ExpiresDefault "access plus 2 weeks"
</FilesMatch>

Also, I posted on another topic about caching if you want to check that out.

Edit:

Ok. It looks like you have a number of scripts loading inline, like this one <script type="text/javascript">var vclk_options = {sid:64560,media_id:1,media_type:1,version:"1.3"};</script>... which loads inside <div id="headAdvert">. Those inline scripts are going to 'block' your page load until they complete. You are going to have to load those after your content of the page to prevent that. Do those ad server's not have asynchronous scripts that you can use instead? Something like this one?

Community
  • 1
  • 1
s_ha_dum
  • 2,840
  • 2
  • 18
  • 23
  • Thanks for your input. The fact of the matter is it's not the image that's the problem. I agree with you that it's huge, but that's what the friend/client wanted. I used the basic skeleton from my own site (copasetix.com) which loads the same way. i.e. the header whitespace loads first, then the white space down the rest of the page. Any thoughts? – Damian Oct 16 '12 at 12:36
  • I certainly understand that clients want things that aren't good for them :) but the fact is that it *is* the image that is the problem. It takes 12 seconds to download. You can't display it until it finishes downloading. That isn't complicated. You can do everything you can to decrease the image size and you can encourage caching. The latter means the problem will be less obvious. – s_ha_dum Oct 16 '12 at 13:52
  • Or you can do something like suggested by [loQ](http://stackoverflow.com/users/1733530/loq) and [hide the content until the image loads](http://stackoverflow.com/a/12898424/1735890), but that introduces a huge lag between the time a visitor arrives and the time a visitor sees real content which is unwise in my opinion. – s_ha_dum Oct 16 '12 at 13:52
  • Sorry mate, but I don't think you understand my initial question (I may not have worded my question correctly). I agree with you that the background image is too big - the question I have is regarding DIV called 'bound'. The issue is an issue with or without the background image. – Damian Oct 16 '12 at 15:50
  • Oh... got it. Sorry about that. Editing my answer. – s_ha_dum Oct 16 '12 at 15:57
0

If you would consider jquery then you can try this:

First hide your content first which is wrapped by #bound div using your css

#bound{
 display:none;
}

and let the system wait for 2 seconds until the BG wrapper loads completely

<script>
 setTimeout('show_content()', 2000);
 function show_content(){
     $("#bound").fadeIn();
 }
</script>

You can extend how many seconds the whole content to be displayed by changing the setTimeout time value

loQ
  • 2,147
  • 18
  • 21