1 Star 0 Fork 17

chenhailong118 / FunLazy

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

FunLazy

一个高性能的轻量级图片懒加载组件

FunLazy 是一个基于 jQuery 的图片懒加载组件,可以完美兼容桌面端和移动端的主流浏览器
组件在不同的浏览器中会自动选择最佳的懒加载方式,以此提高懒加载的性能

查看在线示例

引入文件

<!-- jquery 1.9.0+ -->
<script src="jquery.min.js"></script>
<script src="funlazy.min.js"></script>

添加属性

<body>
    <img data-funlazy="01.jpg" width="700" height="700">
    <img data-funlazy="02.jpg" width="700" height="700">
    <img data-funlazy="03.jpg" width="700" height="700">
    <img data-funlazy="04.jpg" width="700" height="700">
    <img data-funlazy="05.jpg" width="700" height="700">
    <img data-funlazy="06.jpg" width="700" height="700">
    <img data-funlazy="07.jpg" width="700" height="700">
    <img data-funlazy="08.jpg" width="700" height="700">
    <img data-funlazy="09.jpg" width="700" height="700">
    <img data-funlazy="10.jpg" width="700" height="700">
</body>

调用组件

$.FunLazy({
    onSuccess: function ( el, img ) {
        console.log( "图片:" + img + "已加载" );
    }
});

API 参数

参数 说明 类型 默认值
container 目标容器,默认:null 表示 window Object / String null
effect 图片显示效果,可选值:show, fadeIn String show
placeholder 占位图片 String base64 编码的灰图
errorPlaceholder 图片加载失败时的占位图片 String ""
threshold 边界值,单位:px Number 0
width 图片宽度,数字值时单位是 px,也可以是百分比形式,可通过 css 或行内属性设置 Number / String null
height 图片高度,数字值时单位是 px,也可以是百分比形式,可通过 css 或行内属性设置 Number / String null
axis 容器滚动方向,可选值:x, y String y
eventType 指定加载图片的鼠标事件,可选值:click, dblclick, mouseover String ""
onSuccess 图片加载成功时执行的回调函数,回调参数有两个:
1. 图片加载成功的元素
2. 加载成功的图片地址
Function 空函数
onError 图片加载失败时执行的回调函数,回调参数有两个:
1. 图片加载失败的元素
2. 加载失败的图片地址
Function 空函数

开源协议

MIT License


浏览器支持

Chrome Firefox Opera Edge Safari IE6+
MIT License Copyright (c) 2020 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
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

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

搜索帮助