Vue ChunkLoader

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.

Installation

npm install vue-chunkloader

import Vue from 'vue';
import VueChunkLoader from 'vue-chunkloader';

Vue.use(VueChunkLoader);

Usage

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>

Options

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 |

License

This project is licensed under the MIT License.