DeferredContent

Render when scrolled into view

Content rendered only when it scrolls near the viewport — a heavy chart, an embed, comments at the end of a long page. Don't defer what people search the page for: until it renders, find-in-page and screen readers can't see it.

Basic

image below mounts only when within 200px of the viewport

<script setup lang="ts">
import { BlessDeferredContent, BlessSkeleton, BlessText } from "blessing-ui";
import { shots } from "./_data";
</script>

<template>
  <div class="col" style="max-width: 320px">
    <BlessText size="xs" muted>image below mounts only when within 200px of the viewport</BlessText>
    <BlessDeferredContent min-height="200px">
      <img
        :src="shots[3].src"
        alt=""
        style="display: block; width: 100%; height: 200px; object-fit: cover"
      />
      <template #placeholder><BlessSkeleton height="200px" /></template>
    </BlessDeferredContent>
  </div>
</template>

• rootMargin starts it before it's visible (200px ahead by default); minHeight holds space so the page doesn't jump.
• #placeholder shows until then; @load fires once, including where IntersectionObserver is missing and it renders at once.

Usage

import { BlessDeferredContent } from "blessing-ui";

API

Props

Name	Type	Default	Description
rootMargin	string	"200px"
minHeight	string	"1px"

Events

Name	Payload	Description
load	[]

Slots

Name	Scope	Description
default	—
placeholder	—