vue lazy container,By detect the visibility of elements in the page, decide whether to load resources and render.

Overview

vue-lazy-container

npm

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

License

http://www.opensource.org/licenses/mit-license.php

You might also like...
:camera: Mini Image Lazy Loader for P(R)eact and Vue
:camera: Mini Image Lazy Loader for P(R)eact and Vue

Pimg is a Progessive Image Component For React, Preact and Vue.js. It helps in lazy loading of images in a nice and cool way. It's 2KB (gzipped). It h

A vue component for sleek and optimal lazy loading

sloth-loader 🦥 Image Lazy loader Vue Component with intersection observer Example here Installation yarn add sloth-loader npm i sloth-loader import c

A lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists
A lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists

Lazy Load List Lazy Load List is a lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists. Rend

Create lazy image, embed, video and element with animation just with attributes.

📖 Lazy-attr v1.2.3 Create lazy loading request or element like image, iframe, video... Make custom animation on lazy and not lazy element on all brow

simplistic vue.js directive for image lazy loading

Vue Progressive Image Lazy load images while showing a preview. Super tiny, less than half a kilobyte minified and gzipped. usage v-lazy-img adds the

🐌 A small size Vue.js directive for lazy loading images using IntersectionObserver API

🐌 vue-tiny-lazyload-img A small size Vue.js directive for lazy loading images using IntersectionObserver API Demo Page https://mazipan.github.io/vue-

A small lazy image loader for Vue

lazy-vue lazy-vue is the easiest way to get a lazy image loader working within your vue projects. It is meant to be as simplest as possible, so you do

Flexible modal component for Vue with ability of asynchronous lazy loading

vue-async-modal Flexible modal component for Vue with ability of asynchronous lazy loading Usage Firstly, you should add Modal component in your templ

A super simple image lazy loader for Vue.

cube-vue-image-lazy A super simple image lazy loader for Vue. Install yarn add cube-vue-image-lazy Warning: You'll need to install the w3c Intersectio

Releases(v1.2.0)
Vue.js Image Kit Component with Lazy Load built in and Responsive Images

Vue Image Kit Vue.js Image Kit Component with Lazy Load built in and Responsive Images The inspiration comes from this and a talk from @derevandal in

Igor Guastalla 9 Mar 31, 2022
Lazy load background images for Vue 2

Lazy Background Images for Vue vue-lazy-background-images A simple Vue component for lazy loading background components. This component is only for ba

Darryn Ten 68 Apr 7, 2022
Component-based lazy (CLazy) load images in Vue.js 2

Vue Clazy Load Claziest lazy loader out there! Component-based image lazy loader for Vue.js 2 Swaps between your image and another component when load

Matheus Grieger 107 Nov 16, 2022
A Lazy load plugin for Vue 3.x

vue3-lazy Status: Alpha. Lazy load plugin for Vue 3.x inspired by vue-lazyload. This plugin support very simple options, and easy to use. Install $ np

null 2 Feb 8, 2022
Vue.js lazy load image directive with akamai image converter

vue-lazyload-akamai Vue.js lazy load image directive with akamai image converter ??

Blibli.com 2 Aug 13, 2018
A Vue.js component to lazy load images using the Intersection Observer.

vue-li-image A Vue.js component to lazy load an image automatically when it enters the viewport using the Intersection Observer API.

null 0 Mar 19, 2021
A plugin of lazy-load images for Vue2.x

vue-lazyload-images A plugin of lazy-load images for Vue2.x Support images lazyload in window or build-in element. Demo Installation npm $ npm install

LowesYang 61 Nov 19, 2022
The easiest way to lazy load your content

VueLazily The easiest way to lazy load your content. Inspired by vue-promised, recommend to look at it if you need loading/errors handling without laz

Enkot 7 Oct 29, 2022
A Vue/Nuxt component that allows you to lazily render components only when they are scrolled into the viewport.

nuxt-render-on-scroll nuxt-render-on-scroll - A Vue/Nuxt component that allows you to lazily render components only when they are scrolled into the vi

Michael Dell 7 Jun 1, 2022
Vue 2 image and video loader supporting lazy loading, background videos, fixed aspect ratios, low rez poster images, transitions, loaders, slotted content and more.

Vue Visual Vue 2 image and video loader supporting lazy loading. Visual 2.x is a simplification of Version 1.x with a greater reliance on modern brows

Bukwild 56 Sep 9, 2022