我有一个组件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);
如何在每次路线改变时加载它?
最佳答案
您应该只添加 <Preloader />
到您的布局然后使用 onPreRouteUpdate
隐藏它。
gatsby-browser.js
export const onPreRouteUpdate = () => {
setTimeout(() => {
document.getElementById("loader-wrapper").style.display = "none"
}, 1000)
}
关于javascript - 在 Gatsby 中添加预加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64460441/