Подтвердить что ты не робот

Как скрыть элементы с помощью jQuery перед их визуализацией?

Я хочу сгенерировать html-макет с областями (divs, spans), которые могут быть показаны/скрыты условно. Эти области скрыты по умолчанию.

Если я вызову метод .hide() с jquery на document.ready, эти области могут мигать (браузеры отображают частично загруженные документы). Поэтому я применяю стиль "display: none" в макете html.

Интересно, что лучше всего избегать мигания, потому что применение "display: none" нарушает правило инкапсуляции. Я знаю, что делает jquery с помощью hide/show и использует его. Если jQuery, скрывающий/показывающий реализацию, изменится в один прекрасный день, я получу весь сайт неработоспособным.

Заранее благодарю

4b9b3361

ОТВЕТЫ

Ответ 1

Абсолютно ничего плохого в настройке встроенного свойства отображения элемента, особенно если вы инкапсулируете его в класс css.

Ответ 2

@Андрей,

Я знаю, что ответ уже принят, но использование display: none; станет кошмаром для пользователей без Javascript.

Используя встроенный Javascript, вы можете скрыть элемент без его мигания. Пользователи без Javascript все равно смогут это увидеть.

Рассмотрим несколько div, которые должны быть скрыты при загрузке страницы.

<head>
    <script type="text/javascript" src="jQuery.js"></script>
</head>
<body>
    <div id="hide-me">
        ... some content ...
    </div>
    <script type="text/javascript">
        $("#hide-me").hide();
    </script>

    <div id="hide-me-too">
        ... some content ...
    </div>
    <script type="text/javascript">
        $("#hide-me-too").hide();
    </script>
</body>

Встроенный Javascript будет запускаться сразу после визуализации элемента, тем самым скрывая его от пользователя.

Ответ 3

Я согласен с Борисом Гери, что это не чрезмерная разработка, а скорее стандартная передовая практика. Я бы пошел несколько иначе, чем Борис, добавив сначала класс no-js в html, а затем удалив его с помощью JavaScript.

Таким образом, вы не ожидаете, что документ будет готов скрывать контент, и без какого-либо JavaScript вы все равно увидите контент. Предполагая, что у пользователя JavaScript не соответствует философии прогрессивного улучшения.

ex:

<html class="no-js">
<body>
<div id="foo"></div>
</body>
</html>

my css:

#foo {
    display: none;
}
html.no-js #foo {
    display: block;
}

и javascript

$(document).ready(
   function()
   {
     $('html').removeClass('no-js');
   }
);

********* ИЛИ на основе каждого случая ***********

Пример:

<div class="no-js" id="foo">foobar and stuff</div>

CSS

.no-js {
  display:none;
}
#foo {
  display: block;
}
#foo.no-js {
  display: none;
}

JS:

$(document).ready(function(){
  // remove the class from any element that has it.
  $('.no-js').removeClass('no-js');
});

Ответ 4

Обычно я устанавливаю класс .js для моего элемента, чтобы установить правильное свойство, когда включен javascript.

Затем я могу установить CSS в зависимости от наличия javascript или нет.

ex:

<html class="js">
<body>
<div id="foo"></div>
</body>
</html>

my css:

html.js #foo
{
    display: none;
}

и javascript

$(document).ready(
   function()
   {
     $(html).addClass('js');
   }
);

Ответ 6

Почему бы не сделать это?:

// Hide HTML element ASAP
$('html').hide();

// DOM-ready function
$(function () {
   // Do stuff with the DOM, if needed
   // ...

   // Show HTML element
   $('html').show();
}

Кажется, все нормально!

С уважением.

Ответ 7

вы можете применить "display: none" в классе CSS.

Потому что порядок, который браузер должен прочитать HTML-код, чтобы JavaScript нашел элемент. Вы должны пометить элемент скрытым, так как браузер читает ваш HTML.

Как вы можете вставить HTML-код в свой JavaScript, и вы можете вызвать hide до его отображения.

Ответ 8

Я бы всегда использовал Modernizr.js http://modernizr.com/, чтобы справиться с этим.

С Mondernizr в HTML-тег вашей страницы добавлен класс 'js' или 'no-js'.

Здесь вы можете скрыть свои элементы, только если тег html имеет класс js.

Modernizr отлично подходит для многих других приложений и стоит прочитать, если вы еще не использовали его: http://modernizr.com/docs/

Ответ 9

То, что я всегда делаю, это создать пустой div. И если некоторые данные внутри этого компонента должны быть показаны, я асинхронно загружаю данные (т.е. Html) в него с помощью $.ajax().

Нет необходимости в дополнительной lib.

Ответ 10

Это мое предложение. Он использует это решение для создания нового правила CSS. Главное: класс CSS, который скрывает некоторый html, будет создан, если JS доступен, иначе нет. И это происходит до того, как основное содержимое (с частицами html, которые должны быть изначально скрыты) обрабатывается!

<html>
<head>
    <style>
        /* This class gets overwritten if JS is enabled. If a css file (bootstrap, ...) 
        gets loaded with such a class this would be also overwritten. This solution does 
        not require the class. It is here just to show that it has no effect 
        if JS is activated.*/
        .hidden {
            display: block;
            background: red;
        }
    </style>
    <script>
        // this is copied from the linked stackoverflow reply:
        function setStyle(cssText) {
            var sheet  = document.createElement('style');
            sheet.type = 'text/css';
            /* Optional */
            window.customSheet = sheet;
            (document.head || document.getElementsByTagName('head')[0]).appendChild(sheet);
            return (setStyle = function (cssText, node) {
                if (!node || node.parentNode !== sheet)
                    return sheet.appendChild(document.createTextNode(cssText));
                node.nodeValue = cssText;
                return node;
            })(cssText);
        }

        // And now: This class only gets defined if JS is enabled. Otherwise 
        // it will not be created/overwritten.
        setStyle('.hidden { display: none; }');

        // Attention: Now that the class is defined it could be overwritten 
        // in other CSS declarations (in style tags or with loaded CSS files).
    </script>
</head>
<body>

    <button>Show/Hide</button>

    <div class="">before</div>
    <div class="my-element hidden">
        Content that should be initially hidden if possible.
        You may want to multiply this div by some thousands
        so that you see the effect. With and without JS enabled.
    </div>
    <div class="">after</div>

    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script>
        // Here is some 'normal' JS code. Very likely loaded as a JS file:
        $('button').click(function () {
            $('.my-element').toggleClass('hidden');
            // or setting display directly: 
            //   $('.my-element').toggle() 
            // but well, having class hidden though it is not 
            // hidden makes is not so nice...
        })
    </script>

</body>
</html>

Немного сложнее, но я думаю, что это правильное решение. Преимуществом является то, что мерцание предотвращается и что оно работает, если JS не включен. И это не требует jQuery.

Ответ 11

После некоторого времени размышления у меня появилась идея следующего решения. По сравнению с моим другим решением я сократил его до необходимой части (и использовал this, чтобы добавить класс по JS):

<html>
<head>
    <style>
        /* This could be also part of an css file: */
        .container-with-hidden-elements .element {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <script>
            document.getElementsByClassName('container')[0]
                    .className += ' container-with-hidden-elements';
        </script>

        <div class="element">Content that should be initially hidden if possible.</div>
    </div>
</body>
</html>

Тег script запускается немедленно и добавляет класс в контейнер. Внутри этого контейнера есть некоторые вложенные элементы, которые теперь скрыты, потому что у контейнера есть специальный класс, и теперь есть правило CSS.

Опять же, это происходит до того, как обрабатывается оставшийся html (предотвращает мигание). А также, если JS отключен, все элементы заметно по умолчанию - что можно назвать прогрессивное улучшение.

Не уверен, что это работает в каждом браузере. Но ИМО это было бы простое и опрятное решение.

Ответ 12

Есть много ответов, вы можете использовать метод show() и кодировать условие, чтобы показать или скрыть. Вот пример кода show_hide после завершения рендеринга

  <div id="banner-message">
  <p id="hello">Hello World!!!!!</p>
  <input id="statusconf" value="" type="checkbox">Show hello world text when i click this check box
  <button>Change color</button>
</div>

    // find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
})

//Set this up as part of document ready if you wish
//$(document).ready(function(e) {

    $("#statusconf").show(function(e) {
            if ($("#statusconf").is(':checked') === false) {
                $('#hello').hide();
            } else {
        $("#hello").show();
      }
  });

    $("#statusconf").on("click", function(e) {
    if ($("#statusconf").is(':checked') === false) {
                $('#hello').hide();
            } else {
        $("#hello").show();
      }
  });

//});