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>

DataTable#

テーブルがビューポートに表示されたときにのみ読み込む実用的な例です。

スクロールしてDataTableを遅延読み込みします。


<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>

キーボードサポート

コンポーネントには、インタラクティブな要素は含まれていません。