Как активировать эквалайзер после загрузки шрифтов или при перекомпоновке?

Question

У меня проблема с запуском плагина эквалайзера Foundation слишком рано после того, как DOM будет готов. Я загружаю некоторые шрифты TypeKit, и они загружаются за несколько миллисекунд, но плагин эквалайзера срабатывает до загрузки шрифтов.

Происходит то, что резервный шрифт (высота которого отличается от моих шрифтов TypeKit) виден в течение очень короткого времени, возможно, 50 мс. Эквалайзер применяет высоты к моим элементам div, когда виден запасной шрифт. Резервный шрифт выше, а в некоторых случаях его текстовые строки разбиваются на 2 строки.

Затем, когда шрифт TypeKit загружается, div не изменяет размер. Их оставляют слишком высокими, потому что их высота регулировалась, когда был виден запасной шрифт.

Итак... есть ли способ запустить плагин эквалайзера после загрузки шрифтов TypeKit? Кроме того, я видел, что есть способ запустить плагин при перекомпоновке, что может быть лучше, но я ничего не вижу о перекомпоновке в Foundation 6, только 5.

Answer 1

После прочтения документов Typekit и Foundation 5 Equalizer ( тоже Foundation 6), я бы попробовал это:

try {
    Typekit.load({
      active: function() {
        // JavaScript to execute when fonts become active
        $(document).foundation('equalizer', 'reflow'); // Foundation 5
    // OR
        var elem = new Foundation.Equalizer(element); 
        elem.applyHeight();         // Foundation 6

      }
    })
} catch(e) {}

Тем не менее, современный способ сделать элементы равными по высоте - это использовать flexbox в вашем CSS вместо плагина JavaScript.

Answer 2

Попробовав всевозможные обходные пути, я просто изменил код включения Typekit из (старого) JavaScript, встроенного в фрагмент CSS:

Из этого:

<script src="https://use.typekit.net/yourprojectcode.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

К этому:

<link rel="stylesheet" href="https://use.typekit.net/yourprojectcode.css">

Эквалайзер тогда работал нормально.