Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Как узнать что Font Awesome загрузился

Браузеры загружают шрифты по-разному. Например, хром во многих случая старается загрузить шрифт в последнюю очередь. В принципе это не проблема, если речь идет об отображении текста – пока загружается нужный шрифт можно отображать дефолтный. Однако, если шрифт иконочный, то по-умолчанию отображать просто нечего и пустые кнопки будут сидеть в интерфейсе пока не загрузится недостающий файл.

В принципе, если вы сами динамически загружаете шрифт, то тут еще можно что-то сделать. Добавляете программно тег link и слушаете событие загрузки. Если же вы загружаете через импорт в файле css, то вам никакое событие слушать не получится.

А как бы хотелось, чтобы все работало – хотелось бы пока нет иконок отображать текст, а как только иконки будут готовы, то рисовать уже их. Только в этом случае, как я уже сказал, нужно знать когда шрифт готов. Так вот есть способ это выяснить. Нужно отрисовать иконку на канвасе и если она отобразилась, то шрифт точно готов.

Почему именно на канвасе? Просто потому что мы можем получить пиксели от канваса и таким образом можем знать, что было что отображать.

Разумеется, что так можно отловить загрузку любого шрифта, не только Font Awesome, но я думаю, что это и так понятно.

Оригинальная идея от сюда, я только переписал в более современный вариант кода.

Как раз это решения я использовал в проекте, над которым работаю: https://artemdemo.github.io/img-review/build. А то у меня весь код загружается асинхронна и шрифт в тоге в хроме подгружается таааак медленно, что прямо ужас. Теперь стало лучше 🙂

Поделиться:
comments powered by Disqus