Question

我对 Gatbsy 框架比较陌生，我正在尝试寻找一种方法来对DOMContentLoaded或{{ 1}}，以便在用户看到屏幕后立即对其进行动画处理。

这是我到目前为止所做的，但是似乎不太合适：

window.load

有更好的方法吗？

谢谢。

Answer 1

我认为您应该在gatsby-browser.js中添加这些事件侦听器：

// gatsby-browser.js
// ES6
export const onClientEntry = () => {
  window.onload = () => { /* do stuff */ }
}

// or commonjs
exports.onClientEntry = () => {
  window.onload = () => { /* do stuff */ }
}

您不必在那里检查window，因为此文件仅在客户端运行。这是full list of available hooks。

AFAIK document也没有ready事件，这是jQuery的事情。您可能对DOMContentLoaded event感兴趣，尽管它和jQuery的现成IIRC有一些细微的差别。

Answer 2

这是我到目前为止所做的，但是似乎不太合适：

这是完全合法的代码恕我直言：

componentDidMount = () => {
  window.addEventListener("load", this.myEventHandler);
  ...

编辑

考虑到这一点，当componentDidMount运行时，窗口“ load”和文档“ ready”将已经被触发...因此它毫无意义。

https://codesandbox.io/s/n43z5x00j4

您可以只使用componentDidMount来检查DOM是否已加载，而不必理会其他两个事件。

Answer 3

这太蠢了，但是对我有用：

setTimeout(() => {
  // your code
}, 100);

（╯°□°）╯︵┻━┻

如何在Gatsby中捕获document.ready或window.load事件

3 个答案: