SpeedkitIframe, Iframe & IntersectionObserver in one.


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:

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


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:

  • 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 SpeedkitIframe, which can be used in the same way as a normal HTML Iframe. The included IntersectionObserver is configured via the intersectionObserver property.


The SpeedkitIframe is used like a normal HTML Iframe.


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

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

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


Use native attributes from HTML Iframe.


Sets the options from the integrated IntersectionObserver.

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


  @load="console.log('Iframe Loaded!')" 
  @enter="console.log('Iframe enter viewport!')" 
loadTriggered when Iframe has finished loading.
enterTriggered when component has reached the viewport.