javascript - 在 Gatsby 中添加预加载器

Question

我有一个Preloader负责预加载器的组件，这意味着该组件将弹出 2 秒并为该页面打开一个窗口。

我希望每次我的路线更改时都会弹出这个，例如我访问/blog页面，所以它必须首先呈现这个或在加载页面之前加载。

我所做的是我去了gatsby-browser.js然后调用了以下内容：

  export const onPreRouteUpdate = () => {
    return <Preloader />
  }
  

这个没用。我的代码由这些组成：

import React from 'react'

 const Preloader = () => {
    return (
        <div id="loader-wrapper">
        <div id="loader"></div>
        <div className="loader-section section-left"></div>
        <div className="loader-section section-right"></div>
    </div>
    )
}

export default Preloader

而这个简单的脚本：

   /* preloader */
    setTimeout(function(){
        $('body').addClass('loaded');
        $('h1').css('color','#222222');
    }, 1000);

每次路线更改时如何加载？

标签： javascriptjquerygatsby

Answer 1

您应该只将其添加<Preloader />到您的布局中，然后使用onPreRouteUpdate它来隐藏它。

盖茨比浏览器.js

export const onPreRouteUpdate = () => {
    setTimeout(() => {
        document.getElementById("loader-wrapper").style.display = "none"
    }, 1000)
}