在页面入口仅显示一次叠加(不更改路线).如何?

问题描述

因此，我尝试在我的gatsby站点上覆盖约一秒钟的时间，以使其在后面加载正确的断点.我该如何实现?

So I try to have an overlay over my gatsby site for about a split second to let it load the correct breakpoint in the back. How can I achieve this?

因此，我设置了一个时间间隔和一些状态来加载叠加层，并使其在一个间隔后消失.但是每页重新加载叠加层后的问题再次出现.我没有像redux这样的状态管理工具，并且我需要Overlay仅在每次刷新或从外部链接进入后出现，而无需单击内部链接.

So I set an Interval and some State to load the Overlay and make it disappear after an interval. But the problem after each page reload the overlay appears again. I have no state management like redux and I need the Overlay to only appear after every refresh or entrance from external links but not clicking on internal links.

我已经尝试过useEffect仅在挂载上渲染，但这并不能解决问题，因为内部链接更改将触发重新挂载

I've tried useEffect with only render on the mount but this does not do the trick as internal link changes will trigger a remount

我发现可以在InitialClientRender上使用浏览器API.但是我不明白如何在gatsby-browser.js之外访问其中生成的值.通常，我在理解如何使用这些API方面遇到问题.

I figured out that I could use the Browser API onInitialClientRender. But I don't understand how a value generated in there can be accessed outside of the gatsby-browser.js. In general, I have issues understanding how to use these APIs.

customHooks.js

customHooks.js

export function useInterval(callback, delay) {
  const savedCallback = useRef()

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback
  }, [callback])

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current()
    }
    if (delay !== null) {
      let id = setInterval(tick, delay)
      return () => clearInterval(id)
    }
  }, [delay])
}

Layout.js

Layout.js

let [loadingIndicator, setLoadingIndicator] = useState(true)
const delay = 500

useInterval(() => {
  setLoadingIndicator(false)
}, delay)

因此，预期结果将是一种告诉初始客户端渲染以设置状态的方法，该状态指示要渲染的Overlay，并且在此渲染之后，状态应更改为禁用Overlay的渲染.

So the expected result would be a way to tell on the initial client render to set a state which tells the Overlay to be rendered and after this one render the state should change to disable the render of the overlay.

推荐答案

解决方案:

使用gatsby的功能来更改静态index.html文件. [在盖茨比中自定义Index.html] [1]

Using gatsby's ability to change the static index.html file. [Customize Index.html in Gatsby][1]

将自定义div添加到生成的html.js

Adding a custom div to the generated html.js

   <div
      key={`loader`}
      id="___loader"
      style={{
        alignItems: "center",
        backgroundColor: "#F2F2F2",
        display: "flex",
        justifyContent: "center",
        position: "absolute",
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        zIndex: 1,
      }}
   >
      <LoaderSVG width="50%" />
   </div>

以及在gatsby-browser.js中:

and in gatsby-browser.js:

export const onInitialClientRender = () => {
  document.getElementById("___gatsby").style.display = "block"
  setTimeout(function() {
    document.getElementById("___loader").style.display = "none"
  }, 200)
}

下一步 是要检查是否所有数据都已加载，并添加动态值而不是超时.

The next step is to check whether all the data is loaded and add a dynamic value instead of the timeout.

这篇关于在页面入口仅显示一次叠加(不更改路线).如何?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！