0

私はレスポンシブな再設計に取り組んでおりAddThis、クエリによって挿入された後にフォロー ボタンがページにレンダリングされるときに発生する、スタイル設定されていないコンテンツのレイアウト シフトとフラッシュを削減しようとしていModernizrます。メディアクエリに応じて、コードは IDまたはAddThisの div に挿入されます。(以前の解決済みの質問を参照してください。)ss1ss2

AddThisサポートは、ボタンがレンダリングされるまで div を非表示にすることを提案しました。私はjQuery初心者ですが、掘り下げて、 and を使用して部分的に機能するソリューションがあると思い.hideます.show。

私の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();
    });
});

ss1最初にとdiv を非表示にしたにもかかわらず、ss2最初の FOUC が表示されます。ウィンドウのサイズを前後に変更すると、計画どおりに機能します。問題があるのは初期ロードだけです。おそらくレンダリング呼び出しinitAddThis();と jQuery の.show間の時間checkMq();が短すぎると思いますか?

4

0 に答える 0