npmpackage.info

Gathering detailed insights and metrics for lazy-load-img

Other packages similar to lazy-load-img

lazy-load-vue3

2.0.1

A lazy loading plugin based on vue3

lazy-load-img-tan

0.1.7

a lazy-load img lib

vue-lazy-load-img

0.0.5

vue 图片懒加载插件

@axe/lazy-load-img

0.2.1

A library of lazy load image when it is necessary.

Gathering detailed insights and metrics for lazy-load-img

lazy-load-img - 3.0.8 | npmpackage.info

lazy-load-img

原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用

3.0.8

365

JavaScript

128.44 kB

1.3

Installations

npm install lazy-load-img

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

8.11.2

NPM Version

6.4.1 Pull Requests

Open

0

Total

1

Closed

0

Merged

1

Issues

Open

0

Total

7

Closed

7

Releases

Unable to fetch releases

Languages

JavaScript

JavaScript (100%)

Developer

lzxb

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

365 Stars

95 Commits

134 Forks

22 Watchers

1 Branches

1 Contributors

Updated on Nov 27, 2024

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

3.0.8

Package Id

lazy-load-img@3.0.8

Unpacked Size

128.44 kB

Size

34.66 kB

File Count

NPM Version

6.4.1

Node Version

8.11.2

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

babel-plugin-external-helpers babel-plugin-transform-object-assign babel-preset-es2015 clear eslint-config-standard eslint-plugin-promise eslint-plugin-standard gulp gulp-eslint rollup rollup-plugin-babel rollup-plugin-uglify

安装

  npm install lazy-load-img --save

优势

1.原生js开发，不依赖任何框架或库
2.支持将各种宽高不一致的图片，自动剪切成默认图片的宽高
  比如说你的默认图片是一张正方形的图片，则各种宽度高度不一样的图片，自动剪切成正方形。
  完美解决移动端开发中，用户上传图片宽高不一致而导致的图片变形的问题
3.简洁的API，让你分分钟入门！！！

默认模式

1  var lazyLoadImg = new LazyLoadImg({
2      el: document.querySelector('#list'),
3      mode: 'default', //默认模式，将显示原图，diy模式，将自定义剪切，默认剪切居中部分
4      time: 300, // 设置一个检测时间间隔
5      done: true, //页面内所有数据图片加载完成后，是否自己销毁程序，true默认销毁，false不销毁
6      position: { // 只要其中一个位置符合条件，都会触发加载机制
7          top: 0, // 元素距离顶部
8          right: 0, // 元素距离右边
9          bottom: 0, // 元素距离下面
10          left: 0 // 元素距离左边
11      },
12      before: function () {
13
14      },
15      success: function (el) {
16          el.classList.add('success')
17      },
18      error: function (el) {
19          el.src = './images/error.png'
20      }
21  })
22  
23  // lazyLoadImg.start() // 重新开启懒加载程序
24  // lazyLoadImg.destroy() // 销毁图片懒加载程序

效果演示

自定义模式

1  var lazyLoadImg = new LazyLoadImg({
2      el: document.querySelector('#list'),
3      mode: 'diy', //默认模式，将显示原图，diy模式，将自定义剪切，默认剪切居中部分
4      time: 300, // 设置一个检测时间间隔
5      done: true, //页面内所有数据图片加载完成后，是否自己销毁程序，true默认销毁，false不销毁
6      position: { // 只要其中一个位置符合条件，都会触发加载机制
7          top: 0, // 元素距离顶部
8          right: 0, // 元素距离右边
9          bottom: 0, // 元素距离下面
10          left: 0 // 元素距离左边
11      },
12      diy: { //设置图片剪切规则，diy模式时才有效果
13          backgroundSize: 'cover',
14          backgroundRepeat: 'no-repeat',
15          backgroundPosition: 'center center'
16      },
17      before: function () {
18
19      },
20      success: function (el) {
21          el.classList.add('success')
22      },
23      error: function (el) {
24          el.src = './images/error.png'
25      }
26  })
27
28  // lazyLoadImg.start() // 重新开启懒加载程序
29  // lazyLoadImg.destroy() // 销毁图片懒加载程序

效果演示

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

License

Determines if the project has defined a license.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

42 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-4hpf-3wq7-5rpr
Warn: Project is vulnerable to: GHSA-f522-ffg8-j8r6
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-hxm2-r34f-qmc5
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr

Score

1.3

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More