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

如何在每次路线改变时加载它？

Answer 1

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

gatsby-browser.js

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