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

所属分类:UI-加载

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简单进度条插件

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

8种fakeloader页面加载效果代码

8种fakeloader页面加载效果代码,支持7种效果和自定义图片,兼容主流浏览器,推荐下载!
  加载
 17086  161

超炫酷的CSS3进度条动画 背景色渐变

超炫酷的CSS3进度条动画 背景色渐变
  加载
 5748  46

Ladda for Bootstrap 3按钮加载进度插件

Ladda可以让你点击按钮时,在按钮中显示一个加载进度效果。
  加载
 23835  91

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

    0
    2017/4/28 15:47:40

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

    回复
    彼此 0
    2017/4/24 22:56:55
    这个插件能不能延迟加载背景图片? 回复
    风继续吹 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属性还是空的

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

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

        channg1
        2017/2/4 11:38:30

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

        简?dè?忆0
        2017/4/20 11:25:14

        为什么我用ajax获取的图片,不能显示,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就可以知道
    回复
取消回复