Как предотвратить появление html-текста перед выполнением кода Javascript

0

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

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

Теперь, когда я открываю эту страницу, иногда она работает (она прячет текст сразу, так что это пустая страница), а в других случаях текст отображается как одна секунда, а затем текст становится скрытым. Почему это не скрывает текст сразу в 100% случаев? будет ли он работать в 100% случаев, если я это сделаю

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

?

  • 0
    Простейшим решением было бы скрыть их с помощью css: .screen { display:none; }
  • 0
    @JasonP правильно, но есть ли способ сделать это с JS?
Показать ещё 3 комментария
Теги:
load

1 ответ

4
Лучший ответ

Создайте обертку 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>
Поделиться
  • 0
    Хм, есть ли способ сделать это без добавления каких-либо дополнительных классов? Как же спрятаться (); функция работает только несколько раз в первую очередь? Разве это не должно работать все время?
  • 0
    Я отредактировал ответ. Поместите display:hide в класс .screens если вы не можете изменить HTML (или просто не хотите). Непоследовательное поведение, которое вы видите, заключается в том, что иногда HTML завершает загрузку до того, как у javascript появляется возможность запуска, а иногда javascript запускается до полной загрузки HTML. Если вам не повезло, js может запуститься до .screen как загрузится .screen , поэтому элемент никогда не будет скрыт.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню