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

所属分类:UI-加载

 101564  618  查看评论 (55)
分享到微信朋友圈
X
EasyLazyload.js 超好用js图片延迟加载 ie兼容10

更新时间:2018/7/23 上午12:1:43

更新说明:修改不能正常访问的图片路径。


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 是真延迟加载 而且不会对样式有任何影响。

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

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

相关插件-加载

3D立体环形进度图表

3D立体环形进度图表,只要传入0100的整数,就能显示对应的百分比,大小自适应。
  加载
 32827  328

jQuery动画进度条 实时显示进度百分比DEMO演示

jQuery动画进度条 实时显示进度百分比DEMO演示
  加载
 42717  344

jquery.Loading

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

jQuery进度条插件jqbar

柱状图动态显示工具
  加载
 46099  360

讨论这个项目(55)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    chasing 0
    2022/11/29 16:34:52
    有点bug,有轮播图的话有点时候轮播图里面有的载不出来
        为欢几何0
        2024/6/4 20:15:40
        可以加载出来,就是网页默认给我变大了一点,导致我的固定定位的侧边栏显示不全
    回复
    初柒??. 0
    2022/4/18 19:18:17
    加载不出来呀
        UNDIFined0
        2022/5/21 14:11:34
        有些可以加载出来,有些不行,不知都问题出在哪里
    回复
    Prvyx 1
    2021/11/15 14:40:37

    对于ajax的url图片的懒加载,作者在Github上进行了更新,多了个lazyLoadAgain()函数添加在ajax的success中
    Github地址:

    https://github.com/channg/EasyLazyload.js

    自己的demo:
    在success函数中,

    let $img=$("<img data-lazy-src='/voteSystem_war_exploded"+rs.data[i].picUrl+"'>",{});
    lazyLoadAgain();

    即可

        初柒??.0
        2022/4/18 19:18:50
        有的加载不了
    回复
    宁远 0
    2021/10/23 9:25:25
    引入的js和写的js文件必须放在dom元素下面,否则图片加载不出来 回复
    小土土 0
    2020/4/24 19:01:46
    为什么有的图片显示正常,有的图片他会把图片src解析成乱码??
        Panda丶0
        2020/8/4 19:46:49
        我也是 为啥呢?
        天晴时’微笑0
        2020/12/11 19:26:36
        我也是,不知道为啥
        花开富贵0
        2021/3/26 11:09:01
        原来不止我一个😵
        七十与你0
        2021/4/22 20:23:08
        没看到评论,原来不止我一个,奇怪的是,视频素材里面可以加载,到自己代码里面就出现图片不全
        花开?花落ω终败0
        2021/4/23 20:30:24
        我也是这样不知道为什么
        cctvxt0
        2022/5/14 16:05:45
        作者有更新 看第一个可以了
        远道0
        2022/9/3 11:39:35
        有轮播图的话,可以把轮播图删除就可以加载出来了
    回复
    joy1793 0
    2019/12/28 10:31:02
    在手机上 拉不出来 网上回拉再往下拉 才会出来 回复
    幕念 0
    2019/12/24 17:38:34
    您这个没法用啊,自能加载几个图片,然后其他的都出现一些数字
    回复
    0
    2019/9/7 15:58:53
    ajax请求过来的为啥不显示啊
    回复
    ww535695762 0
    2019/5/12 11:06:04
    我看懂了代码 挺好用的不懂可以问我
        @南瓜屋i0
        2019/7/26 16:59:24
        我想让他每次调用 i 都从0 开始怎么弄
        0
        2019/9/5 22:56:20
        ajax里怎么出不来
        天晴时’微笑0
        2020/12/11 19:26:08
        为什么我的图片一部分可以显示一部分无法显示
    回复
    一毛 0
    2018/11/22 15:02:17
    引入的,zepto 1.2.0 图片显示不出来 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复