Как справиться с мерцанием значков из шрифтов?

Question

[Ярослав]

На моём мобильном приложении пользователь часто гуляет по страницам туда-сюда. Используются иконические шрифты из бутстрапа и из flaticon. Я ими очень доволен, всё отлично, но одно НО - при перезагрузке старницы они "моргают", т.е. некоторый промежуток времени их нету. В то время как картинки сразу же отображаются.

Как справиться с морганием? Может быть, подождать пока страница полностью загрузится? Но мне кажется это решение не очень крутым. Лучше бы конкретный блок div появлялся только после его полной перезагрузки. Или есть более прямое решение?

Answer 1

[Сергей Горячев]

Может быть, подождать пока страница полностью загрузится?

Очень хорошее решение, кстати. Уберегает пользователя от вида сайта в процессе загрузки, и кривости.

Лучше бы конкретный блок div появлялся только после его полной перезагрузки.

В принципе, можно и так, но сайт должен быть одинаково красиво сверстан с иконками и без них. Для этгго можно показывать иконки например через jquery, изначально сделав им opacity 0, а после загрузки контента показывать opacity 1, но это костылек, и его я считаю не самым удачным решением. Блок не понимает - загрузился он полностью или нет, если вы используете иконочные шрифты.

Comments

[Ярослав]

Спасибо. А как сделать показ сайта только после загрузки шрифта?

[Сергей Горячев]

Ярослав: А шрифты откуда грузятся?

[Сергей Горячев]

Ярослав: Хотя в общем, без разницы. Просто подключите загрузку шрифтов выше всех элементов. И тогда шрифты будут подгружаться первыми, особенно иконочные.

[Ярослав]

Sergey Goryachev: у меня стоит самое первое определение (в теге head) и уже там - определение шрифта через @font-face. Кстати говоря, моргает только в chrome. Firefox почему-то корректно ждёт полной загрузки.

[Сергей Горячев]

Ярослав: без предзагрузки страницы в хроме у меня тоже есть такая проблема на некоторых страницах. С недавнего времени привык ставить прелоадер на сайты, лучше уж секунду не показывать сайт, чем показывать криво. Это уже мое мнение.