背景写真の読み込みについて

Question

困っていること

背景写真の真ん中にテキストを置くようにしているのですが、読み込みが遅い時にテキストの表示位置が左上に表示される表示崩れを防ぐ方法を知りたいです。

const BgComponent = styled.div`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(/top.png);
  content: '';
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50%;
  width: 100%;
  height: 300px;
`;

export const View: FC = () => {
  return (
    <BgComponent>
    　<div>テスト、テスト</div>
    </BgComponent>
  );
};

Comments

[itagagaki]

すべての要素が読み込まれてレイアウトが定まるまでの間の表示の問題ですか？
どうすれば誰でもその問題を再現できますか？

[himazin_bivar]

jsしかソースないから詳細は謎ですが、jsの処理のタイミングを読み込み終わってから発火するようにするだけでは？