Flash of Unstyled Content

4 posts / 0 new
Last post
mfuggle
mfuggle's picture
Flash of Unstyled Content

Hi Jorge,

Could you have a look at www.fuggle.com.au/7? I am using the front page variant called Page Cut and you will see that I get a flash of unstyled content when the page loads. I have come across this before but I am not sure what the solution was. It is something to do with not displaying the images until after the javascript and or css has been loaded.

Cheers
Martin Fuggle

support
support's picture
Hi there Martin:

Hi there Martin:

I did look both of them, your current home (variant 3) and http://www.fuggle.com.au/7/home-variant-5

It is a common behavior of the site, deppending on the browser you use. Any site you visit shows the content first and then the styles are applied. Some browsers don't show anything until everything isn't loaded... all deppends on the server load, visitor's connection speed... it's he web :)

Bests

Jorge

mfuggle
mfuggle's picture
Hi Jorge - I beg to differ.

Hi Jorge - I beg to differ. Is is possible, in fact sensible, to prevent images from loading until after the styles are loaded.

mfuggle
mfuggle's picture
FOUC Solved

I am using Home Page Variant 5 and the slider images display at the bottom of the page while it is loading and then appear in their correct place when the entire page is loaded. This is not desirable and is caused by the fact that the slider images display before the style that gives them their style and puts them in the right place. The solution to this problem is to prevent the images from displaying until the associated javascript has loaded.

This can be achieved by placing the following code at the top of the page.tpl.php located in the themes template folder.

<style type="text/css">  div.view-seven-slideshow-5 img {    display:none;  }</style>JAVASCRIPT  $(document).ready(function(){    $("div.view-seven-slideshow-5 img").css('display', 'block');  });JAVASCRIPT

You would need to change view-seven-slideshow-5 to 1 through 7 depending on the home page variant you are using. The effect of this is to prevent the images from loading until after the styles have loaded. For reasons that I don't understand it caused the image to be slightly offset so you will need to inspect the image element and make some very minor changes to the responsive-screen-layout.css at around line 1300 as follows:

#block-views-seven-slideshow-5-block .views-field-field-image {    bottom: -295px;    left: 353px;    position: absolute; top: auto;}
I changed the bottom and left values as shown. You may need to do this in the code relating to the variant you are using. If you want to be particular about all of this you could make the changes for every variant at the same time. I didn't bother.

Hope this helps
Martin Fuggle

Log in to post comments