Сделать рендеринг SVG после загрузки CSS (стилизованные компоненты React)

Я создаю целевую страницу с помощью GatsbyJS и Styled-Components, где я хочу отображать логотип SVG в центре экрана.

После развертывания на сервере кажется, что при загрузке моей страницы SVG загружается первым и сразу отображается в верхнем левом углу экрана, по-видимому, до CSS, который заставляет его перескакивать в центр после заметной задержки.

Вот как я это делаю:

// import "styled" and React
import logo from '../images/logo.svg'

const CenterDiv = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
`
const Logo = styled.img`
  padding: 2rem;
  margin: 1rem;
  border: 1.5rem solid black;
`
const IndexPage = () => (
  <CenterDiv>
    <Logo src={logo} alt="Logo" />
  </CenterDiv>
)

export default IndexPage

Как я могу загрузить SVG после CSS, чтобы пользователи не видели, как логотип прыгает?

Я также установил пакет «gatsby-plugin-styled-components», который позволяет визуализировать стилизованные компоненты на стороне сервера / во время сборки.

Спасибо!

Изменить: я переместил стили в опору стилей в компонентах React, что, похоже, устранило эту асинхронную проблему. Однако я все еще хотел бы знать, как это сделать с помощью стилизованных компонентов, потому что я могу писать там обычные CSS и медиа-запросы.

Примечание. В этом контексте я использую Gatsby / React и предпочитаю решения CSS-in-JS. У меня есть аналогичные проблемы при использовании "стилизованных компонентов" и в других ситуациях - сначала загружается контент, а затем применяются стили.


reactjs svg css styled-components gatsby
person msbpk    schedule 21.07.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

После развертывания на сервере кажется, что при загрузке моей страницы SVG загружается первым и сразу отображается в верхнем левом углу экрана, по-видимому, до CSS, который заставляет его перескакивать в центр после заметной задержки.

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

Например,

1) Добавьте начальный класс в SVG, который делает его невидимым:

HTML: <svg class="logo hide">

CSS: svg.hide {opacity: 0;}

2) Затем примените onload прослушиватель событий к окну:

window.addEventListener('load', removeOpacityFromSVG, false);

function removeOpacityFromSVG() {

    var logoSVG = document.getElementsByClassName('logo')[0];
    logoSVG.className = 'logo';
}
person Rounin    schedule 21.07.2018
comment
Спасибо за ответ, но в этом контексте я использую React и предпочитаю решения CSS-in-JS. У меня есть аналогичные проблемы при использовании стилизованных компонентов и в других местах - сначала загружается контент, а затем применяются стили. - person msbpk; 21.07.2018
comment
Как стиль применяется к элементу? Если не через таблицу стилей, то через встроенный атрибут style=" [...] "? В этом случае вместо перезаписи logoSVG.className после загрузки просто перезапишите logoSVG.style. например. После onload вы можете получить содержимое атрибута style, удалить opacity: 0; и заменить содержимое атрибута style. - person Rounin; 22.07.2018
comment
Стиль применяется к компонентам React с помощью пакета styleled-components CSS-in-JS, как объяснено и показано в моих примерах кода. - person msbpk; 22.07.2018
comment
Насколько мне известно, использование onload в React не поощряется. Я думаю, что эта проблема специфична для стилизованных компонентов. См. Мою правку и примечание к исходному вопросу. - person msbpk; 22.07.2018