DeferredContent

DeferredContent 会延迟加载最初不在视口中的内容，直到滚动使其可见。

导入 #


import DeferredContent from 'primevue/deferredcontent';

基本 #

DeferredContent 通过包装目标来使用。

向下滚动以延迟加载图像。


<DeferredContent @load="onImageLoad">
    <img src="/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
</DeferredContent>

DataTable #

一个实际示例，当表格在视口中可见时触发获取。

向下滚动以延迟加载 DataTable。


<DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
    <DataTable :value="products">
        <Column field="code" header="Code"></Column>
        <Column field="name" header="Name"></Column>
        <Column field="category" header="Category"></Column>
        <Column field="quantity" header="Quantity"></Column>
    </DataTable>
</DeferredContent>

辅助功能 #

屏幕阅读器

DeferredContent 可以用于许多用例，因此不强制执行任何角色，事实上，如果该卡仅用于演示目的，则可能不需要角色。任何有效的属性都会传递到容器元素，因此您可以完全控制角色，例如地标和 aria-live 等属性。


<DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
    Content
</DeferredContent>

键盘支持

组件不包含任何交互元素。