npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

v-lazy-image-narasi

v0.0.2

Published

[![npm](https://img.shields.io/npm/v/v-lazy-image.svg)](https://www.npmjs.com/package/v-lazy-image) [![npm](https://img.shields.io/npm/dm/v-lazy-image.svg)](https://www.npmjs.com/package/v-lazy-image) [![Donate](https://img.shields.io/badge/donate-paypal-

Downloads

5

Readme

v-lazy-image

npm npm Donate

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

⚠️ Check the practical examples and demos if you are creating a real-world or enterprise project and see how to achieve max performance using responsive images and progressive image loading.

Usage

npm install v-lazy-image

Warning: You'll need to install the w3c Intersection Observer polyfill in case you're targeting a browser which doesn't support it.

For Vue 3, import it and use it like any other component:

<script setup>
  import VLazyImage from "v-lazy-image";
</script>

For Vue 2, import it from v-lazy-image/v2:

import VLazyImage from "v-lazy-image/v2";

export default {
  components: {
    VLazyImage
  }
};

You must pass an src property with the link of the image:

<template>
  <v-lazy-image src="http://lorempixel.com/400/200/" />
</template>

That easy, the image will be loaded as soon as it enters the viewport. See it running in this demo and you'll learn how to use Chrome DevTools to check how it's loaded.

Achieving Max Performance

Just by using v-lazy-image you'll have a performance gain, since the image will be loaded when it's going to be seen.

But you can go to the next level and squeeze your web's performance if you use the next techniques.

Responsive Images

v-lazy-image allows you to use Web Standard's: the srcset attribute on images and the <picture> tag.

"Use Responsive Images with v-lazy-image" shows you how simple it is and see it in action in a demo.

Progressive Image Loading

A technique used by platforms like Spotify, Netflix or Medium to improve Perceived Performance, thus the User Experience.

In "Achieve Max Performance loading your images with v-lazy-image" you'll see what's progressive image loading about, how to apply it in v-lazy-image using the src-placeholder attribute and a demo to see how it plays with a CSS animation.

API

Aside from the following API, you can pass any img attribute, such as alt, and they'll be added to the rendered <img> tag.

Fields marked as (*) are required.

Props

| Name | Type | Default | Description | | ---------------------- | ------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | src | String (*) | - | Image src to lazy load when it intersects with the viewport | | src-placeholder | String | ' ' | If defined, it will be shown until the src image is loaded. Useful for progressive image loading, see demo | | srcset | String | - | Images to be used for different resolutions | | intersection-options | Object | () => ({}) | The Intersection Observer options object. | | use-picture | Boolean | false | Wrap the img in a picture tag. |

Events

| Name | Description | | ----------- | ------------------------------------------------------------ | | intersect | Triggered when the image intersects the viewport | | load | Triggered when the lazy image defined in src is loaded | | error | Triggered when the lazy image defined in src fails to load |