0

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

Скриншот 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()}`);
    //.....................
});
3
  • Если после этого перезагружать просто через F5, то все хорошо
    – sazdan
    24 июл 2020 в 11:57
  • У вас потом подгружаются стили или потом подгружаются шрифты?... Уточните, ибо это разные вещи.
    – NoSkill
    24 июл 2020 в 13:11
  • Шрифты указаны в стилях, по этому так подумал. Хотя они из Гугл фонтс, так что вполне вероятно что именно шрифты подгружаются позже.
    – sazdan
    24 июл 2020 в 13:12

2 ответа 2

2

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

$(window).on('load', function() {

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

});

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

2
  • попробовал этим способом и способом с таймером (даже на большое время), все-равно после ctrl+F5 и так и так оно так же сначала создает текст с обычным шрифтом, потом считает высоту и потом только дает нормальный шрифт
    – sazdan
    24 июл 2020 в 15:18
  • все, я разобрался. до этого я брал все три строки и делал их внутри он лоад, сейчас я сначала выполнил первые две строки, и только потом выполняется третья в он лоад. теперь все работает, спасибо.
    – sazdan
    24 июл 2020 в 15:23
0

$(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()}`);
    });
    //.....................
});

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

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.