0

I want to check if media and files are fully loaded with readystate in vue. Below is mounted at testparent/index.vue. I was just testing every form of onreadystatechange, bc none of them works.

mounted() {
document.onreadystatechange = () => {
  if (document.readyState === 'interactive') {
    console.log(document.readyState)
  }

  if (document.readyState === 'complete') {
    console.log(document.readyState)
  }
}

window.addEventListener('load', function (event) {
  console.log(document.readyState)
})

window.addEventListener('DOMContentLoaded', () => {
  console.log(document.readyState)
})

document.addEventListener('readystatechange', (event) => {
  console.log(document.readyState)
})
}

Below is my template

<nuxt-link to="/testparent/_slug">link to slug</nuxt-link>
<nuxt-link to="/testparent/test">other test link</nuxt-link>

I cannot find any log from the console. but when I refresh the page, the logs comes out. Is there something I did wrong? Or is there other way to do? Thank you in advance

Onie Kim
  • 1
  • 1
  • 1
    `nuxt-link`s are in-app SPA links, so they don't cause a page reload, and you wouldn't see those events re-occur. – tony19 Sep 01 '22 at 05:05
  • Event listeners are not that often used in an SPA/meta-framework anyway either. And...checking for states like `DOMContentLoaded` is not really good from a performance point of view. – kissu Sep 02 '22 at 08:42
  • 1
    Thank you for letting me know. I decide to use nuxt loading features – Onie Kim Sep 06 '22 at 08:18

0 Answers0