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

查理斯·西奥(Charis Theo)

我对Gatbsy框架比较陌生,我试图找到一种方法来在用户打开关闭屏幕或上的某些元素上切换类,以使其具有动画效果。DOMContentLoadedwindow.load

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

componentDidMount = () => {
  if (typeof window === "undefined") return
  window.addEventListener("load", this.myEventHandler)
  // or
  if (typeof document === "undefined") return
  document.addEventListener("DOMContentLoaded", this.myEventHandler)
}

有更好的方法吗?

先感谢您。

德里克·阮

我认为您应该在以下位置添加这些事件监听器gatsby-browser.js

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

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

您不必检查window那里,因为此文件仅在客户端运行。是可用钩子完整列表

AFAIKdocument也没有ready活动,这是jQuery一回事。您可能对DOMContentLoaded事件感兴趣,尽管该事件与jQuery的现成IIRC之间有一些细微的差别。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在 document.ready 中的 window.load 事件上的 domlistener

嵌套$(document).ready()和$(window).load()事件之间的区别

$(document).ready中有多个$(document).ready和$(window).load

$(window).on('load')在jQuery(document).ready()中未正确调用

window.load在document.ready之前执行

$(window).load()和$(document).ready()函数之间的区别

$(window).load和$(document).ready有什么区别?

将变量从 $(document).ready(function(){} 传递给 $(window).load(function() {}

为什么window.onload事件在$(document).ready之前发生?

window.onload与$(document).ready()

$(window).on(“ load”)在$(document).ready之前执行。不应该准备好先执行吗?

jQuery-$(document).ready和$(window).load有什么区别?

在document.ready到window.load期间在特定的div上设置加载程序

jQuery事件.load()、. ready()、. unload()

window.load和$(document).ready()在jQuery 2和3中的行为有所不同

React中的dom ready事件

我试图在我的网站animate.css中实现,它仅适用于jQuery的ready(load)事件,不适用于其他鼠标事件?

jQuery事件与.NET中的Load事件相同

如何在.load上检查.ready?

可以在 window.addEventListener 中使用 $(document).ready

改善$(document).ready和$(window).resize并使其更紧凑

$(window).resize()和$(document).ready()计算不同的值

document.ready & window.onload vs CSS Media Queries

如何在主干中捕获点击事件

在以下时间运行函数:window.scroll和window.resize和document.ready

如何在Page Load事件中显示gridview?

如何在Javascript window.print()调用的默认打印菜单上捕获click事件?

事件委托和window与window.document

如何在“ vscode.window.showInformationMessage”中创建点击事件