前端技术文档及相关资料下载
关于前端html、css、js等技术上的各种疑难棘手问题的解决方案探讨及相关资料下载！
JS懒加载插件FunLazy
简介
FunLazy是一个完全使用原生 JavaScript 开发的图片懒加载组件，可完美支持主流的现代高级浏览器，组件会优先使用 Intersection Observer API，以此提高懒加载的性能。
参数说明：
| 参数 | 说明 | 类型 | 默认值 |
| container | 目标容器的选择器，默认基于 body，若传入 window, document, "html" 则统一转换为 "body" | String | body |
| effect | 图片显示效果，可选值：show, fadeIn（ fadeIn 不支持 IE9 ） | String | show |
| placeholder | 占位图片 | String | base64 编码的灰图 |
| threshold | 边界值，单位：px | Number | 0 |
| width | 图片宽度，数字值时单位是 px，也可以是百分比形式， 可通过 css 或行内属性设置 | Number / String | "" |
| height | 图片高度，数字值时单位是 px，也可以是百分比形式， 可通过 css 或行内属性设置 | Number / String | "" |
| axis | 容器滚动方向，可选值：x, y | String | y |
| eventType | 指定加载图片的鼠标事件，可选值：click, dblclick, mouseover | String | "" |
| 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 新增） | 自动检测目标元素内需要进行懒加载操作的元素的变化 （例如：动态添加新元素）并自动解析（不支持 IE 9 - 10） | Boolean | false |
| useErrorImagePlaceholder （v2.1.1 新增） | 当图片加载失败时，使用指定的图片进行占位显示 （可使用内置灰色图或自定义图片） | Boolean / String | false |
使用
1. 引入文件
<script src="https://unpkg.com/funlazy@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/funlazy@latest"></script>2. HTML
<img data-funlazy="1.jpg" width="500" height="309">
<img data-funlazy="2.jpg" width="500" height="309">
<img data-funlazy="3.jpg" width="500" height="309">
<script>
FunLazy();
</script>3. 使用
在 vue 单文件中使用（vue2.x 写法）：
<template>
<div>
<img v-for="img of images" :key="img" :data-funlazy="img" width="500" height="309">
</div>
</template>
<script>
const FunLazy = require( "funlazy" );
export default {
data () {
return {
images: [
require( "./assets/img/1.jpg" ),
require( "./assets/img/2.jpg" ),
require( "./assets/img/3.jpg" )
]
}
},
mounted () {
FunLazy();
}
}
</script>在 vue 单文件中使用（vue3.x 写法）：
<template>
<div>
<img v-for="img of imageData.images" :key="img" :data-funlazy="img" width="500" height="309">
</div>
</template>
<script>
import { reactive, onMounted } from "vue";
const FunLazy = require( "funlazy" );
export default {
setup () {
const imageData = reactive({
images: [
require( "./assets/img/10.jpg" ),
require( "./assets/img/11.jpg" ),
require( "./assets/img/12.jpg" ),
require( "./assets/img/13.jpg" )
]
});
onMounted(() => {
FunLazy();
})
return {
imageData
}
}
}
</script>相关链接
GitHub 地址 ：https://github.com/Dreamer365/FunLazy