JavaScript Load Events

When loading a page and initializing scripts it is often necessary to execute code when certain events occur. In FIT we offer multiple events that are fired on different occasions and at different times when loading a page.

Enabling

To work with load events you have to enable JavaScript events in your config:

<config>
  <js-api>
    <event/>
  </js-api>
</config>

Activating this feature will also activate the events API!

Event ready

The ready event is fired when all blocking FIT scripts have been loaded and the DOM is ready to be used. At this point the FIT JavaScript APIs should be available. This does not include Adaptive Components. Sevenval Adaptive Components offering JavaScript APIs will always fire a distinctive event when their APIs are ready to use and we encourage all other Adaptive Component developers to do the same.

If you want to add a listener only once but let it run whenever the DOM is complete after a PPL request, you should use the pplend event instead.

Because this event should be fresh whenever a new page is loaded, all listeners registered to the event are reset by PPL requests.

When using PPL, scripts registering listeners for the ready event should usually have the ai-load attribute set to true.

Usage

Use the ai.addEventListener function to bind functions to the ready event.

ai.addEventListener('ready', function() {
  console.log('The DOM and Sevenval APIs are ready to use');
});

Event load

The load event is fired when all resources in the page have finished loading. This is always after the ready event has been fired and should only be used if a fully loaded document is necessary (for example when reading image dimensions).

Because this event should be fresh whenever a new page is loaded, all listeners registered to the event are reset by PPL requests.

If you want to add a listener only once but let it run whenever the DOM is complete after a PPL request, you should use the pplend event instead.

When using PPL, scripts registering listeners for the load event should usually have the ai-load attribute set to true.

Due to technical limitations the load event is fired before images finished loading when a PPL request is processed.

Usage

Use the ai.addEventListener function to bind functions to the load event.

ai.addEventListener('load', function() {
  console.log('All resources have been loaded');
});