插件描述:和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQuery 或其他 JavaScript 库,可独立使用。并且 Echo.js 非常小巧,压缩后不足 1KB。

兼容性

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

使用方法

  1、引入文件

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

  2、HTML

<img src="data: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 图片延迟多少毫秒加载

本文属于转载,为尊重原作者的劳动成果,在此标注原文地址,点击此处浏览

简单的JavaScript图像延迟加载库Echo.js的更多相关文章

  1. 简单的Javascript图片延迟加载库Echo.js

    简介: 和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQue ...

  2. JavaScript语法高亮库highlight.js使用

    highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库 ...

  3. javascript模块化编程库require.js的用法

    随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的.更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码 ...

  4. ECHO.js 纯javascript轻量级延迟加载

    演示 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf ...

  5. 如何使用echo.js实现图片的懒加载(整理)

    如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...

  6. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  7. 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)

    js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...

  8. echo.js 延迟加载图片控件

    echo.js的github地址:https://github.com/toddmotto/echo   echo是一个独立的JavaScript.轻量级的.延迟图片加载插件,echo压缩后体积不到1 ...

  9. 延迟加载图片控件--echo.js

    echo.js的github地址:https://github.com/toddmotto/echo   echo是一个独立的JavaScript.轻量级的.延迟图片加载插件,echo压缩后体积不到1 ...

随机推荐

  1. h5-上传图片预览

    <div class="content_sq" style="position:relative;"> <img src="imag ...

  2. 微信小程序-遍历列表

    #index.js data: { "messg":"helloworld1111", "items":[ {"name" ...

  3. yii2 模板twig中使用GridView::widget

    yii框架twig模板中使用GridView::widget 需要这样写: {{ grid_view_widget({ 'dataProvider': provider, 'columns': [ ' ...

  4. POJ-3660.Cow Contest(有向图的传递闭包)

      Cow Contest Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 17797   Accepted: 9893 De ...

  5. SSM商城开发学习

    功能模块:前端:门户.商品搜索.商品展示.购物车.注册&登录 后端:商品管理.订单管理.cms 上线,bug,维护,停到上线,维护,打包,上线 某一个模块出现bug,停到这个模块 tomcat ...

  6. XML Linq 学习笔记

    XML如下: <?xml version="1.0" encoding="utf-8"?> <Dishes> <Dish> ...

  7. Zookeeper使用--命令行

    一.前言 在学习了Zookeeper相关的理论知识后,下面接着学习对Zookeeper的相关操作. 二.Zookeeper部署 Zookeeper的部署相对来说还是比较简单. Zookeeper有三种 ...

  8. SpringMVC 使用PUT请求遇到的问题小结

    最近在使用REST风格的URL进行CURD操作的学习过程中 发现使用PUT请求时候提交表单进行修改操作 报错:Request method 'PUT' not supported 在网上查找资料发现是 ...

  9. netty服务器端启动

    package com.imooc.netty.ch3; import com.imooc.netty.ch6.AuthHandler; import io.netty.bootstrap.Serve ...

  10. appium定位toast消息的使用

    定位使用xpath后,定位消息文本,然后使用text获取消息文本做断言.toast_loc = ("xpath", ".//*[contains(@text,'切换运营商 ...