建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS懒加载插件FunLazy

来源:易助科技网浏览量:14收藏

简介


FunLazy是一个完全使用原生 JavaScript 开发的图片懒加载组件,可完美支持主流的现代高级浏览器,组件会优先使用 Intersection Observer API,以此提高懒加载的性能。


参数说明:


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


使用

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>



相关链接

GitHub 地址 :https://github.com/Dreamer365/FunLazy

在线演示 :https://www.jq22.com/demo/jqueryjiazai202002061223/index.html