Как предотвратить HTML текст, появляющийся перед тем Javascript кода выполняет

Question

Say мой 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 в внешний JS-файл, который я импортировал в html-файл. Это скрытая функция.

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() i nstead of hide()

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

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

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