时间戳

首页 > 解决方案 > 加载 CSS 后渲染 SVG (React styled-components)

css - 加载 CSS 后渲染 SVG (React styled-components)

问题描述

我正在使用 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

如何在 CSS 之后加载 SVG，以便用户看不到徽标跳来跳去？

我还安装了“gatsby-plugin-styled-components”包，让我们在服务器端/构建时渲染样式组件。

谢谢！

编辑：我将样式移动到 React 组件中的样式属性，这似乎已经解决了这个异步问题。但是，我仍然想知道如何使用 styled-components 做到这一点，因为我可以在那里编写普通的 CSS 和媒体查询。

注意：在这种情况下，我使用的是 Gatsby/React 并且更喜欢 CSS-in-JS 解决方案。在其他情况下使用“样式化组件”时，我也遇到了类似的问题 - 先加载内容，然后再应用样式。

标签： cssreactjssvgstyled-componentsgatsby

解决方案

部署到服务器后，似乎在加载我的页面时，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';
}

推荐阅读