UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

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

所属分类：UI-加载

 104134  619  查看评论 (55)
分享到微信朋友圈
X
EasyLazyload.js 超好用js图片延迟加载 ie兼容10
 查看演示  website  立即下载

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

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

EasyLazyload.js

超级好用的js 图片延迟加载插件 

使用方法

引入 EasyLazyload.js

将图片 src 替换为 data-lazy-src

1
<img data-lazy-src="..." />

调用全局方法

1
lazyLoadInit(）

使用须知

  • 引入 EasyLazyload.js 前需要引用 jquery && zepto

  • 需要在开启服务下运行

参数列表

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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 是真延迟加载 而且不会对样式有任何影响。

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

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

相关插件-加载
查看更多

创造性的负载效应

 13种页面加载特效
  加载
 26541  344

jquery.Loading

 8种fakeloader页面加载效果代码，支持7种效果和自定义图片，兼容主流浏览器！
  加载
 68756  437

jQuery 圆型进度条

 jQuery canva圆型进度条，可通参数快速修改进度条
  加载
 36681  339

jquery 实现流程进度显示

 基于jQuery实现的流程进度显示，可应用于网络订单状态查看，用户注册状态查看等
  加载
 72500  591

讨论这个项目（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 jQ币
    2021/11/15 14:40:37

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

    自己的demo：
    在success函数中，

    1
    2
    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 图片显示不出来 回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复