Lazy Loading

Load content only when needed.

html

<div class="lod-laz-stage" data-trigger="viewport">
  <div class="lod-laz-item lod-laz-item--loaded" style="background:#A8E6C1;">Image 1 &mdash; loaded eagerly</div>
  <div class="lod-laz-fold">below the fold &darr;</div>
  <div class="lod-laz-item lod-laz-item--placeholder" style="background:;">not requested yet</div>
  <p class="lod-laz-caption">Only what's needed loads up front &mdash; the rest waits for viewport</p>
</div>
<style>
.lod-laz-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 12px system-ui, sans-serif; color: #241430aa; }
.lod-laz-item { height: 54px; border-radius: 8px; display: flex; align-items: center; justify-content: center; text-align: center; color: #241430; font-weight: 600; margin-bottom: 8px; padding: 4px; }
.lod-laz-item--placeholder { background: repeating-linear-gradient(45deg, #24143010 0 8px, transparent 8px 16px); color: #241430aa; font-weight: 400; }
.lod-laz-fold { text-align: center; margin: 4px 0 8px; opacity: .5; }
.lod-laz-caption { margin: 6px 0 0; }
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-xs text-[#241430]/70" data-trigger="viewport">
  <div class="h-[54px] rounded-lg flex items-center justify-center text-center text-[#241430] font-semibold mb-2 p-1" style="background:#A8E6C1;">Image 1 &mdash; loaded eagerly</div>
  <div class="text-center my-1 mb-2 opacity-50">below the fold &darr;</div>
  <div class="tw-laz-item h-[54px] rounded-lg flex items-center justify-center text-center font-semibold mb-2 p-1" style="background:; color:#241430aa;">not requested yet</div>
  <p class="mt-1.5">Only what's needed loads up front &mdash; the rest waits for viewport</p>
</div>

react

export function LazyLoading({
  belowFoldLoaded = false,
  trigger = "viewport",
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430aa" }}>
      <div style={{ height: 54, borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", textAlign: "center", color: "#241430", fontWeight: 600, marginBottom: 8, padding: 4, background: accent }}>Image 1 &mdash; loaded eagerly</div>
      <div style={{ textAlign: "center", margin: "4px 0 8px", opacity: .5 }}>below the fold &darr;</div>
      <div style={{ height: 54, borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", textAlign: "center", fontWeight: belowFoldLoaded ? 600 : 400, marginBottom: 8, padding: 4, background: belowFoldLoaded ? accent : "repeating-linear-gradient(45deg, #24143010 0 8px, transparent 8px 16px)", color: belowFoldLoaded ? "#241430" : "#241430aa" }}>
        {belowFoldLoaded ? `Image 2 \u2014 loaded on ${trigger}` : "not requested yet"}
      </div>
      <p style={{ margin: "6px 0 0" }}>Only what's needed loads up front &mdash; the rest waits for {trigger}</p>
    </div>
  );
}