Question

我正在使用GatsbyJS和Styled-Components构建登录页面，希望在屏幕中央显示SVG徽标。

部署到服务器后，似乎在加载我的页面时，首先加载了SVG，并立即将其渲染到屏幕的左上角，显然是在CSS之前，这使得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组件中的样式道具，这似乎已经解决了这个异步问题。但是，我仍然想知道如何使用样式化组件来做到这一点，因为我可以在其中编写普通的CSS和媒体查询。

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

Answer 1

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

加载CSS（反应式组件）后使SVG呈现

1 个答案: