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);

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

Answer 1

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

gatsby-browser.js

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

在盖茨比中添加预加载器

1 个答案: