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>

資料表 #

當表格在可視範圍內可見時觸發 fetch 的實際範例。

向下滾動以延遲載入資料表。


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

鍵盤支援

元件不包含任何互動式元素。