Каков наиболее эффективный способ полностью скрыть элемент с вашей страницы?

enter image description here

<�Сильный> Ситуация

  • У меня есть много btns, которые я хочу скрыть.
  • Я вроде как их скрываю, но не так, как я намеренно хочу.
  • Они мигают очень быстро, пока моя страница загружается.
  • Я изо всех сил пытаюсь скрыть их.

Шаги, которые я сделал

  • Во-первых, для этого я использовал функцию hide() jQuery. Мне понравилось, но потом Я замечаю, что все эти btns мигают во время загрузки страницы. #Curious

  • Во-вторых, я узнал, что .css («display», «none»); быстрее, чем hide() , поэтому я попробовал это, и я все равно получаю тот же результат, может быть, быстрее, но Я все еще вижу мигание.

  • В-третьих, некоторые люди утверждают, что .attr ('disabled', true); еще быстрее, и YES Я пробовал это и даже не работает. </Р>

  • .attr ('disabled', true); может быть устаревшим, тогда я использую самый последний .prop ('disabled', true); , и это все еще не работает!

Теперь я совершенно не знаю. Надеюсь, кто-то может помочь мне положить этому конец.

Каков наиболее эффективный способ полностью скрыть элемент с вашей страницы?

1
Спасибо, ребята, за все ваши усилия. Я пойду головой и сделаю это сейчас.
добавлено автор kyo, источник
Спасибо, ребята, за все ваши усилия. Я пойду головой и сделаю это сейчас.
добавлено автор kyo, источник
Спасибо, ребята, за все ваши усилия. Я пойду головой и сделаю это сейчас.
добавлено автор kyo, источник
@bassxzero: Могу ли я показать их, если я использую css? Есть ли способ остановить/предотвратить мигание в начале?
добавлено автор kyo, источник
@bassxzero: Могу ли я показать их, если я использую css? Есть ли способ остановить/предотвратить мигание в начале?
добавлено автор kyo, источник
@bassxzero: Могу ли я показать их, если я использую css? Есть ли способ остановить/предотвратить мигание в начале?
добавлено автор kyo, источник
@druidicwyrm: Пожалуйста, поправьте меня, если я ошибаюсь. Я новичок во всем этом. Я использую jQuery hide() , потому что хочу показать их в одной точке. Я даже не уверен, какой путь лучше, если я могу вызвать их показать, я счастлив. Пожалуйста, порекомендуйте.
добавлено автор kyo, источник
@druidicwyrm: Пожалуйста, поправьте меня, если я ошибаюсь. Я новичок во всем этом. Я использую jQuery hide() , потому что хочу показать их в одной точке. Я даже не уверен, какой путь лучше, если я могу вызвать их показать, я счастлив. Пожалуйста, порекомендуйте.
добавлено автор kyo, источник
@druidicwyrm: Пожалуйста, поправьте меня, если я ошибаюсь. Я новичок во всем этом. Я использую jQuery hide() , потому что хочу показать их в одной точке. Я даже не уверен, какой путь лучше, если я могу вызвать их показать, я счастлив. Пожалуйста, порекомендуйте.
добавлено автор kyo, источник
most effiecient устанавливает один класс контейнера и, таким образом, использует C ++-хранимые правила CSS, чтобы превратить целую произвольную коллекцию элементов, скрытых или видимых. это намного быстрее, чем цикл в JS и манипулирование DOM для каждого затронутого элемента. использование CSS также позволяет избежать раздражающей загрузки страницы, потому что CSS будет применяться до отображения HTML, тогда как JS нужно будет загрузить jquery, а затем запустить весь код, после того, как страница будет уже видна.
добавлено автор dandavis, источник
most effiecient устанавливает один класс контейнера и, таким образом, использует C ++-хранимые правила CSS, чтобы превратить целую произвольную коллекцию элементов, скрытых или видимых. это намного быстрее, чем цикл в JS и манипулирование DOM для каждого затронутого элемента. использование CSS также позволяет избежать раздражающей загрузки страницы, потому что CSS будет применяться до отображения HTML, тогда как JS нужно будет загрузить jquery, а затем запустить весь код, после того, как страница будет уже видна.
добавлено автор dandavis, источник
most effiecient устанавливает один класс контейнера и, таким образом, использует C ++-хранимые правила CSS, чтобы превратить целую произвольную коллекцию элементов, скрытых или видимых. это намного быстрее, чем цикл в JS и манипулирование DOM для каждого затронутого элемента. использование CSS также позволяет избежать раздражающей загрузки страницы, потому что CSS будет применяться до отображения HTML, тогда как JS нужно будет загрузить jquery, а затем запустить весь код, после того, как страница будет уже видна.
добавлено автор dandavis, источник
most effiecient устанавливает один класс контейнера и, таким образом, использует C ++-хранимые правила CSS, чтобы превратить целую произвольную коллекцию элементов, скрытых или видимых. это намного быстрее, чем цикл в JS и манипулирование DOM для каждого затронутого элемента. использование CSS также позволяет избежать раздражающей загрузки страницы, потому что CSS будет применяться до отображения HTML, тогда как JS нужно будет загрузить jquery, а затем запустить весь код, после того, как страница будет уже видна.
добавлено автор dandavis, источник
Скрываясь, вы имеете в виду, что его даже не существует? Чтобы ускорить загрузку страницы?
добавлено автор Ali Almoullim, источник
@ rangerover.js "примерно эквивалентен вызову .css (" display "," none ")" api.jquery .com/скрыть . Итак, да, установите отображение none с помощью css, затем вызовите .show (); с JQuery.
добавлено автор bassxzero, источник
@ rangerover.js "примерно эквивалентен вызову .css (" display "," none ")" api.jquery .com/скрыть . Итак, да, установите отображение none с помощью css, затем вызовите .show (); с JQuery.
добавлено автор bassxzero, источник
@ rangerover.js "примерно эквивалентен вызову .css (" display "," none ")" api.jquery .com/скрыть . Итак, да, установите отображение none с помощью css, затем вызовите .show (); с JQuery.
добавлено автор bassxzero, источник
Можем ли мы увидеть пример? Вы действительно не думаете, что использовать jQuery должны были css. Это означает, что если вы знали, что вам нужно скрывать элементы при загрузке страницы, почему бы не использовать CSS для этого?
добавлено автор bassxzero, источник
Можем ли мы увидеть пример? Вы действительно не думаете, что использовать jQuery должны были css. Это означает, что если вы знали, что вам нужно скрывать элементы при загрузке страницы, почему бы не использовать CSS для этого?
добавлено автор bassxzero, источник
Можем ли мы увидеть пример? Вы действительно не думаете, что использовать jQuery должны были css. Это означает, что если вы знали, что вам нужно скрывать элементы при загрузке страницы, почему бы не использовать CSS для этого?
добавлено автор bassxzero, источник
Вы можете добавить дисплей к кнопкам без использования javascript. Есть ли причина, по которой вам нужно использовать js?
добавлено автор druidicwyrm, источник
Вы можете добавить дисплей к кнопкам без использования javascript. Есть ли причина, по которой вам нужно использовать js?
добавлено автор druidicwyrm, источник
Вы можете добавить дисплей к кнопкам без использования javascript. Есть ли причина, по которой вам нужно использовать js?
добавлено автор druidicwyrm, источник

12 ответы

Задержка, которую вы наблюдаете, - это время, которое требуется браузеру для загрузки и выполнения сценария, метод в JavaScript, который вы используете для установки отображения : none на кнопках не имеет значения, всегда будет задержка (потому что браузер должен загружать, анализировать и выполнять скрипт).

быстрый способ состоит в том, чтобы не использовать JavaScript и просто устанавливать display: none на кнопках через CSS (встроенный или в таблицу стилей), когда страница отображается.

1
добавлено
+1 Спасибо за подсказку, я определенно попробую это. Если я использую inline css, могу ли я показать их в какой-то момент, если захочу. Надеюсь, вы не против этого.
добавлено автор kyo, источник
@ rangerover.js - да, переключить класс на элемент (например, show-i ), а в вашем CSS добавить правило: .show-i {display: block! important;}
добавлено автор Adam, источник

Задержка, которую вы наблюдаете, - это время, которое требуется браузеру для загрузки и выполнения сценария, метод в JavaScript, который вы используете для установки отображения : none на кнопках не имеет значения, всегда будет задержка (потому что браузер должен загружать, анализировать и выполнять скрипт).

быстрый способ состоит в том, чтобы не использовать JavaScript и просто устанавливать display: none на кнопках через CSS (встроенный или в таблицу стилей), когда страница отображается.

1
добавлено
+1 Спасибо за подсказку, я определенно попробую это. Если я использую inline css, могу ли я показать их в какой-то момент, если захочу. Надеюсь, вы не против этого.
добавлено автор kyo, источник
@ rangerover.js - да, переключить класс на элемент (например, show-i ), а в вашем CSS добавить правило: .show-i {display: block! important;}
добавлено автор Adam, источник

Задержка, которую вы наблюдаете, - это время, которое требуется браузеру для загрузки и выполнения сценария, метод в JavaScript, который вы используете для установки отображения : none на кнопках не имеет значения, всегда будет задержка (потому что браузер должен загружать, анализировать и выполнять скрипт).

быстрый способ состоит в том, чтобы не использовать JavaScript и просто устанавливать display: none на кнопках через CSS (встроенный или в таблицу стилей), когда страница отображается.

1
добавлено
+1 Спасибо за подсказку, я определенно попробую это. Если я использую inline css, могу ли я показать их в какой-то момент, если захочу. Надеюсь, вы не против этого.
добавлено автор kyo, источник
@ rangerover.js - да, переключить класс на элемент (например, show-i ), а в вашем CSS добавить правило: .show-i {display: block! important;}
добавлено автор Adam, источник

Задержка, которую вы наблюдаете, - это время, которое требуется браузеру для загрузки и выполнения сценария, метод в JavaScript, который вы используете для установки отображения : none на кнопках не имеет значения, всегда будет задержка (потому что браузер должен загружать, анализировать и выполнять скрипт).

быстрый способ состоит в том, чтобы не использовать JavaScript и просто устанавливать display: none на кнопках через CSS (встроенный или в таблицу стилей), когда страница отображается.

1
добавлено
+1 Спасибо за подсказку, я определенно попробую это. Если я использую inline css, могу ли я показать их в какой-то момент, если захочу. Надеюсь, вы не против этого.
добавлено автор kyo, источник
@ rangerover.js - да, переключить класс на элемент (например, show-i ), а в вашем CSS добавить правило: .show-i {display: block! important;}
добавлено автор Adam, источник

Начиная с html5, существует новый атрибут hidden , который определяет, отображается ли элемент или нет. Вероятно, вы должны добавить это к элементам. Таким образом, элементы скрыты одновременно с анализом html, и нет задержки.

You can also add this the standard way with jquery, by using $(element).attr("hidden", "true");

Однако, если вы добавите атрибут с jquery, задержка все равно будет там, так как будет задержка между тем, когда отображается html, и когда JS загружается и запускается.

Примечание: это работает только в IE 11+

1
добавлено
Это ново, никогда не слышал об этом. Могу ли я сделать это с помощью jQuery? Можете ли вы добавить это как часть своего ответа. После этого людям может понравиться ваше решение.
добавлено автор kyo, источник

Начиная с html5, существует новый атрибут hidden , который определяет, отображается ли элемент или нет. Вероятно, вы должны добавить это к элементам. Таким образом, элементы скрыты одновременно с анализом html, и нет задержки.

You can also add this the standard way with jquery, by using $(element).attr("hidden", "true");

Однако, если вы добавите атрибут с jquery, задержка все равно будет там, так как будет задержка между тем, когда отображается html, и когда JS загружается и запускается.

Примечание: это работает только в IE 11+

1
добавлено
Это ново, никогда не слышал об этом. Могу ли я сделать это с помощью jQuery? Можете ли вы добавить это как часть своего ответа. После этого людям может понравиться ваше решение.
добавлено автор kyo, источник

Начиная с html5, существует новый атрибут hidden , который определяет, отображается ли элемент или нет. Вероятно, вы должны добавить это к элементам. Таким образом, элементы скрыты одновременно с анализом html, и нет задержки.

You can also add this the standard way with jquery, by using $(element).attr("hidden", "true");

Однако, если вы добавите атрибут с jquery, задержка все равно будет там, так как будет задержка между тем, когда отображается html, и когда JS загружается и запускается.

Примечание: это работает только в IE 11+

1
добавлено
Это ново, никогда не слышал об этом. Могу ли я сделать это с помощью jQuery? Можете ли вы добавить это как часть своего ответа. После этого людям может понравиться ваше решение.
добавлено автор kyo, источник

Начиная с html5, существует новый атрибут hidden , который определяет, отображается ли элемент или нет. Вероятно, вы должны добавить это к элементам. Таким образом, элементы скрыты одновременно с анализом html, и нет задержки.

You can also add this the standard way with jquery, by using $(element).attr("hidden", "true");

Однако, если вы добавите атрибут с jquery, задержка все равно будет там, так как будет задержка между тем, когда отображается html, и когда JS загружается и запускается.

Примечание: это работает только в IE 11+

1
добавлено
Это ново, никогда не слышал об этом. Могу ли я сделать это с помощью jQuery? Можете ли вы добавить это как часть своего ответа. После этого людям может понравиться ваше решение.
добавлено автор kyo, источник

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

Самый быстрый способ, конечно же, скрыть кнопки - удалить их из разметки HTML в целом. :)

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

button {
  display: none;
}

(Атрибут disabled просто делает его так, что пользователь не может взаимодействовать с кнопкой в ​​браузерах, которые поддерживают этот атрибут. Он скрывает элемент not ).

1
добавлено
Спасибо за прямое объяснение и подсказку.
добавлено автор kyo, источник

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

Самый быстрый способ, конечно же, скрыть кнопки - удалить их из разметки HTML в целом. :)

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

button {
  display: none;
}

(Атрибут disabled просто делает его так, что пользователь не может взаимодействовать с кнопкой в ​​браузерах, которые поддерживают этот атрибут. Он скрывает элемент not ).

1
добавлено
Спасибо за прямое объяснение и подсказку.
добавлено автор kyo, источник

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

Самый быстрый способ, конечно же, скрыть кнопки - удалить их из разметки HTML в целом. :)

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

button {
  display: none;
}

(Атрибут disabled просто делает его так, что пользователь не может взаимодействовать с кнопкой в ​​браузерах, которые поддерживают этот атрибут. Он скрывает элемент not ).

1
добавлено
Спасибо за прямое объяснение и подсказку.
добавлено автор kyo, источник

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

Самый быстрый способ, конечно же, скрыть кнопки - удалить их из разметки HTML в целом. :)

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

button {
  display: none;
}

(Атрибут disabled просто делает его так, что пользователь не может взаимодействовать с кнопкой в ​​браузерах, которые поддерживают этот атрибут. Он скрывает элемент not ).

1
добавлено
Спасибо за прямое объяснение и подсказку.
добавлено автор kyo, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)