简单的JavaScript图像延迟加载库Echo.js
插件描述:和 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的更多相关文章
- 简单的Javascript图片延迟加载库Echo.js
简介: 和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQue ...
- JavaScript语法高亮库highlight.js使用
highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库 ...
- javascript模块化编程库require.js的用法
随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的.更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码 ...
- ECHO.js 纯javascript轻量级延迟加载
演示 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf ...
- 如何使用echo.js实现图片的懒加载(整理)
如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
- 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
- echo.js 延迟加载图片控件
echo.js的github地址:https://github.com/toddmotto/echo echo是一个独立的JavaScript.轻量级的.延迟图片加载插件,echo压缩后体积不到1 ...
- 延迟加载图片控件--echo.js
echo.js的github地址:https://github.com/toddmotto/echo echo是一个独立的JavaScript.轻量级的.延迟图片加载插件,echo压缩后体积不到1 ...
随机推荐
- Analysis of Servlet
@WebServlet("/cdiservlet") public class NewServlet extends HttpServlet { private Message m ...
- PhoenixFD插件流体模拟——UI布局【Rendering】详解
Liquid Rendering 流体渲染 本文主要讲解Rendering折叠栏中的内容.原文地址:https://docs.chaosgroup.com/display/PHX3MAX/Liqui ...
- Python学习—数据库篇之初识mysql
一.下载与安装 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下公司.MySQL 最流行的关系型数据库管理系统,在 WEB 应用方面MySQL是最好 ...
- Rust2018
Rust已经有2本中文书了 <<深入浅出Rust>> <<Rust编程之道>> 带着aync的rust 2019会更精彩 看async , 在这里htt ...
- H5(ionic2+VScode) 环境安装
一:node.js.npm.cnpm.cordova环境安装 介绍下概念 node.js 非阻塞异步的Ajax 操作基础框架. npm 国外的node.js 包管理器 cnpm 国内淘宝的node.j ...
- 贝叶斯分类器,随机森林,梯度下载森林,神经网络相关参数的意义和data leakage
构建的每一颗树的数据都是有放回的随机抽取的(也叫bootstrap),n_estimators参数是你想设置多少颗树,还有就是在进行树的结点分裂的时候,是随机选取一个特征子集,然后找到最佳的分裂标准.
- 2018-2019-2 20165315《网络攻防技术》Exp6 信息搜集与漏洞扫描
2018-2019-2 20165315<网络攻防技术>Exp6 信息搜集与漏洞扫描 目录 一.实验内容 二.实验步骤 1.各种搜索技巧的应用 2.DNS IP注册信息的查询 3.基本的扫 ...
- Spring常用注解总结(3)
@Configuration 表示该类为"配置类",可替换xml配置文件.与@Component不同的是,@Configuration会生成CGLIB代理class. @Targe ...
- hive上传数据到oracle
# Oracle 建立hive外部表 使用oracle的大数据连接器向建立hive的外部表,在通过在oracle中根据外部表建立内部表(create table as select * from ex ...
- 【转】重写Equals为什么要同时重写GetHashCode
.NET程序员都知道,如果我们重写一个类的Equals方法而没有重写GetHashCode,则VS会提示警告 :“***”重写 Object.Equals(object o)但不重写 Object.G ...