Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork1
Detect the visibility of elements in the page
Happy-Coding-Clans/vue-lazy-container
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
English |中文
vue lazy container,By detect the visibility of elements in the page, decide whether to load resources and render.
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.
More detail please refer to thisdemo.
npm install vue-lazy-containeror
yarn add vue-lazy-containerWrite the following in mian.js：
importVueLazyContainerfrom"vue-lazy-container";Vue.use(VueLazyContainer);
Example:
<template><vue-lazy-containertag-name="div"id=1 @change="visibilityChange"><templatev-if="isLoaded"> <!-- your content --></template></vue-lazy-container></template><script>exportdefault{data(){return{isLoaded:false};},methods:{// visibility changevisibilityChange(entry,observer,id){const{ isIntersecting}=entry;// visibilityif(isIntersecting){this.isLoaded=true;// you can send ajax request or other logic}}}};</script>
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 |
About
Detect the visibility of elements in the page
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.