Как скрыть элементы с помощью jQuery до того, как они будут отрисованы? - PullRequest
Новая
       101

Как скрыть элементы с помощью jQuery до того, как они будут отрисованы?

44 голосов
/ 10 мая 2010

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

Если я вызываю метод .hide () с jquery для документа. Уже эти области могут мигать (браузеры отображают частично загруженные документы). Поэтому я применяю стиль «display: none» в HTML-макете.

Интересно, что является лучшим способом избежать мигания, потому что применение «display: none» нарушает правило инкапсуляции - я знаю, что делает jquery со скрыть / показать и использовать его Если реализация скрытия / показа jquery однажды изменится, я получу весь сайт неработоспособным.

Заранее спасибо

Ответы [ 12 ]

33 голосов
/ 03 октября 2010

@ Андрей,

Я знаю, что ответ уже принят, но использование 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 будет запущен, как только элемент будет отображен, скрывая его от пользователя.

5 голосов
/ 19 января 2012

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

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

например: 

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

мой 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;
}

ЯШ: 

$(document).ready(function(){
  // remove the class from any element that has it.
  $('.no-js').removeClass('no-js');
});
3 голосов
/ 14 февраля 2015

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

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

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

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

Вроде нормально работает!

С уважением.

3 голосов
/ 03 октября 2010

Я тоже боролся с этим, особенно в IE, и нашел это очень полезным: http://robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-whether-javascript-support-is-available/

3 голосов
/ 10 мая 2010

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

3 голосов
/ 10 мая 2010

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

Затем я могу установить CSS в зависимости от того, присутствует JavaScript или нет.

например: 

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

мой css: 

html.js #foo
{
    display: none;
}

и JavaScript 

$(document).ready(
   function()
   {
     $(html).addClass('js');
   }
);
1 голос
/ 10 мая 2010

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

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

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

0 голосов
/ 09 апреля 2019

Существует много ответов, вы можете использовать метод 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();
      }
  });

//});
0 голосов
/ 03 мая 2016

После некоторого времени размышления у меня появилась идея следующего решения. По сравнению с моим другим решением я сократил его до необходимой части (и использовал 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 отключен, все элементы по умолчанию отображаются визуально - что можно назвать Прогрессивное улучшение .

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

0 голосов
/ 02 мая 2016

Это мое предложение. Он использует это решение до создает новое правило 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.

Страница:
...