0

我一直在进行响应式重新设计，并试图减少AddThis在被Modernizr查询插入后在页面上呈现我的关注按钮时发生的布局偏移和无样式内容的闪烁。根据媒体查询，AddThis代码要么插入到带有 ID 的 div 中，要么ss1插入ss2. （请参阅上一个已解决的问题。）

AddThis支持建议我隐藏 div 直到呈现按钮。我是一个 jQuery 菜鸟，但我四处挖掘并认为我有一个使用.hideand的部分工作解决方案.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和ss2div，但我仍然得到了最初的 FOUC。当我来回调整窗口大小时，它按计划工作。这只是有问题的初始负载。我假设渲染调用initAddThis();和 jQuery.show之间的时间可能checkMq();太短了？

4

0 回答 0