# FunLazy
**Repository Path**: yanliebing_admin/FunLazy
## Basic Information
- **Project Name**: FunLazy
- **Description**: 一个高性能的轻量级图片懒加载组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 18
- **Created**: 2020-01-27
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
FunLazy
一个高性能的轻量级图片懒加载组件
FunLazy 是一个基于 jQuery 的图片懒加载组件，可以完美兼容桌面端和移动端的主流浏览器
组件在不同的浏览器中会自动选择最佳的懒加载方式，以此提高懒加载的性能
#### 引入文件
```html
```
#### 添加属性
```html
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
````
#### 调用组件
```js
$.FunLazy({
onSuccess: function ( el, img ) {
console.log( "图片：" + img + "已加载" );
}
});
````
API 参数
| 参数 | 说明 | 类型 | 默认值 |
| -------------- | ------------------------------------------------------------ | -------- | ------------------ |
| container | 目标容器，默认：null 表示 window| Object / String | null |
| effect | 图片显示效果，可选值：show, fadeIn | String | show |
| placeholder | 占位图片 | String | base64 编码的灰图 |
| errorPlaceholder | 图片加载失败时的占位图片 | String | "" |
| threshold | 边界值，单位：px | Number | 0 |
| width | 图片宽度，数字值时单位是 px，也可以是百分比形式，可通过 css 或行内属性设置 | Number / String | null |
| height | 图片高度，数字值时单位是 px，也可以是百分比形式，可通过 css 或行内属性设置 | Number / String | null |
| axis | 容器滚动方向，可选值：x, y | String | y |
| eventType | 指定加载图片的鼠标事件，可选值：click, dblclick, mouseover | String | "" |
| onSuccess | 图片加载成功时执行的回调函数，回调参数有两个：
1. 图片加载成功的元素
2. 加载成功的图片地址 | Function | 空函数 |
| onError | 图片加载失败时执行的回调函数，回调参数有两个：
1. 图片加载失败的元素
2. 加载失败的图片地址 | Function | 空函数 |
开源协议
MIT License
浏览器支持
| Chrome | Firefox | Opera | Edge | Safari | IE6+ |
| --- | --- | --- | --- | --- | --- |
| :fa-check: | :fa-check: | :fa-check: | :fa-check: | :fa-check: | :fa-check: |
````
#### 调用组件
```js
$.FunLazy({
onSuccess: function ( el, img ) {
console.log( "图片：" + img + "已加载" );
}
});
````