Fullpage.js 插件部分位置元素答案

【问题标题】：Fullpage.js plugin section position elementFullpage.js 插件部分位置元素
【发布时间】：2017-09-21 20:15:20
【问题描述】：

我正在为我的网站使用 fullpage.js 插件。我在每个版块上都放了我的网站标志，但是当我刷新页面时，第一版块的高度有几秒钟很小，几格后就正常了。这是我的代码：

    <html>
    <head>
        <script type="text/javascript">
    $(document).ready(function() {
        $('#fullpage').fullpage({
            sectionsColor: ['#1bbc9b', '#f5fbfd'],
            anchors: ['home', 'about'],
                navigation: true,
                scrollingSpeed: 850,
                animateAnchors: true,
                navigationPosition: 'right',
                responsiveWidth: 900,
                    afterResponsive: function(isResponsive){

                }
        });
    });
</script>
    </head>
<div id='fullpage'>
    <div class="section" id="home">
        <div class='container '>
                <img class='center-block index_logo img-responsive' style='position:relative; top:0;' src='<?php echo get_logo_by_lng();?>' />

        </div>
    </div>  
    <div class="section" id="second">
        <div class='container'>

                <img class='center-block index_logo img-responsive' style='position:relative; top:0;' src='<?php echo get_logo_by_lng();?>' />

        </div>
    </div>
</div>

</html>

有什么问题？我想我不明白如何在部分中定位元素。谢谢你

【问题讨论】：

图像未加载，因此不占用空间。加载时，图像会占用空间。
@SvenTheSurfer 但如果我不使用徽标，一切正常

标签： javascript jquery html css fullpage.js

【解决方案1】：

我认为是正常的，FullPage.js 格式化文档需要一些时间。

一些测试（反复点击Run）：

With a logo和With text，你也可以看到文字。

解决方案可以在 FullPage.js 渲染后创建淡入淡出效果：

CSS

html { opacity:0; }

afterRender: function() {
    $('html').animate({'opacity': 1}, 1000);
}

The example

【讨论】：