可见效用

visible 实用程序允许您推迟内容的渲染，直到其占位符元素进入或即将进入视口（在后台使用 IntersectionObserver）。

在渲染大型复杂项目列表、渲染折叠下的内容或延迟加载离屏组件时，这对于提高页面加载速度和内存消耗非常有用。

import { html, visible } from '@beforesemicolon/markup'

html`
    <div class="card-grid">
        ${visible(
            () => html`<heavy-card></heavy-card>`,
            html`<div class="card-placeholder">Loading...</div>`
        )}
    </div>
`.render(document.body)

选项

第三个参数是一个可选选项对象，它支持标准 IntersectionObserver 选项，以及 eager 标志：

• eager（布尔值）：当设置为 true 时，内容将在安装后立即渲染，完全绕过观察者设置。
• root (Element | Document | null)：用作检查目标可见性视口的元素。
• rootMargin（字符串）：根周围的边距。
• threshold (number | number[])：数字值或值数组，指示应执行观察者回调的目标可见性的百分比。

html`
    ${visible(
        () => html`<heavy-card></heavy-card>`,
        html`<div class="placeholder"></div>`,
        {
            eager: false,
            rootMargin: '600px 0px',
            threshold: 0,
        }
    )}
`

观察者重复数据删除

为了确保最大性能和最小浏览器开销，visible 实用程序维护活动 IntersectionObserver 实例的模块级注册表。如果多个 visible 元素共享相同的选项（例如，它们都使用 rootMargin: '600px 0px'），则它们将在后台共享一个全局 IntersectionObserver 实例。

自动清理

当从 DOM 卸载包装模板时，visible 实用程序会自动取消观察元素并清除观察者注册表中的所有引用，从而防止内存泄漏。