DeferredContent

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

导入#


import { DeferredContent } from 'primereact/deferredcontent';

基本#

DeferredContent 通过包裹目标来使用。

向下滚动以懒加载图像。


<DeferredContent onLoad={onImageLoad}>
    <img className="w-full md:w-30rem md:block md:mx-auto" src="/images/galleria/galleria3.jpg" alt="Prime" />
</DeferredContent>

数据表格#

一个实用的例子，仅当表格在视口中变得可见时才加载。

向下滚动以懒加载数据表格。


<DeferredContent onLoad={onDataLoad}>
    <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>

键盘支持

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