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

所属分类:UI-加载

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

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

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

相关插件-加载

jquery简单时尚的进度条插件ProBars

ProBars时尚的进度条插件,提供多种加载效果兼容性好,在低版本浏览器中会确少一些效果.
  加载
 15484  25

jQuery nprogress.js页面加载进度条

jQuery nprogress.js页面加载进度条显示当前网页的加载进度
  加载
 25229  94

bootstrap彩色斑马进度条

基于Bootstrap制作的超酷彩色斑马线条纹进度条设计效果。
  加载
 4886  27

jQuery css3刷新加载

jQuery CSS3网页预加载动画
  加载
 17593  49

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

    雪飘香 0
    2017/11/18 15:28:08

    刷新页面 图片不显示得滚动才能显示 有人解决了吗

        仰望星空0
        2017/12/28 15:10:54

        你们引入有用吗

        我做微信公众号,引入了都没用的,图片都没法显示

    回复
    大铭 0
    2017/11/16 14:16:28
    背景图片可以懒加载吗 回复
    心梦无痕 0
    2017/11/3 22:53:51

    动态添加的图片没有办法使用!

    回复
    涛声依旧 0
    2017/9/4 11:53:51

    啥叫“真”延迟加载

    回复
    jesonchen 0
    2017/8/11 11:04:40

    这个ie8以下不兼容有解决方案吗?

    回复
    joy1793 0
    2017/5/17 17:09:41

    老哥,能否加下QQ,有问题请教。290408556

    回复
    0
    2017/4/28 15:47:40

    能不能设定不同容器呢,不同容器不同背景图

    回复
    彼此 0
    2017/4/24 22:56:55
    这个插件能不能延迟加载背景图片?
        All or nothing0
        2017/7/28 17:06:10

        no

    回复
    风继续吹 0
    2017/4/11 14:51:49

    你好,我想让图片从上向下慢慢出现,而不是一下就显示全,请问参数里面还有其他的属性吗

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

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

        彼此0
        2017/4/24 22:58:44

        ajax给img赋值data-lazy-src属性,然后在ajax success 中调用Init方法,不然初始化的时候img的src属性还是空的

    回复
取消回复