简单的JavaScript图像延迟加载库Echo.js

所属分类:UI-加载

 68624  301  查看评论 (16)
分享到微信朋友圈
X
简单的JavaScript图像延迟加载库Echo.js ie兼容8

兼容性

Echo.js 使用了 HTML5 的 date 属性,并且需要获取该属性的值,所以它并不兼容 IE6、IE7。虽然 Lazy Load 也使用了 HTML5 的 date 属性,但它获取值的方法不一样。

使用方法

1、引入文件

<script src="js/echo.min.js"></script>

2、HTML

<img src="images/blank.gif" alt="pic" data-echo="img/pic.jpg" width="640" height="480">

blank.gif 是一个 1 x 1 的图片,用做默认图片,data-echo 的属性值是图片的真实地址。同样最好给图片设置宽度和高度,或者在 CSS 中设置也可以,否则似乎很底部很底部的图片才会延迟加载。

3、JavaScript

Echo.init({
    offset: 0,
    throttle: 0
});

参数

参数说明
offset离可视区域多少像素的图片可以被加载
throttle图片延迟多少毫秒加载


相关插件-加载

圆形进度按钮

执行按钮提交创建圆形进度加载提示
  加载
 25789  338

菊花加载

超好用的菊花加载效果,可用于手机端
  加载
 50441  291

js环形进度条

js环形进度条,再也不怕js了
  加载
 54128  413

JS简单进度条

再也不愁JS进度条了
  加载
 29012  223

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

    yanhaitao 0
    2018/1/11 16:59:07
    我做了一个切换的效果,最后几张图片加载不出来是怎么回事啊,求大神告知 回复
    work 0
    2017/12/27 15:16:28

    github上搜索的econ.js不能用在此处。

    Echo.inin() 大写。

    图片img样式必须设置宽或高。

    回复
    宏旺 0
    2017/11/15 13:56:02

    图片不错,楼主哪搞的

    回复
    志凯 0
    2017/4/19 21:37:31

    怎么加入淡出效果

    回复
    韦国慧 0
    2016/10/28 17:10:53
    显示图片是把加载的图标盖住吗?为什么不是隐藏呢?
        d,调、无所谓0
        2018/3/13 13:54:33
        多的
    回复
    倾_ 听 ? 0
    2016/10/11 15:10:07
    图片不设置宽高的话背景图片没办法垂直居中 回复
    理想和现实总是背道而驰。 0
    2016/9/21 12:09:40
    你好,幻灯片如何处理,只能出第一张图。 回复
    许帅 0
    2016/8/29 17:08:23
    这个测试过了  是可以用的 github上的不能用的 回复
    天玑◆渔火 0
    2016/3/31 11:03:59
    必须设定图片宽度吗?100%宽度不行吗? 回复
    jsoyoy 1
    2015/9/26 11:09:37

    3、JavaScript

    Echo.init({
        offset: 0,
        throttle: 0
    });
    这里的Echo.init应该是小写,才对吧!不然会报错!


        lobtao0
        2016/3/9 9:03:25
        和github上的那个echo.js不一样,这个是正常的,github上的那个不能正常使用。
    回复
取消回复