Как отловить, когда загрузились мои иконки материалов?

Question

Я использую эти иконки шрифтов Google: https://material.io/icons/

Я разрабатываю веб-расширение, и некоторые веб-страницы, такие как Github, блокируют мои значки, я пытаюсь проверить с помощью vanilla js, доступен ли шрифт или нет, проблема в том, что я не знаю, когда мне нужно подтвердить, если шрифт был загружен или нет.

Я использую setTimeOut, но я действительно ненавижу этот метод.

Мой код:

function confirmFont(view) {

     setTimeout(function(){
         if(!document.fonts.check("12px Material-Icons")) {
             .....
         }
     }, 2000);

 }

Я попытался с готовым документом и загрузкой окна, но это не работает, мне нужно быть более конкретным.

Answer 1

Если вы уже используете document.fontsпочему бы не использовать Eventsчто с этим интерфейсом? КакloadingdoneСобытие запускается всякий раз, когда завершается загрузка набора шрифтов, вы можете использовать прослушиватель событий для проверки ваших шрифтов. Ниже приведен рабочий пример:

!function() {
    // Setting up listener for font checking
    var font = "1rem 'Material Icons'";
    document.fonts.addEventListener('loadingdone', function(event) {
        console.log(`Checking ${font}: ${ document.fonts.check(font)}`);
    })

    // Loading font
    var link = document.createElement('link'),
        head = document.getElementsByTagName('head')[0];

    link.addEventListener('load', function() {
        console.log('Font loaded');
    })

    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
    head.appendChild(link);
}()

<i class="material-icons md-48">face</i>

Answer 2

Я решил это следующим образом:

document.fonts.ready.then(function () {
    if(!document.fonts.check("12px Material-Icons")) {
        ...
    }
});