vue-lazy-container
English | 中文
Introduction
vue lazy container,By detect the visibility of elements in the page, decide whether to load resources and render.
Why
When the page content exceeds one screen, we often want to load and render only the data of the current screen,As the page scrolls, load and render the following. This can greatly improve the speed of page opening,And reduce additional network requests（xhr）。vue-lazy-container can just help us solve this problem.
Online Demo
More detail please refer to this demo.
Install
npm install vue-lazy-container
or
yarn add vue-lazy-container
Usage
Write the following in mian.js：
import VueLazyContainer from "vue-lazy-container";
Vue.use(VueLazyContainer);
Example:
">
<template> <vue-lazy-container tag-name="div" id=1 @change="visibilityChange"> <template v-if="isLoaded"> <!-- your content --> </template> </vue-lazy-container> </template> <script> export default { data() { return { isLoaded: false }; }, methods: { // visibility change visibilityChange(entry, observer, id) { const { isIntersecting } = entry; // visibility if (isIntersecting) { this.isLoaded = true; // you can send ajax request or other logic } } } }; </script>
API
Props
| Prop | Description | Type | Optional value | Default |
|---|---|---|---|---|
| tagName | Element TagName | Element.tagName |
div、span、p、img、i、a etc. | - |
| id | container id | String, Number |
- | - |
| intersectionOption | Intersection Observer Option | Object |
root、rootMargin、threshold | - |
Event
| Event Name | Description | Callback Parameters |
|---|---|---|
| change | Element visible change events | IntersectionObserverEntry、observer、id |
99 Oct 27, 2022
0 Oct 21, 2021
22 Dec 26, 2022
1 Jan 4, 2022
25 Aug 11, 2021
91 Nov 18, 2021
63 Jul 19, 2022
37 Nov 14, 2022
4 Nov 15, 2022
9 Mar 31, 2022
67 Nov 24, 2022
107 Nov 16, 2022
2 Feb 8, 2022
2 Aug 13, 2018
0 Mar 19, 2021
61 Nov 19, 2022
7 Oct 29, 2022
7 Jun 1, 2022
56 Sep 9, 2022