DeferredContent

DeferredContentは、スクロールで表示されるまで、初期状態で表示領域にないコンテンツのロードを遅延させます。

インポート #


import DeferredContent from 'primevue/deferredcontent';

基本 #

DeferredContentは、ターゲットをラップすることで使用します。

スクロールダウンして画像を遅延ロードします。


<DeferredContent @load="onImageLoad">
    <img src="/images/nature/nature4.jpg" alt="Nature" />
</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>

キーボードサポート

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