Typically, off-screen images are loaded together, straining the loading of resources needed for the first view and causing a critical delay in the page loading experience.
Vue ChunkLoader speeds up first view rendering by optimizing the order in which images are loaded. Once all the images in the chunk are loaded, the next chunk will be loaded.
It will work best on long vertical pages, such as landing pages.
npm install vue-chunkloaderimport Vue from 'vue';
import VueChunkLoader from 'vue-chunkloader';
Vue.use(VueChunkLoader);Specifies the element to be chunked with the v-chunk directive. Replace the src attribute in the chunk with the data-src attribute.
<template>
<div v-chunk>
<img data-src="https://picsum.photos/id/0/160" />
<img data-src="https://picsum.photos/id/1/160" />
<img data-src="https://picsum.photos/id/2/160" />
<img data-src="https://picsum.photos/id/3/160" />
</div>
<div v-chunk>
<img data-src="https://picsum.photos/id/4/160" />
<img data-src="https://picsum.photos/id/5/160" />
<img data-src="https://picsum.photos/id/6/160" />
<img data-src="https://picsum.photos/id/7/160" />
</div>
</template>import Vue from 'vue';
import VueChunkLoader from 'vue-chunkloader';
Vue.use(VueChunkLoader, {
className: 'v-chunk',
attribute: 'data-src',
});| Property | Type | Default | Description |
|---|---|---|---|
| className | String | v-chunk | Class name to be given to the chunk |
| attribute | String | data-src | Custom data attributes to replace the src attribute |
This project is licensed under the MIT License.