2022-09-09 20:41:18 +00:00
< template >
< div >
2022-12-19 11:57:07 +00:00
< Head >
< Title > Vue Deferred Content Component < / Title >
< Meta name = "description" content = "DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll." / >
< / Head >
2022-09-09 20:41:18 +00:00
< div class = "content-section introduction" >
< div class = "feature-intro" >
< h1 > DeferredContent < / h1 >
< p > DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll . < / p >
< / div >
< AppDemoActions / >
< / div >
< div class = "content-section implementation" >
< div class = "card" >
< div style = "height: 800px" > 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 . < / div >
2022-12-09 08:10:44 +00:00
< DeferredContent @load ="onImageLoad" >
< img src = "/demo/images/nature/nature4.jpg" alt = "Nature" / >
< / DeferredContent >
2022-09-09 20:41:18 +00:00
< div style = "height: 500px" > < / div >
< DeferredContent @load ="onDataLoad" role = "region" aria -live = " polite " aria -label = " Content loaded after page scrolled down " >
< DataTable :value ="products" responsiveLayout = "scroll" >
< 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 >
< / div >
< / div >
< DeferredContentDoc / >
< / div >
< / template >
< script >
import ProductService from '../../service/ProductService' ;
import DeferredContentDoc from './DeferredContentDoc' ;
export default {
data ( ) {
return {
products : null
} ;
} ,
productService : null ,
created ( ) {
this . productService = new ProductService ( ) ;
} ,
methods : {
onImageLoad ( ) {
this . $toast . add ( { severity : 'success' , summary : 'Image Initialized' , detail : 'Scroll down to load the datatable' } ) ;
} ,
onDataLoad ( ) {
this . productService . getProductsSmall ( ) . then ( ( data ) => ( this . products = data ) ) ;
this . $toast . add ( { severity : 'success' , summary : 'Data Initialized' , detail : 'Render Completed' } ) ;
}
} ,
components : {
DeferredContentDoc : DeferredContentDoc
}
} ;
< / script >
