vue-lazy-load-image-component

v0.1.1

Published

a year ago

Downloads

0High
0Medium
0Low

cherry7

vue vue3 vue3-component lazyload intersectionobserver lazyload-image lazyload-component Vue-performance

Installation

# Yarn
$ pnpm add vue-lazy-load-image-component

# Pnpm
$ pnpm i vue-lazy-load-image-component

`LazyLoadImage` usage

<template>
  <div>
    <MyImage :image="image" />
    <span>{{ image.caption }}</span>
  </div>
</template>
<script lang="ts" setup>
import { LazyLoadImage } from "vue-lazy-load-image-component";
const image = ref({
  alt: "My image",
  height: 100,
  src: "https://example.com/image.jpg",
  width: 100,
  caption: "My image caption",
});
</script>

Props

Using effects

LazyLoadImage includes several effects ready to be used, they are useful to add visual candy to your application, but are completely optional in case you don't need them or want to implement you own effect.

They rely on CSS and the corresponding CSS file must be imported:

<template>
  <div>
    <MyImage :image="image" />
  </div>
</template>
<script lang="ts" setup>
import { LazyLoadImage } from "vue-lazy-load-image-component";
import "vue-lazy-load-image-component/lib/style.css";
const image = ref({
  alt: "My image",
  height: 100,
  src: "https://example.com/image.jpg",
  width: 100,
});
</script>

The current available effects are:

blur: renders a blurred image based on placeholderSrc and transitions to a non-blurred one when the image specified in the src is loaded.

Screenshot of the blur effect

black-and-white: renders a black and white image based on placeholderSrc and transitions to a colorful image when the image specified in the src is loaded.

Screenshot of the black-and-white effect

opacity: renders a blank space and transitions to full opacity when the image is loaded.

Screenshot of the opacity effect

`LazyLoadComponent` usage

<template>
  <div>
    <LazyLoadComponent>
      <MyComponent />
    </LazyLoadComponent>
  </div>
</template>
<script lang="ts" setup>
import { LazyLoadComponent } from "vue-lazy-load-image-component";
import MyComponent from "./MyComponent.vue";
</script>

Props

Using `trackWindowScroll` HOC to improve performance

When you have many elements to lazy load in the same page, you might get poor performance because each one is listening to the scroll/resize events. In that case, it's better to wrap the deepest common parent of those components with a HOC to track those events (trackWindowScroll).

For example, if we have an App which renders a Gallery, we would wrap the Gallery component with the HOC.

<template>
  <div>
    <GalleryWithScrollTracking :images="images" />
  </div>
</template>
<script lang="ts" setup>
import { trackWindowScroll } from "vue-lazy-load-image-component";
import Gallery from "./Gallery.vue";
// Wrap Gallery with trackWindowScroll HOC so it receives
// a scrollPosition prop to pass down to the images
const images = ref([
  {
    alt: "My image",
    height: 100,
    src: "https://example.com/image.jpg",
    width: 100,
    scrollPosition: { x: 0, y: 0 },
  },
  {
    alt: "My image 2",
    height: 100,
    src: "https://example.com/image2.jpg",
    width: 100,
    scrollPosition: { x: 0, y: 0 },
  },
]);

const GalleryWithScrollTracking = trackWindowScroll(Gallery);
</script>

You must set the prop scrollPosition to the lazy load components. This way, they will know the scroll/resize events are tracked by a parent component and will not subscribe to them.

Props

LazyLoadImage

Component wrapped with trackWindowScroll (in the example, Gallery)

Notice you can do the same replacing LazyLoadImage with LazyLoadComponent.

When to use `visibleByDefault`?

The prop visibleByDefault makes the LazyLoadImage to behave like a normal <img>. Why is it useful, then?

Imagine you are going to lazy-load an image you have already loaded in the same page. In that case, there is no need to lazy-load it because it's already stored in the cache of the user's browser. You can directly display it.

Maybe the following code snippet will make it more clear:

<template>
  <div>
    <img src="/landscape.jpg" alt="Beautiful landscape" />
    <GalleryWithScrollTracking :images="images" />
  </div>
</template>
<script lang="ts" setup>
import { trackWindowScroll } from "vue-lazy-load-image-component";
import Gallery from "./Gallery.vue";
const images = ref([
  {
    alt: "My image",
    height: 100,
    src: "https://example.com/image.jpg",
    width: 100,
  },
  {
    alt: "My image 2",
    height: 100,
    src: "https://example.com/image2.jpg",
    width: 100,
    // If the image we are creating here has the same src than before,
    // we can directly display it with no need to lazy-load.
    visibleByDefault: image.src === "/landscape.jpg",
  },
]);

const GalleryWithScrollTracking = trackWindowScroll(Gallery);
</script>

reference

react-lazy-load-image-component

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Installation

LazyLoadImage usage

Props

Using effects

LazyLoadComponent usage

Props

Using trackWindowScroll HOC to improve performance

Props

When to use visibleByDefault?

reference

`LazyLoadImage` usage

`LazyLoadComponent` usage

Using `trackWindowScroll` HOC to improve performance

When to use `visibleByDefault`?