0

I've been working on a responsive redesign and I'm trying to reduce the layout shift and flash of unstyled content that occurs when my AddThis follow buttons are rendered on the page after being inserted by a Modernizr query. Depending on the media query, the AddThis code is either inserted into a div with the ID ss1 or ss2. (See previous solved question.)

AddThis support suggested I hide the div until the buttons are rendered. I'm a jQuery noob, but I dug around and think I have a partially working solution using .hide and .show.

Here's a relevant snippet from my main.js:

$('#ss1').hide();
$('#ss2').hide();
function initAddThis() {
    addthis.init();
}
function checkMq() {
    if (Modernizr.mq('only screen and (min-width: 1140px)')) {
    $('div#ss1').html('<div class="addthis_toolbox">[snip]</div>');
    $('div#ss1').append('<div style="clear:left">[google search box]</div>');
    $('div#ss2').html(' ');
    addthis.toolbox("#ss1");
    $('#ss1').show();
} else {
    $('div#ss2').html('<div class="addthis_toolbox">[snip]</div>');
    $('div#ss2').append('<div style="clear:left">[google search box]</div>');
    $('div#ss1').html(' ');
    addthis.toolbox("#ss2");
    $('#ss2').show();
    }
}
$(function () {
    initAddThis();
    checkMq();
    $(window).resize(function () {
        checkMq();
    });
});

Despite the fact that I first hide the ss1 and ss2 divs, I still get that initial FOUC. When I resize the window back and forth it works as planned. It's just the initial load that has the issue. I'm assuming that perhaps the time between the render call initAddThis(); and the jQuery .show in checkMq(); is too short?

Community
  • 1
  • 1
Ian
  • 509
  • 12
  • 36
  • I cant help but feel adding a `$(window).resize` listener is a bit overkill for most use cases. It feels like your adding a lot of complexity to fix an edge case. How many 'regular' folk will be resizing your page to marvel at the responsiveness? – Duncan Beattie May 17 '13 at 15:21
  • You hit it with laser precision. After looking at several use cases I realized the resize stuff wasn't needed and just chose one spot for the AddThis buttons. HOWEVER, the crux of the question still remains. Even stripping it down to a bare AddThis call and a .show still gets me an FOUC and a layout shift. – Ian May 17 '13 at 22:01

0 Answers0