Заметная задержка загрузки при использовании стиля SVG в Gatsby. Как мне оптимизировать загрузку? - PullRequest
Новая
       10

Заметная задержка загрузки при использовании стиля SVG в Gatsby. Как мне оптимизировать загрузку?

0 голосов
/ 13 июля 2020

Lag

I'm using the oninitialclientrender from Gatsby the Gatsby API and @TheWeeezel's method from Показывать наложение только один раз при входе на страницу (не изменение маршрута). HowTo? , чтобы использовать компонент React в качестве экрана загрузки для моего сайта. Проблема в том, что есть заметная задержка при начальной загрузке стиля svg, необходимого для позиционирования и заливки. Я пробовал использовать встроенный стиль вместо загрузки стиля с помощью файла css, но он по-прежнему вызывает ту же задержку. Вот мой код из моего пользовательского файла html. js. 

<div
      id="___loader"
      key={`loader`}
      style={{
        background: "#0F2027",
        height: "100%",
        width: "100%",
        margin: "0",
        padding: "0",
      }}
    >
      <LoadingAssets></LoadingAssets>
    </div>

Вот код из моего gatsby-browser. js файл тоже. 

exports.onInitialClientRender = () => {
  console.log("loaded")

  setTimeout(() => {
    document.getElementById("___loader").style.opacity = "0"
    console.log("loader changed.")
  }, 1000)
  setTimeout(() => {
    document.getElementById("___loader").style.display = "none"
    console.log("loader removed")
  }, 2000)
  setTimeout(() => {
    document.getElementById("___gatsby").style.display = "block"
  }, 2000)
  setTimeout(() => {
    document.getElementById("___gatsby").style.opacity = 1
  }, 3000)
}

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

1 Ответ

0 голосов
/ 15 июля 2020

Вместо использования компонента React для рендеринга SVG вы можете просто поместить SVG в свой собственный html.js файл. Примерно так: 

// html.js

export default () => {
    return (
        <html {...this.props.htmlAttributes}>
            <head>
                <meta charSet="utf-8" />
                <meta httpEquiv="x-ua-compatible" content="ie=edge" />
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1, shrink-to-fit=no"
                />
                {this.props.headComponents}
                <style>
                    #___loader { /** YOUR CSS FOR THE LOADER */ }
                </style>
            </head>
            <body {...this.props.bodyAttributes}>
                <div id="___loader">
                    <svg ...>
                        <path ... />
                        <path ... />
                    </svg>
                </div>
                {this.props.preBodyComponents}
                <div
                    key={`body`}
                    id="___gatsby"
                    dangerouslySetInnerHTML={{
                        __html: this.props.body,
                    }}
                />
                {this.props.postBodyComponents}
            </body>
        </html>
    )
}

Если это не вариант для вас, другой вариант - полностью скрыть сайт (используя CSS) и показать его обратно с помощью ловушки useEffect (или componentDidMount ) в вашем компоненте SVG. Таким образом, сайт будет скрыт до тех пор, пока не будет смонтирован компонент SVG.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...