Как скрыть DIV, они отображаются на долю секунды на странице Загрузить - PullRequest
Новая
       17

Как скрыть DIV, они отображаются на долю секунды на странице Загрузить

5 голосов
/ 06 декабря 2009

Я сделал очень быстрое слайд-шоу jQuery, и я использую его, чтобы скрыть DIV, которые не должны отображаться, пока не наступит их очередь: 

$(document).ready(function() {
  //Hide All Div's Apart From First
  $('div#gall2').hide();
  $('div#gall3').hide();
  $('div#gall4').hide();

Но при загрузке страницы вы можете увидеть gall2 и gall4 в DIV за доли секунды до того, как они будут скрыты.

Хорошо бы просто добавить в мой CSS: 

#gall2, #gall3, #gall4{ display:none;}

Это решит проблему их показа на долю секунды, просто хочу узнать, приемлемо ли это

Ответы [ 5 ]

15 голосов
/ 06 декабря 2009

Отключение в CSS это нормально, но тогда пользователи без JS никогда их не увидят.

Чтобы отключить только для пользователей с JS, отметьте тело и соответствующий CSS: 

<body>
  <script type="text/javascript">
    document.body.className += " js";
  </script>

CSS: 

.js #gall2, .js #gall3, .js #gall4 { display: none; }
2 голосов
/ 06 декабря 2009

В качестве альтернативы ответу Орипа вы можете сделать следующее, если вам не нравится добавлять сценарии в <body>: 

<html>
<head>
  <script src="jquery.js"></script>
  <script>
    $('html').addClass('js');
    $(function() {
      // do DOM ready stuff
    });
  </script>
  <style>
  .js #gall2, .js #gall3, .js #gall4 { display: none; }
  </style>
</head>

Вы избежите мерцания таким образом, потому что вы добавляете имя класса в HTML до того, как DOM будет готов.

2 голосов
/ 06 декабря 2009

Да, конечно, это приемлемо сделать в вашем CSS

Остальные респонденты верны. Не рекомендуется делать вещи видимыми только с помощью JS. Я думаю, я просто думал технически: изменение вашего CSS таким образом решит проблему.

0 голосов
/ 06 декабря 2009

Они показываются, потому что по умолчанию div, скорее всего, установлены для показа. Поскольку для запуска события «ready» на странице может потребоваться несколько секунд, вызовы метода .hide () не будут выполняться, пока все на странице не будет загружено и готово.

Если я правильно помню, метод .hide () просто установит атрибут «display» элемента в «none». Таким образом, по умолчанию настройка div на скрытие через CSS позволяет им всегда быть скрытыми, и вы получаете дополнительный бонус от пользователей, и JS их не видит.

0 голосов
/ 06 декабря 2009

Всегда старайтесь представить, что увидят пользователи, у которых отключен JS. Если вы используете решение CSS, не первые DIV также не будут показаны для них, но если вы измените слайды программно, они, очевидно, увидят только первое. Лучше всего дать им вариант «Нет JS». Затем, если вы можете быть уверены, что у пользователя включен JS, вы можете скрыть div с помощью CSS и показать их с помощью JS.

...