JS懒加载插件FunLazy

来源：易助科技网浏览量：4收藏

简介

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">

3. 使用

基本用法

<script>
  FunLazy();
</script>

在 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>