FunLazy

原生 JavaScript 开发的轻量级图片懒加载组件

代码仓库

## 安装 **unpkg cdn** ```html ``` **jsdelivr cdn** ```html ``` **npm 安装** ```javascript npm i funlazy -S const FunLazy = require( "funlazy" ); ```

## 使用 ```html ``` 注：如果在 `Vue` 项目中使用，需要在 `mounted`（vue2）或 `onMounted`（vue3）中调用 `FunLazy` 函数。

## 自定义配置项 ```javascript FunLazy( { placeholder: "thumb.jpg", effect: "fadeIn" } ); ```

## 返回配置项（v2.1.0 新增） ```javascript const opt = FunLazy( { placeholder: "thumb.jpg", effect: "fadeIn" } ); // 根据传入的自定义配置项 // 与默认的配置项进行合并 // 返回合并之后的配置结果 console.log( opt ); ```

## 自动检测懒加载元素的变化（v2.1.0 新增） ```html

```

## 加载图片前对图片地址进行处理（v2.1.0 新增） ```html ```

## 当图片加载失败时使用指定的图片占位（v2.1.1 新增） ```html ```

## 配置参数

参数	说明	类型	默认值
container	目标容器的选择器，默认基于 body，若传入 window, document, "html" 则统一转换为 "body"	String	body
effect	图片显示效果，可选值：show, fadeIn	String	show
placeholder	占位图片	String	base64 编码的灰图
threshold	边界值，单位：px	Number	0
width	图片宽度，传入数字则自动设置 px 单位，也可传入百分比形式，还可通过 css 设置	Number / String	-
height	图片高度，传入数字则自动设置 px 单位，也可传入百分比形式，还可通过 css 设置	Number / String	-
eventType	指定加载图片的鼠标事件，可选值：click, dblclick, mouseover	String	-
axis	容器滚动方向，可选值：x, y	String	y
onSuccess	图片加载成功时执行的回调函数，回调参数有两个： 1. 图片加载成功的元素 2. 加载成功的图片地址	Function	空函数
onError	图片加载失败时执行的回调函数，回调参数有两个： 1. 图片加载失败的元素 2. 加载失败的图片地址	Function	空函数
strictLazyMode （v2.1.4 新增）	严格懒加载模式，当此属性值为 true 时，懒加载元素如果满足以下任一条件，将不进行懒加载操作： 1. 此元素本身处于隐藏状态 2. 此元素本身 opacity: 0 3. 此元素含有处于隐藏状态的祖先元素	Boolean	true
beforeLazy （v2.1.0 新增）	在进行懒加载操作前执行的函数，函数参数是图片地址（可用于在开始加载图片之前对图片地址做最后的处理，并返回处理后的图片地址）	Function	空函数
autoCheckChange （v2.1.0 新增）	自动检测目标元素内需要进行懒加载操作的元素的变化并自动解析	Boolean	false
useErrorImagePlaceholder （v2.1.1 新增）	当图片加载失败时，使用指定的图片进行占位显示（可使用内置灰色图或自定义图片）	Boolean / String	false

## 开源协议

MIT License

## 浏览器支持 - `Chrome 80+` - `Edge 90+` - `Safari 13+` - `Firefox 90+` - `IE 不支持`