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

所属分类:UI-加载

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

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

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

相关插件-加载

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

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

HTML5 SVG轻量级jQuery进度条插件

这是一款基于HTML5 SVG的轻量级jQuery进度条插件。该进度条插件使用简单,它提供了一些基本的参数来控制进度条的外观和动画,是一款非常实用的进度条插件。
  加载
 4643  19

jQuery图片延迟加载插件jQuery.lazyload

jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下,它也能帮助减轻服务器负载。
  加载
 180123  351

jQuery预加载插件

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

讨论这个项目(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就可以知道
    回复
取消回复