Скрытие элемента в pageLoad() с помощью jQuery

#javascript #jquery #css

Вопрос:

Если я скрою некоторые элементы в page_load с помощью jquery, элементы мерцают на долю секунды при публикации страницы, а затем исчезают:

   function pageLoad() {

        $('#panelOne').hide();
        $('#panelTwo').hide();

Есть ли способ предотвратить мерцание?

Я не хочу устанавливать для элементов css значение visibility: hidden, потому что тогда вызов метода jquery .show() позже, похоже, не покажет элемент.

1. Обычно я просто устанавливаю display: none, но я хотел бы увидеть лучшее решение, если оно есть.

2. Установка css для отображения: none; является лучшим вариантом. Это будет работать с .show(); позже. мир…

3. Я сам пробовал display: none; в CSS, но как заставить его работать без javascript для переключения отображения, если пользователь отключил JS?

4. если они отключат javascript, вам нужно будет сделать это на сервере.

Ответ №1:

Настройка visibility: hidden не работает, но display: none работает. Смотрите jsFiddle.

Вы могли бы сделать это в событии DOMReady, но было бы чище сделать это в CSS.

1. функция hide() в любом случае устанавливает значение display равным none, так что это не должно иметь никакого значения (за исключением того, что функция hide () позволит избежать некоторых ошибок в крайнем случае, сохранив исходное значение display)

2. Я полагаю, что метод hide в jQuery на самом деле устанавливает display: none для вас.

3. Ну да. Но это чище и почти наверняка быстрее сделать в CSS.

4. Проблема с подходом CSS заключается в том, что вам затем требуется javascript для отображения содержимого. Предположительно, вся причина, по которой он доставляется, заключается в том, что он должен быть показан в какой-то момент; те, у кого нет javascript, тогда пропускают содержимое.

5. @Bobby Не обязательно верно. Ссылки, которые используются для отображения содержимого, могут изящно деградировать до страницы, где содержимое отображается по умолчанию. Или, возможно, содержимое — это заметка между прочим, полезная, но необязательная. Правильный подход зависит от обстоятельств. Я изо всех сил пытаюсь понять, заслуживает ли это понижения.

Ответ №2:

$.show() не работает с элементами, для которых установлено значение visibility: hidden . Вам нужно использовать display: none . Это сработает для вас лучше, чем использование jQuery для скрытия в DOM ready, и абсолютно гарантирует, что вы не увидите мерцания.

Ответ №3:

Определенно используйте document ready в отличие от page load:

 $(function() {
    $('#panelOne, #panelTwo')
        .hide();
});

Ответ №4:

Вместо того, чтобы скрывать в pageload, спрячьте его в domready вот так:

 $(function() { ........ });

Замените …… вашими двумя скрытыми строками.

Domready запускается, когда dom-дерево построено, и намного раньше, чем pageLoad. Pageload ожидает запуска изображений и прочего. (предполагается, что у вас есть pageLoad следующим образом: <html onload="pageLoad();"> ).

1. На самом деле я все еще вижу мерцание при выполнении этого. Это то же самое, что document.ready()?

2. Да, $(функция) — это сокращение от document.ready. Если вы все еще видите мерцание, вам нужно подумать о том, чтобы скрыть элемент в коде (html / css), а затем снова показать его в js, когда захотите.

3. @Sean: у вас есть пример URL-адреса? Я изо всех сил пытаюсь понять причину мерцания.