10 Star 75 Fork 17

FeCoder / FunLazy

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

FunLazy

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

查看示例


安装

unpkg cdn

<script src="https://unpkg.com/funlazy"></script>

jsdelivr cdn

<script src="https://cdn.jsdelivr.net/npm/funlazy"></script>

npm 安装

npm i funlazy -S
const FunLazy = require( "funlazy" );

使用

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

注:如果在 Vue 项目中使用,需要在 mounted(vue2)或 onMounted(vue3) 中调用 FunLazy 函数。


自定义配置项

FunLazy( {
    placeholder: "thumb.jpg",
    effect: "fadeIn"
} );

返回配置项

const opt = FunLazy( {
    placeholder: "thumb.jpg",
    effect: "fadeIn"
} );

// 根据传入的自定义配置项
// 与默认的配置项进行合并
// 返回合并之后的配置结果
console.log( opt );

自动检测懒加载元素的变化

<button>添加图片</button>
<div id="img-box">
    <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">
</div>

<script>
    const opt = FunLazy( {
        autoCheckChange: true
    } );

    // 设置 autoCheckChange: true
    // 新增加的图片会自动进行懒加载的解析
    const target = document.getElementById( "img-box" );
    document.querySelector( "button" ).addEventListener( "click", () => {
        target.insertAdjacentHTML( "beforeend", '<img data-funlazy="new.jpg" width="500" height="309">' );
    } )
</script>

加载图片前对图片地址进行处理

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

    // beforeLazy 属性可用于在图片进行懒加载操作之前
    // 对图片地址进行最后的处理,相当于架设了一层拦截
    // 可以很简单的在加载前对图片地址进行一次批量处理
    FunLazy( {
        beforeLazy: src => `${ src }?img-id=${ Math.random().toString( 36 ).slice( 2, 10 ) }`
    } );
</script>

当图片加载失败时使用指定的图片占位

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

    // useErrorImagePlaceholder 属性可用于在图片加载失败时
    // 用一张默认的图片进行占位显示
    // - 设置为 true 则使用内置的灰色图进行占位
    // - 传入图片地址则可以自定义占位图
    FunLazy( {
        useErrorImagePlaceholder: true
        
        // 或者:
        // useErrorImagePlaceholder: "img/error.jpg"
    } );
</script>

配置参数

参数 说明 类型 默认值
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 不支持
MIT License Copyright (c) 2020-present ZG Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

原生 JavaScript 开发的轻量级图片懒加载组件 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/dreamer365/FunLazy.git
git@gitee.com:dreamer365/FunLazy.git
dreamer365
FunLazy
FunLazy
master

搜索帮助

14c37bed 8189591 565d56ea 8189591