时间戳

首页 > 解决方案 > 在页面入口处仅显示一次覆盖（不更改路线）。如何？

javascript - 在页面入口处仅显示一次覆盖（不更改路线）。如何？

问题描述

所以我尝试在我的 gatsby 网站上覆盖大约一秒钟，让它在后面加载正确的断点。我怎样才能做到这一点？

所以我设置了一个 Interval 和一些 State 来加载 Overlay 并让它在一段时间后消失。但是每个页面重新加载覆盖后的问题再次出现。我没有像 redux 这样的状态管理，我需要 Overlay 只在每次刷新或从外部链接进入后出现，而不是点击内部链接。

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

我发现我可以使用浏览器 API onInitialClientRender。但我不明白如何在 gatsby-browser.js 之外访问其中生成的值。一般来说，我在理解如何使用这些 API 时遇到问题。

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])
}

布局.js

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

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

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

标签： javascriptreactjsgatsbygrommet

解决方案

解决方案：

使用 gatsby 更改静态 index.html 文件的能力。[在 Gatsby 中自定义 Index.html][1]

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

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 中：

盖茨比浏览器.js：

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

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

推荐阅读