BoosterIframe

BoosterIframe, Iframe & IntersectionObserver in one.

Exkurs

Iframes have a tendency, in the special case of the initial page load, to disrupt the construction and initialisation of the actual page through the massive loading of resources from another source.

For the user, this is particularly visible by:

WARNING

• Freeze (Short freeze of the page)
• Delayed loading of resources (images, fonts)
• Unnecessarily generated traffic

Solution

In order to solve these points, care should be taken to ensure that the initialisation of the iframe takes place downstream. This can be realised, for example, via an IntersectionObserver. This sets the source on the iframe only when the visible viewport has been reached.

The following conditions can thus be fulfilled:

TIP

• Iframe load is reactive.
• No resources are blocked during loading.
• Traffic is only generated when the iframe is visible.

The strategy mentioned above is provided by the BoosterIframe, which can be used in the same way as a normal HTML Iframe. The included IntersectionObserver is configured via the intersectionObserver property.

Usage

The BoosterIframe is used like a normal HTML Iframe.

Example

<template>
  <booster-iframe v-bind="iframe" @load="onLoadIframe" />
</template>

<script setup>
const src = defineProps({
  src: String,
  componentObserver: {
    type: Object,
    default() {
      return { trackVisibility: true, delay: 350 };
    }
  }
});

const onLoadIframe = () => console.log('iframe loaded!');
</script>

Properties

Use native attributes from HTML Iframe.

componentObserver

• Type: Object IntersectionObserver Properties
  • Default: { trackVisibility: true, delay: 350 }

Sets the options from the integrated IntersectionObserver.

For advanced usage, learn more about option trackVisibility from IntersectionObserver.

Events

<booster-iframe 
  @load="console.log('Iframe Loaded!')" 
  @enter="console.log('Iframe enter viewport!')" 
/>

Name	Description
load	Triggered when Iframe has finished loading.
enter	Triggered when component has reached the viewport.