Проблема применения стилей в js
Скорее всего это не сильная проблема, но возможно её можно решить, если да то помогите советом. Представим что я хочу создать кнопки которые меняют размер текста и записывают все в localStorage. Позже же я прописываю чекер который будет отлавливать значение и менять размер текста. Вот в чём и сложность, когда подгружает страница сначала она загружает же css документ, а потом меняет значение через js, тогда в таком случае на несколько сотен миллисекунд я вижу как текст становится сначала 16px, а потом меняется на тот который мне нужен, возможно ли как-то исправить эту ситуацию и сделать более быстрое применение размера? Если решение есть на jQuery, то прощу его не трогать, интересно понять на чистом языке.
Ответы (1 шт):
В данном случае наиболее оптимальное, с точки зрения конечного пользователя, решение это сделать так что бы он не видел эти краткосрочные изменения размеров кнопки.
С точки зрения разработчика, на первый взгляд, это может показаться не очень удобно, но стратегия предложенная ниже определенно заслуживает внимания если Вы стремиться к качественному UI и UX.
Поскольку я не до конца знаю/понимаю Ваши специфику и задачи то соответственно просто оставлю это здесь, а стоит оно того или нет решать Вам.
Стратегия:
Перед закрывающими тегом </head> разместите скрипт, который срабатывает во время загрузки страницы. Он должен обращаться к корневому элементу (body в JS или html, body в jQuery) и делать его opacity моментально равным 0. А через несколько секунд (если воспользоваться таймером) или по любому другому хуку/тригеру верните значение обратно к 1, когда кнопка будет уже "правильного" размера.