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

所属分类:UI-加载

 25452  175  查看评论 (2)
分享到微信朋友圈
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局部加载

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

HTML5手机端手指滑动上拉加载

jQuery HTML5手机端手指滑动上拉加载代码是一款通过jquery实现tab切换和上拉加载更多的效果,适用于手机端页面开发。
  加载
 55488  584

js图片懒加载插件jxLazyload

最简便的jquery图片懒加载插件jxLazyload
  加载
 29437  189

jquery图片加载进度

图片异步加载进度表条
  加载
 54103  386

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

    pengdingkan 0
    2021/3/8 11:56:09
    大佬要开源一下这个demo的源码吗? 回复
    ?? ?? The One。 0
    2020/3/27 10:13:31
    切换显示隐藏的时候有问题啊? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复