vue-epic-io

Easy vue intersection-observer for lazy-loading and Infinite-scrolls

Usage no npm install needed!

<script type="module">
  import vueEpicIo from 'https://cdn.skypack.dev/vue-epic-io';
</script>

README

vue-epic-io

npm version

Easy vue intersection observer

Use for Lazy-Loading or Infinite Scrolls

Support

Optionally add the polyfill and make sure it's required on your dependendencies for unsupporting browsers:

image

What does IntersectionObserver do?

API that can be used to understand the visibility and position of DOM elements relative to a containing element or to the top-level viewport. The position is delivered asynchronously and is useful for understanding the visibility of elements and implementing pre-loading and deferred loading of DOM content.

image

Why use this component?

The purpose of this component is to provide the simplest solution for observing the elements that enter the viewport on the Vue codebase. It is completely declarative, all complexity is abstracted away, and the focus is on reusability and low memory consumption.

Help us with:

  • Performance: Prevent render elements that the user don't use/watch in this moment.
  • Bandwidth reduction: Don't load elements that the user don't use/watch.

Options And Method

Name Type Default Required Description
root HTMLElement false false
rootMargin String '0px' false defines the margin of the root element, which is used to expand or reduce the size of the rootBounds rectangle and thus affects the size of the intersection area of the intersectionRect. It uses CSS definitions such as 10px 20px 30px 40px to represent the values of top, right, bottom and left.
threshold Array<number> [0] false The threshold property determines when the callback function is triggered. It is an array where each member is a threshold value, which defaults to [0], i.e. when the intersectionRatio reaches 0, the callback function is triggered.
disconnect Boolean false false Disable IntersectionObserver (remove)
once Boolean false false Force IntersectionObserver to Work Once
@intersected event Send a event when a intersection was occurred, you can launch you method here

How to use

You can see the examples here: https://gustavochavarria.github.io/vue-epic-io/

Like Lazy Load Component

// Watch complete example in docs/examples

<template>
    <div v-for="(picture, index) in pictures">
        <!-- This height is important because, when we use once, the primary slot only render when has the first intersection -->
        <div style="min-height: 780px">
            <vue-epic-io once>                
                <img :src="picture" width="980px" height="800px" :key="index" />
                
                <template #loader>
                    <div class="loader"></div>
                </template>
            </vue-epic-io>
        </div>
    </div>
</template>

<script>

export default {
    el: "#app",

    data: {
        pictures: [`imageurl`, `imageurl2`],
    },
}

</script>

<template>
    <vue-epic-io class="grid" @intersected="getMoreCaracters()">                
        <div class="card" v-for="(character, index) in characters">
            <img class="image" :src="character.image" width="200px" height="200px" :key="index" />

            <table>
                <tbody>
                    <tr>
                        <td>Name:</td>
                        <td>{{ character.name }}</td>
                    </tr>
                    <tr>
                        <td>Status:</td>
                        <td>{{ character.status }}</td>
                    </tr>
                    <tr>
                        <td>Gender:</td>
                        <td>{{ character.gender }}</td>
                    </tr>
                </tbody>
            </table>                
        </div>

        <template #loader>
            <div class="loader"></div>
        </template>
    </vue-epic-io>
<template>

<script>
    export default {
        el: "#app",

        data: {
            characters: [],
            next: "https://rickandmortyapi.com/api/character",
            loading: false,
        },

        methods: {
            getMoreCaracters() {
                this.loading = true;

                window
                    .fetch(this.next)
                    .then((data) => {
                    if (data.ok) {
                        return data.json();
                    }
                    })
                    .then((data) => {
                    this.characters = [...this.characters, ...(data.results || [])];
                    this.next = data.info.next;
                    })
                    .finally(() => {
                    this.loading = false;
                    });
                },
        },
    }
</script>