EasyLazyload.js 超好用js图片延迟加载

所属分类:UI-加载

 44446  390  查看评论 (41)
分享到微信朋友圈
X
EasyLazyload.js 超好用js图片延迟加载 ie兼容10

更新时间:2018/7/23 上午12:1:43

更新说明:修改不能正常访问的图片路径。


EasyLazyload.js

超级好用的js 图片延迟加载插件 

使用方法

引入 EasyLazyload.js

将图片 src 替换为 data-lazy-src

<img data-lazy-src="..." />

调用全局方法

lazyLoadInit()

使用须知

  • 引入 EasyLazyload.js 前需要引用 jquery && zepto

  • 需要在开启服务下运行

参数列表

示例代码

<script>
    lazyLoadInit({
        coverColor:"white",
        coverDiv:"<h1>test</h1>",
        offsetBottom:0,
        offsetTopm:0,
        showTime:1100,
        onLoadBackEnd:function(i,e){
            console.log("onLoadBackEnd:"+i);
        }
        ,onLoadBackStart:function(i,e){
            console.log("onLoadBackStart:"+i);
        }
    });
</script>
  • coverColor:图片即将显示时覆盖层的颜色

  • coverDiv:图片即将显示时覆盖层可显示的土自定义组件

  • offsetBottom:图片距离屏幕底部出现时间点的距离差值(注解:延迟加载图片会在图片顶部接触屏幕底部时出现,如果想要让图片顶部距离屏幕底部有一定距离时出现,请设置此值)

  • offsetTopm:图片距离屏幕底部出现时间点的距离差值(注解:同上,距离顶部)

  • onLoadBackEnd:图片已经完全出现时的回调函数,参数为(index,event)加载的图片下标,以及dom对象(dom对象为jquerydom或zeptodom对象)

  • onLoadBackStart:图片已经下载完成,即将开始显示时的回调函数(参数同上)

EasyLazyload.js 优点

  • EasyLazyload.js 是真延迟加载 而且不会对样式有任何影响。

  • 队列式加载,不会影响页面效率。

  • 不需要设置任何宽高,简单易用

相关插件-加载

HTML5实现的网页进度条

HTML5实现的网页进度条
  加载
 30504  270

jQuery动画进度条 实时显示进度百分比DEMO演示

jQuery动画进度条 实时显示进度百分比DEMO演示
  加载
 33122  224
  加载
 27483  257

带刻度的进度条

html5 CSS3渐变进度条动画效果
  加载
 23865  194

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

    小土土 0
    2020/4/24 19:01:46
    为什么有的图片显示正常,有的图片他会把图片src解析成乱码??
        Panda丶0
        2020/8/4 19:46:49
        我也是 为啥呢?
    回复
    joy1793 0
    2019/12/28 10:31:02
    在手机上 拉不出来 网上回拉再往下拉 才会出来 回复
    幕念 0
    2019/12/24 17:38:34
    您这个没法用啊,自能加载几个图片,然后其他的都出现一些数字
    回复
    0
    2019/9/7 15:58:53
    ajax请求过来的为啥不显示啊
    回复
    ww535695762 0
    2019/5/12 11:06:04
    我看懂了代码 挺好用的不懂可以问我
        @南瓜屋i0
        2019/7/26 16:59:24
        我想让他每次调用 i 都从0 开始怎么弄
        0
        2019/9/5 22:56:20
        ajax里怎么出不来
    回复
    一毛 0
    2018/11/22 15:02:17
    引入的,zepto 1.2.0 图片显示不出来 回复
    . J。 0
    2018/7/23 11:03:03
    需要在开启服务下运行是什么意思 回复
    asfasfasfasfasfasfsdscs 0
    2018/5/22 10:15:05
    请问下,我放ajax里面还是用不了是怎么回事啊 回复
    X 0
    2018/4/21 18:27:43
    在ipad里面有bug,最多只能加载2张图,余下的都加载不出来!!!!!! 回复
    0
    2018/3/15 9:50:37
    怎么设置首屏显示呢 回复
取消回复