lazy-load-vue3

A lazy loading plugin based on vue3. Load when element is visible.

Install

1$ npm i lazy-load-vue3 -S

Quick Start

main.js

1import {createApp} from 'vue'
2import LazyLoad from 'lazy-load-vue3'
3import App from './App.vue'
4
5const app = createApp(App)
6app.use(LazyLoad, {component: true}).mount('#app')

App.vue:

1
2<template>
3  <table>
4    <tr>
5      <td>
6        <img v-lazy="'https://v3.cn.vuejs.org/logo.png'"/>
7        <!--    or    -->
8        <img v-lazy="{src: 'https://v3.cn.vuejs.org/logo.png', loadingClassList: ['loading']}"/>
9      </td>
10    </tr>
11  </table>
12</template>

Command Options

Installation Options

As for lazy-component, it looks like this:

1
2<template>
3  <lazy-component>
4    <some-componet/>
5  </lazy-component>
6</template>

You can specify a loading slot to show when the element is waiting to load or is loading.

1
2<template>
3  <lazy-component>
4    <some-componet/>
5    <template #loading>
6      <span>loading...</span>
7    </template>
8  </lazy-component>
9</template>

You can also give lazy-component a lazyKey like a directive, it looks like this:

1
2<template>
3  <div class="container">
4    <table>
5      <tr>
6        <td>
7          <lazy-component lazy-key="column1">
8            <some-componet1/>
9          </lazy-component>
10        </td>
11      </tr>
12      <tr>...</tr>
13      <tr>...</tr>
14      <tr>...</tr>
15      <tr>...</tr>
16    </table>
17
18    <table>
19      <tr>
20        <td>
21          <img v-lazy="URL" lazy-key="column2"/>
22        </td>
23        <td>
24          <lazy-component lazy-key="column3">
25            <some-componet2/>
26          </lazy-component>
27        </td>
28      </tr>
29      <tr>...</tr>
30      <tr>...</tr>
31      <tr>...</tr>
32      <tr>...</tr>
33    </table>
34  </div>
35</template>

The components have strong scalability, and you can define advanced functions yourself.

Component Attributes

Component Slots

Exposed

As for listener, you can just call such as listener(). You can pass a boolean value to the listener to specify whether your manual listener is checked in an ordered manner. This parameter will not change the sorted order of the original config.

If there is an update exception, you can also call the listener to force sorting and update effectively, like this.

1import {listener} from 'lazy-load-vue3'
2
3listener(undefined, true)

Dangerous

Do not hide the target element and lazy component of the instruction.

unsafe:

1<template>
2  <table v-for="item of list">
3    <tr>
4      <td>
5        <!--   Don't use like this.     -->
6        <lazy-component v-show="item.show">
7          <template #loading>
8            loading...
9          </template>
10          <div>{{item.content}}</div>
11        </lazy-component>
12      </td>
13    </tr>
14  </table>
15</template>
16
17<script setup lang="js">
18
19const list = ref([])
20for(let i = 0; i < 100; i++) {
21    list.value[i] = {show: i % 2 === 0, content: 'content' + i}
22}
23
24</script>

safe:

1
2<template>
3  <table v-for="item of list">
4    <tr>
5      <td>
6        <lazy-component>
7          <template #loading>
8            loading...
9          </template>
10          <!--    Use like this.      -->
11          <div v-show="item.show">{{item.content}}</div>
12        </lazy-component>
13      </td>
14    </tr>
15  </table>
16</template>
17
18<script setup lang="js">
19
20const list = ref([])
21for (let i = 0; i < 100; i++) {
22  list.value[i] = {show: i % 2 === 0, content: 'content' + i}
23}
24
25</script>

2.0.1 Changelog

1. Greatly optimized update performance.
2. Removed installation options for sorted, and preLoad.
3. Remove the watchUpdate of the directive.

1.3.0 Changelog

1. Remove the watchUpdate of the component.

1.2.9 Changelog

1. The lazy-key performance optimization.

1.2.8 Changelog

1. afterListen hook change parameters.

1.2.7 Changelog

1. Add watchUpdate option.
2. Monitoring logic optimization.
3. Fix some bugs

1.2.6 Changelog

1. Parameter default value judgment modification.
2. Add sorted way check.
3. Debounce from default on to configuration.
4. Add afterListen hook.

If you have any questions, please add an issue on. Life is better with you

https://github.com/ericzwq/lazy-load-vue3