Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
FOUC on new site ... how come and what to do ... !?
On this new site (under contruction) > mariaberkhout.nl/new there are three portfolio sections. Each has a landing page with 24 thumbnails (article_images). Each thumbnail links to an article with the larger image. Each article has a nav with prev and next ‘buttons’. Going back and forth you’ll notice a ‘Flash of Unstyled Content’. That’s not what I want. But can it be prevented?
Some code:
Section page >
<!-- content -->
<txp:if_individual_article>
<section class="row narrow" role="main">
<div class="large-12 columns">
<txp:article form="single_notitle" limit="1" />
</div>
</section>
<txp:else />
<section class="row wide" role="main">
<div class="large-12 columns">
<txp:article form="single_onlyimage" wraptag="ul" class="small-block-grid-2 medium-block-grid-3 large-block-grid-4" break="li" limit="24" sort="position asc" />
</div>
</section>
</txp:if_individual_article>Form single_notitle >
<article role="article" itemscope itemtype="http://schema.org/Article">
<div itemprop="articleBody">
<txp:body />
<p class="navigatie"><txp:link_to_prev showalways="1">PREV</txp:link_to_prev> <span>|</span> <a href="<txp:site_url /><txp:section />" title=""><txp:section /></a> <span>|</span> <txp:link_to_next showalways="1">NEXT</txp:link_to_next></p>
</div>
</article>An article bodytext >
<txp:smd_thumbnail id="77" type="large" />
p(voetnoot). zonder titel / 2009 / 18 mm betonplexI’m using Bloke’s smd_thumbnail to render small and large ‘thumbnails’. Any help to prevent FOUC is welcome.
Offline
Re: FOUC on new site ... how come and what to do ... !?
RedFox wrote #287200:
you’ll notice a ‘Flash of Unstyled Content’. That’s not what I want. But can it be prevented?
Your eyes must be better than mine as I can’t see it :-)
But as a general principle I always try and stick the CSS link as high up the page as possible so it can be loading as the rest of the page elements are coming down.
My guess is that, somewhat counter-intuitively, you could put the CSS link above the Google font link. I’ve never found a definitive answer to this, but I suspect that since Google is an external resource, it should be told to load later in the head than your CSS so it doesn’t potentially (even temporarily) ‘block’ local resources as it makes the request.
The browser shouldn’t try and render anything until DOM-ready anyway, but I don’t know what happens if your CSS file encounters a definition for a font it hasn’t “seen” yet. Perhaps rendering is delayed until all link resources are loaded so the order doesn’t matter. Or perhaps web fonts do indeed need to come before the CSS stylesheets they are used in, I don’t know for sure. I’ve been loading stylesheets first and fonts afterwards and haven’t noticed any ill effects, but I’m a font heathen so don’t take my word for it.
In a similar vein, you could probably delay modernizr loading to the footer, near where jQuery is loaded, unless you know of a good reason to put it up top (I don’t know, as I don’t use it).
Your stylesheet is massive (SASS?) so minifying it might help a bit (although it should be cached after first load anyway). And app.js is 404ing.
If you really want to make image-heavy sites fly, see if the host supports APC for some cacheing goodness. That’d probably be your biggest win compared with any of the above.
Not convinced any of that will make a massive difference, but it might just buy you a few microseconds, which may be all you need. Every little helps, right?!
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: FOUC on new site ... how come and what to do ... !?
I’m also not seeing it either, only the page jump as the images load.
You could also try using the asynchronous web font loader (github) in conjunction with css tied to the wf-loading and wf-active / wf-inactive classes as shown here for example. Your fonts, or if you prefer your entire page can be hidden until the fonts have loaded (or if they fail to load for some reason, then when the load timeout expires).
You could probably also use a similar technique to show the page once the image has loaded, for example using imagesloaded, or use a preloader for next and previous images to reduce the load time for the next page.
TXP Builders – finely-crafted code, design and txp
Offline
Re: FOUC on new site ... how come and what to do ... !?
Thanks Bloke and Jacob. I did some tests with and without Google Fonts but page load flickering still occurs. It’s indeed a page jump thing and not FOUC. Sorry for the misleading assumption. If prev or next navigation works with cache rendering, ‘new’ pages loads in a way that’s fine with me. Go back and forth the same route and you’ll see what I mean.
I think I’ll have to implement an image preloader as Jacob is suggesting. BTW … do you know a ‘best’ preloader script or plugin?
Last edited by RedFox (2015-01-10 04:54:21)
Offline
Re: FOUC on new site ... how come and what to do ... !?
I think that ‘Lazy Loading’ trumps ‘Pre Loading’ as a technique if it fits in to one’s design. Pages load more quickly and smoothly. It does, of course rely on having a good proportion of the images initially outside the viewport. Of the JQuery plugins that do the job, Lazy Loader is more fully featured but Unveil is lightweight and does the basics very efficiently. Both work very well on narrow phone and tablet screens in landscape orientation but ‘pre-loading’ – not so much.
Offline