Плохо функционирует скрипт из-за того, что он срабатывает раньше чем подгружаются стили

Question

Есть скрипт, который обрабатывает svg. Его целью является изменение слова и растяжка его на всю высоту экрана. Но возникла такая проблема, что если перезагрузить страницу через ctrl+F5, он сначала растягивает слово со стандартным шрифтом (скриншот 1), а потом подгружаются стили и слово сжимается (скриншот 2):

HTML:

<!--...-->
<svg viewBox="-2.5 0.5 16 75">
      <g transform="rotate(90 0 0)">
          <text id="text0"></text>
      </g>
</svg>
<!--...-->

JS:

$(document).ready(function(){
    //.....................
    let text = document.getElementById("text0");
    text.innerHTML= "<tspan fill='#282828'>OCTOPU</tspan><tspan fill='#191919'>S</tspan>";
    document.querySelector("#string0").querySelector("svg").setAttributeNS(null, "viewBox", `-2.5 0.2 16 ${text.getComputedTextLength()}`);
    //.....................
});

css html javascript jquery

NoSkill · Answer

Шрифты подгружаются асинхронно. $(document).ready срабатывает когда готова DOM, и на данном этапе картинки и шрифты еще могут подгружаться. Выход один - делать прелоадер шрифта на AJAX, и запускать ваш фикс, когда шрифт гарантированно загружен. Более тупой вариант - сделать все в момент onload:
$(window).on('load', function() {

// все на странице уже подгрузилось

});

Еще имейте в виду $(window).on('load', ...) ни в коем случае не должен быть внутри обработчика $(document).ready(...).

Enokin · Answer

$(document).ready(function(){
    //.....................
    setTimeout(() => {
      let text = document.getElementById("text0");
      text.innerHTML= "<tspan fill='#282828'>OCTOPU</tspan><tspan fill='#191919'>S</tspan>";
      document.querySelector("#string0").querySelector("svg").setAttributeNS(null, "viewBox", `-2.5 0.2 16       ${text.getComputedTextLength()}`);
    });
    //.....................
});

Можно попробовать таким костылём сделать. Но выглядит плохо

Плохо функционирует скрипт из-за того, что он срабатывает раньше чем подгружаются стили

2 Answers

Add your own answers!

Ask a Question