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

所属分类:UI-加载

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

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

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

相关插件-加载

HTML5 画布的加载图像插件

Sonic 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像。更强大的是提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的加载动画效果
  加载
 13003  64

数字递加效果

数字递加效果
  加载
 14971  96

创造性的负载效应

13种页面加载特效
  加载
 3110  35

基于iscroll.js和Vue.js 的上拉加载功能实现

之前使用vue开发移动项目的时候 发现与大部分的iscroll插件 不兼容 会造成计算scroller高度不准确 拉不动 所以自己写了个最简单的 希望遇到同样问题的新手们能够相互交流
  加载
 5603  22

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

    涛声依旧 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属性还是空的

    回复
    ☆阿星☆ 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
        2017/6/20 19:24:34

        解决没?

    回复
    离枝 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就可以知道
    回复
取消回复