v-lazy-src

npmpackage.info

Gathering detailed insights and metrics for v-lazy-src

Other packages similar to v-lazy-src

v-lazy-load-img

1.0.0

- RENDER_SIZE 渲染图片并发个数 - MAX_LENGTH 图片src缓存个数 - IMG_LOAD_SRC 加载中的图片 - IMG_LOAD_BEFORE_SRC 加载前的图片 - IMG_LOAD_ERROR_SRC 加载失败的图片

@plugin-light/webpack-loader-v-lazy

1.0.0

<p align="center"> <img src="https://img.shields.io/npm/dw/@plugin-light/webpack-loader-v-lazy"> <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/webpack-loader-v-lazy"> <img src="https://img.shields.io/npm/v/@plugin-light/webpack-lo

@plugin-light/vite-plugin-transform-v-lazy

1.0.0

<p align="center"> <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-transform-v-lazy"> <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-transform-v-lazy"> <img src="https://img.shields.io/npm/v/@plugin-li

ngx-lazy-load

0.0.9

<h1 align="center">Welcome to ngx-lazy-load 👋</h1> <p> <a href="https://www.npmjs.com/package/ngx-lazy-load" target="_blank"> <img alt="Version" src="https://img.shields.io/npm/v/ngx-lazy-load.svg"> </a> <a href="#" target="_blank"> <img al

Gathering detailed insights and metrics for v-lazy-src

Usage

1<img v-lazy-src="entry.image">

When the img tag intersects within viewport (default threshold: 0.1), it starts load the value of directive as img's src.

For static url, you should use additional quotes within value, or use data-lazy-src property.

1<img v-lazy-src="'https://placekitten.com/408/287'" /> 2 3<img v-lazy-src data-lazy-src="https://placekitten.com/408/287" />

Installation

npm i v-lazy-src

1import Vue from 'vue' 2import VLazySrcPlugin from 'v-lazy-src' 3 4Vue.use(VLazySrcPlugin)

the plugin accepts two options:

threshold: which amount of element intersects within root element (default: 0.1)

placeholder: url of placeholder image src that loaded before img tag should be shown (default: empty transparent gif)

1Vue.use(VLazySrcPlugin, {threshold: 0.5, placeholder: '/path/to/empty.png'})

will show /path/to/empty.png unless half of img element's rect is intersects with viewport, then loads lazy src.

Or just setup directive for each component:

1import { VLazySrc } from 'v-lazy-src' 2 3export default { 4 name: 'YourComponent', 5 directives: { 6 lazySrc: VLazySrc({threshould: 0}) 7 }, 8 template: `<div> 9 <img v-lazy-src="..." /> 10 </div>` 11 ... 12}

Other packages similar to v-lazy-src

Other packages similar to v-lazy-src

Installations

Developer Guide

No

CommonJS

12.22.1

7.12.1

Score

Pull Requests

12

214

157

45

Issues

0

3

3

Releases

Languages

Developer

comfuture

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

v-lazy-src

Usage

Installation

10

10

2

0

0

0

0

0

0

0

0

0

0

2.3

/10