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

所属分类:UI-加载

 2981  55  查看评论 (8)
EasyLazyload.js 超好用js图片延迟加载 ie兼容10

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 是真延迟加载 而且不会对样式有任何影响。

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

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

相关插件-加载

11种Loading 动态效果+随机样式

css实现动态loading 效果
  加载
 15075  95

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

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

jQuery延迟加载图片插件Lazy Load XT

jQuery延迟加载图片插件,支持视频和其他媒体的延迟加载。
  加载
 12161  55

jQuery简单进度条插件

jQuery简单实用的轻量级进度条插件
  加载
 7604  37

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币

    app丶 0
    2017/2/20 9:38:05

    在ajax调用成功后 img的src替换完成后 调用 lazyLoadInit lazyLoadInit()方法;你好,这句话我不是很明白,我想问问具体是怎么样的呢

    回复
    ☆阿星☆ 0
    2017/1/8 12:01:26

    在页面上写了静态的图片成功了,想问下如果是从服务器上请求一系列图片,这个应该怎么实现,lazyLoadInit()应该放在哪里触发?把它放在ajax的success回调里边没有成功,页面上什么图片都没显示

        channg1
        2017/2/4 11:38:30

        在ajax调用成功后 img的src替换完成后 调用 lazyLoadInit lazyLoadInit()方法

    回复
    离枝 0
    2016/12/28 16:12:31

    作者大大,为什么运用瀑布流ajax动态加载的图片没有效果啊

        PIC0211
        2016/12/28 16:12:34

        在ajax里的complete方法中调用lazyLoadInit()试试

    回复
    帅气小小琦 0
    2016/12/25 23:12:09

    那么这个插件的功能和常规的lazyload有什么不一样呢 如何判断是是否是真加载呢?通过F12么

        PIC0210
        2016/12/28 16:12:26

        F12的network里就知道了~

        channg0
        2016/12/29 14:12:53
        看network就可以知道
    回复
取消回复
    PROMULGATOR

    channg

    北京市