Как перехватить события document.ready или window.load в Гэтсби - PullRequest
Новая
       13

Как перехватить события document.ready или window.load в Гэтсби

1 голос
/ 20 марта 2019

Я относительно новичок в Gatbsy фреймворке и пытаюсь найти способ переключения классов на некоторых элементах на DOMContentLoaded или на window.load для анимацииих, как только пользователь увидит экран.

Это то, что я делал до сих пор, однако это не кажется очень уместным: 

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

Есть ли лучший способ сделать это?

Заранее спасибо.

Ответы [ 2 ]

2 голосов
/ 26 марта 2019

Я думаю, вы должны добавить этих слушателей событий в gatsby-browser.js: 

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

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

Вам не нужно проверять window, потому что этот файл запускается только на стороне клиента. Вот полный список доступных хуков .

также AFAIK document не имеет события ready, это вещь jQuery. Возможно, вас заинтересует событие DOMContentLoaded , хотя между ним и готовым IIQ jQuery есть небольшие отличия.

0 голосов
/ 20 марта 2019

Это то, что я делал до сих пор, но это не очень уместно:

Это совершенно законный код imho: 

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

РЕДАКТИРОВАТЬ

Думая об этом, к моменту запуска componentDidMount окно «load» и документ «ready» уже будут запущены ... так что это немного бессмысленно.

https://codesandbox.io/s/n43z5x00j4

Вы можете просто использовать componentDidMount, чтобы проверить, загружен ли DOM, и не беспокоиться о двух других событиях.

...