如何防止在执行Javascript代码之前出现html文本 [英] How to prevent html text appearing before Javascript code executes

问题描述

说我的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下面，我有这个

and right below my html, I have this

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

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

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

Now, the Javascript function hide is in an external JS file which I imported in the html file. This is the hide function.

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

现在，当我打开此页面时，有时它可以工作(它会立即隐藏文本，因此它是空白页面)，有时，它会显示一秒钟，然后文本就会被隐藏.为什么它不会立即100％隐藏文本?如果我能100％的时间工作

Now, when I open up this page, sometimes it works (it hides the text right away so it is a blank page) and other times, the text shows for like one second and then the text becomes hidden. How come it doesn't hide the text right away 100% of the time? would it work 100% of the time if I do

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

?

推荐答案

创建包装div并为其提供 display:none; .需要时，使用 show()

Create a wrapper div and give it a display:none;. When needed, display it with show()

CSS:

.wrapper{ display:none;}

HTML:

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

JavaScript

Javascript

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

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

Or if you just care about .screen, change its CSS to display:none and the javascript to show() instead of hide()

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

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

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

这篇关于如何防止在执行Javascript代码之前出现html文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！