# How to check if page load is complete

**URL:** <https://discourse.aurelia.io/t/how-to-check-if-page-load-is-complete/1856>\
**Category:** Help Requests\
**Created:** [November 7, 2018, 2:52pm UTC](https://discourse.aurelia.io/t/how-to-check-if-page-load-is-complete/1856 "2018-11-07T14:52:09Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![chethandb](https://avatars.discourse-cdn.com/v4/letter/c/e68b1a/32.png) [@chethandb](https://discourse.aurelia.io/u/chethandb)\
**Post date:** [November 7, 2018, 2:52pm UTC](https://discourse.aurelia.io/t/how-to-check-if-page-load-is-complete/1856/1 "2018-11-07T14:52:09Z")

</div>

Hi,

I have a script that should run after the entire page load is complete.

Is there a way in Aurelia to figure out if the page load is completed, considering all the sub-modules are loaded ?

The script I am running is a call tracking script that would change targeted numbers on my page. Currently I have it running as the last step inside the config PostRender step and anything that loads after that is not observed by the script. Furthermore this script needs to be run on every page of my website.

Thanks in advance for your inputs.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [November 7, 2018, 3:55pm UTC](https://discourse.aurelia.io/t/how-to-check-if-page-load-is-complete/1856/2 "2018-11-07T15:55:05Z")

</div>

Sounds hacky.

Why not change phone number literal `12345` to `<call-tracking number="12345"></call-tracking>`, then do your magic in custom element call-tracking?

---

<div class="post-metadata">

**Author:** ![chethandb](https://avatars.discourse-cdn.com/v4/letter/c/e68b1a/32.png) [@chethandb](https://discourse.aurelia.io/u/chethandb)\
**Post date:** [November 7, 2018, 4:16pm UTC](https://discourse.aurelia.io/t/how-to-check-if-page-load-is-complete/1856/4 "2018-11-07T16:16:57Z")

</div>

A good thought but I am not what challenges I might come across since we are having other logic to set the phone numbers based on add campaign. If I am able to trigger the script after page loads, problem will be resolved since by then all other logic would have run…

---

<div class="post-metadata">

**Author:** ![fragsalat](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fragsalat/32/270_2.png) [@fragsalat](https://discourse.aurelia.io/u/fragsalat)\
**Post date:** [November 8, 2018, 8:34am UTC](https://discourse.aurelia.io/t/how-to-check-if-page-load-is-complete/1856/5 "2018-11-08T08:34:26Z")

</div>

I’ve searched for something similar and came up with this solution: [Tracking render performance](https://discourse.aurelia.io/t/tracking-render-performance/1681/4?u=fragsalat)

Im hooking into the rendering process and presume that if there was no rendering process for 1 second the page is loaded, rendered and visible to the user. This time - the delay is my actual page load time. Except that a debugger corrupts this time it seem to work quite well.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [November 8, 2018, 12:09pm UTC](https://discourse.aurelia.io/t/how-to-check-if-page-load-is-complete/1856/6 "2018-11-08T12:09:15Z")

</div>

There is also an event published by aurelia router you can try subscribe.

```auto
this.ea.subscribe('router:navigation:complete', () => {
  // this callback is fired every time a new page is loaded.

  // you may need a setTimeout here to wait for all sub-components. 
  // I did not test.
  setTimeout(() => {
    // your magic code
  });
});

```

---

<div class="post-metadata">

**Author:** ![timfish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/timfish/32/1566_2.png) [@timfish](https://discourse.aurelia.io/u/timfish)\
**Post date:** [November 8, 2018, 11:41pm UTC](https://discourse.aurelia.io/t/how-to-check-if-page-load-is-complete/1856/7 "2018-11-08T23:41:30Z")

</div>

There is the `aurelia-composed` event which is fired on `document`.

You can listen to this like:

```auto
document.addEventListener('aurelia-composed', () => {
    // finished loading?
});

```

I read about this [here](https://github.com/aurelia/framework/issues/419) and it’s triggered [here](https://github.com/aurelia/framework/blob/1245bedc3854012a85ceaf965be195fe67a6391f/src/aurelia.js#L176).

---

<div class="post-metadata">

**Author:** ![chethandb](https://avatars.discourse-cdn.com/v4/letter/c/e68b1a/32.png) [@chethandb](https://discourse.aurelia.io/u/chethandb)\
**Post date:** [November 15, 2018, 1:51pm UTC](https://discourse.aurelia.io/t/how-to-check-if-page-load-is-complete/1856/8 "2018-11-15T13:51:07Z")

</div>

@fragsalat @huochunpeng @timfish  
Thanks a lot for all your inputs. I haven’t got a chance to try any of these yet. I will definitely post it here when I do. Priorities got shifted to some other tasks as of now and I will need to circle back to this. Again thanks a ton for your valuable inputs 😃.