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

所属分类:UI-加载

 2394  45  查看评论 (6)
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 是真延迟加载 而且不会对样式有任何影响。

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

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

相关插件-加载

js环形进度条

js环形进度条,再也不怕js了
  加载
 21544  195

jQuery预加载插件

jQuery Fadeloader的插件可以让你轻松实现预加载到您的网站或部分使用级联渐显效果来显示特定的内容块(例如,头> MENU>内容>页脚)
  加载
 19242  22

数字递加效果

数字递加效果
  加载
 9378  82

动感的页面加载动画效果

动感的页面加载动画效果
  加载
 17805  181

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

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

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

    回复
    离枝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

    北京市