DeferredContent

DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.

Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.

Import via Module


import { DeferredContent } from 'primereact/deferredcontent';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/deferredcontent/deferredcontent.min.js"></script>

Getting Started

DeferredContent is used as a wrapper element of its content.


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

Callback

onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.


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