轻量级图片懒加载组件(原创)

所属分类:UI-加载

 4561  57  查看评论 (1)
分享到微信朋友圈
X
轻量级图片懒加载组件(原创) ie兼容9

更新时间:2020-03-20 10:42:55

更新说明:程序库版本升级至 v2.1.0;不再依赖 jQuery,完全采用原生 Javascriptt 开发;不在兼容 IE8- 的浏览器;


FunLazy v1.0.0版下载(兼容ie7)


FunLazy

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

使用方法

引入文件

<!-- 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 表示 windowObject / Stringnull
effect图片显示效果,可选值:show, fadeInStringshow
placeholder占位图片Stringbase64 编码的灰图
errorPlaceholder图片加载失败时的占位图片String""
threshold边界值,单位:pxNumber0
width图片宽度,数字值时单位是 px,也可以是百分比形式,可通过 css 或行内属性设置Number / Stringnull
height图片高度,数字值时单位是 px,也可以是百分比形式,可通过 css 或行内属性设置Number / Stringnull
axis容器滚动方向,可选值:x, yStringy
eventType指定加载图片的鼠标事件,可选值:click, dblclick, mouseoverString""
onSuccess图片加载成功时执行的回调函数,回调参数有两个:
1. 图片加载成功的元素
2. 加载成功的图片地址
Function空函数
onError图片加载失败时执行的回调函数,回调参数有两个:
1. 图片加载失败的元素
2. 加载失败的图片地址
Function空函数


相关插件-加载

jquery图片延迟加载

不有添加多余的属性值,直接设src属性值就ok。
  加载
 31777  283

jQuery 圆型进度条

jQuery canva圆型进度条,可通参数快速修改进度条
  加载
 21432  225

jQuery局部加载

一个页面有多个接口请求时,接口返回的速度不一样,可以将所有接口返回后分开渲染,先返回的先渲染
  加载
 13741  191

jquery 实现流程进度显示

基于jQuery实现的流程进度显示,可应用于网络订单状态查看,用户注册状态查看等
  加载
 54667  448

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ?? ?? The One。 0
    2020/3/27 10:13:31
    切换显示隐藏的时候有问题啊? 回复
取消回复