@artman_vrn

Как быстро скрыть большое количество элементов?

Здравствуйте.
На странице есть около 10.000 элементов с классом .order_item.
Возникла проблема при вызове $(".order_item").css('display', 'none');
Если засечь время выполнения команды, то оно во всех браузерах порядка 30-40 миллисекунд.
Только в chrome, opera, yandex сразу происходит и ренндинг, и исчезновение этих элементов.
А в firefox после выполнения идет зависание порядка 10 секунд и потом только исчезновение этих элементов.

p.s. посмотреть https://codepen.io/ilya_zakharov/pen/qBBgaoJ
  • Вопрос задан
  • 124 просмотра
Пригласить эксперта
Ответы на вопрос 2
TTATPuOT
@TTATPuOT
https://code.patriotovsky.ru/
Вам не нужно каждый элемент в отдельности скрывать. Добавьте к body класс .hide_childs, а в CSS правило:
body.hide_childs .order_item{
  display: none;
}

Лаги у вас из-за проблемы jQuery и его долгой отработки DOM'а. Если бы вы ванильный JS использовали, возможно, каждый элемент и можно было бы скрыть.
Ответ написан
@choupa
Архитектор (обычный, который строит)
Предлагаю сразу в документе нужным элементам прописать класс to_hide. Само определение класса сделать по ходу выполнения, когда надо скрыть элементы:
$('body').append('<style>.to_hide{display:none}</style>')

Фишка в том, что тут нет медленной операции выборки прорвы элементов, класс to_hide с самого начала прописан элементам!

P.S.: Сначала я решил прописать класс order_item прямо в HTML в <style>...</style>, а потом регулярным выражение добавлять в описание класса display:none. Даже написал сюда такой ответ, но потом до меня дошло, что этот гемор не нужен, а лучше сделать это отдельным классом.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы