DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.
import DeferredContent from 'primevue/deferredcontent';
DeferredContent is used by wrapping the target.
<DeferredContent @load="onImageLoad"> <img src="/images/nature/nature4.jpg" alt="Nature" /> </DeferredContent>
A practical example that loads only when table becomes visible in viewport.
<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 can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so you have full control over the roles like landmark and attributes like aria-live.
<DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down"> Content </DeferredContent>
Component does not include any interactive elements.