https://github.com/bosens-china/img-lazyload
图片懒加载
https://github.com/bosens-china/img-lazyload
img lazy lazyload
Last synced: 3 months ago
JSON representation
图片懒加载
- Host: GitHub
- URL: https://github.com/bosens-china/img-lazyload
- Owner: bosens-China
- License: mit
- Created: 2020-06-28T12:27:44.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-21T08:13:52.000Z (about 5 years ago)
- Last Synced: 2025-06-04T04:42:19.427Z (4 months ago)
- Topics: img, lazy, lazyload
- Language: TypeScript
- Homepage: https://codesandbox.io/s/blazing-dawn-qli7l?fontsize=14&hidenavigation=1&theme=dark
- Size: 218 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: License
Awesome Lists containing this project
README
# img-lazyload
 
[中文文档](./README_ZH.md)
It does not rely on high-performance JavaScript library, with a size of `2.4kb`. It supports modification of `src` and other elements `backgroundimage` attributes under img tag by default.
Before using this library, you need to pay more attention to: **for the elements that need to be loaded lazily, you must set a `width height` or an initial image**.
```html
```
## install
```sh
npm i @boses/img-lazyload
# or
yarn add @boses/img-lazyload
```
## usage method
```html
img {
width: 800px;
height: 800px;
}
![]()
![]()
![]()
```
```js
import imgLazyload from "@boses/img-lazyload";
imgLazyload("img");
```
For the `img` tag, when the element is visible, the value of the `data-src` attribute of the element is assigned to the SRC attribute of the element;
For non `img` tags, `backgroundimage` is used by default. When the element is visible, the value of the element `data-src` attribute is assigned to the `backgroundimage` attribute of the element;
## api
```js
lazyload(el: el, option?: options): void
```
- el:`string | Element | NodeList`
##### option?
| name | type | default | required | describe |
| -------- | ----------------------- | -------- | -------- | ------------------------------------- |
| dataSrc | `string` | data-src | `false` | The actual URL address of the element |
| callback | `(el: Element) => void` | none | `false` | callback |
The following is an advanced example. Load the image and clear the `data-src` attribute of the element. The style element of HTML is the same as above.
```js
import imgLazyload from "@boses/img-lazyload";
imgLazyload("img", {
callback(el) {
const src = el.getAttribute("data-src");
el.src = src;
el.removeAttribute("data-src");
},
});
```
## License
MIT License