如何防止在 Javascript 代码执行之前出现 html 文本

Question

说我的html是这样的

<div class='screen'>
    <p>*A lot of text here*</p>
</div>

<div class='screen'>
    <p>*More text and some images here*</p>
</div>

<div class='screen'>
    <p>*Even more text and an image here*</p>
</div>

在我的 html 下方，我有这个

<style>
    .screens {
        margin: 10px;
    }
</style>

<script type='text/javascript'>
    hide();
</script>

现在，Javascript 函数 hide 位于我在 html 文件中导入的外部 JS 文件中。这是隐藏功能。

function hide() {
    $('.screen').hide();
}

现在，当我打开此页面时，有时它会起作用（它会立即隐藏文本，因此它是一个空白页面），而其他时候，文本会显示一秒钟，然后文本会被隐藏。为什么它不会在 100% 的时间里立即隐藏文本？如果我这样做，它会 100% 工作吗？

<script type='text/javascript'>
    $(document).ready(function() {
        hide();
    });
</script>

?

Answer 1

创建一个包装 div 并给它一个display:none;。需要时，用show()显示它

CSS：

.wrapper{ display:none;}

HTML：

<div class="wrapper>YOUR CONTENT</div>

Javascript

$(document).ready(function(){
    $(".wrapper").show();
});

或者，如果您只关心 .screen，请将其 CSS 更改为 display:none，并将 javascript 更改为 show() 而不是 hide()

<style>
    .screens {
        margin: 10px;
        display:none;
    }
</style>

<script type='text/javascript'>
    show();

    function show() {
        $('.screen').show();
    }
</script>